Improve the Next.js with TypeScript + GraphQL example:
- [x] use GraphQL Code Generator instead of `graphql-let`: more widespread tool and smaller bundle size (types only generation vs code generation)
- [x] use GraphQL Yoga instead of Apollo Server Micro: for lighter bundle size as [stated here](https://github.com/vercel/next.js/pull/36155)
- [x] introduces GraphQL Code Generator on the API side for Resolvers typing
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR updates the docs and examples for `create-next-app` to include pnpm usage.
The following script was used to update every example README:
```js
const fs = require('fs')
const examples = fs.readdirSync('./examples')
for (let example of examples) {
const filename = `./examples/${example}/README.md`
const markdown = fs.readFileSync(filename, 'utf8')
const regex = new RegExp(`^yarn create next-app --example (.*)$`, 'gm')
const output = markdown.replace(regex, (yarn, group) => {
const pnpm = `pnpm create next-app -- --example ${group}`
return `${yarn}\n# or\n${pnpm}`
})
fs.writeFileSync(filename, output)
}
```
## Bug
- Partially fixes#25854
- Badly specified package dependency version (`graphql-let`). The new major version required manual migration. As specified [here](https://github.com/piglovesyou/graphql-let/releases/tag/v0.18.0).
- In `lib/resolvers.ts`
```Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)```
## Fixes
- Migrate as described in migration guide for `graphql-let` above.
- Update some npm packages along the way.
Example `with-typescript-graphql`has unmatched dependency tree in `react-test-renderer` lead to error in #28582, I changed version of `react-test-renderer` to `^17.0.1` and fix that issue.
Closes https://github.com/vercel/next.js/issues/28582
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.
So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)
Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)
> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
Clean up package.json files in the `examples` directory:
- Add `private: true`
- Remove `version` (because they are irrelevant for packages that are not meant to be published)
- Remove `name` (because they are optional for packages that are not meant to be published, and when someone clones an example, they often rename it and the property becomes stale)
- Remove `author`
- Remove `description`
- Remove `license`
Also remove `with-dynamic-app-layout` example completely, since it does the same as `layout-component` (https://github.com/vercel/next.js/pull/27121#discussion_r668178408).
## Documentation / Examples
- [x] Make sure the linting passes
[With next 11 requiring react 17](https://nextjs.org/blog/next-11#upgrade-guide), most of the examples
need to be updated, so the following snippet updated all the examples to
a compatible react version.
```bash
cd examples/
fd -g 'package.json' | xargs sed -r -i 's/"react": ".*"/"react": "^17.0.2"/
fd -g 'package.json' | xargs sed -r -i 's/"react-dom": ".*"/"react-dom": "^17.0.2"/'
# exclude experimental react version
git checkout with-reason-relay/package.json
```
remove `alwaysStrict: true` rule from tsconfig.json in with-typescript example, because the rule is included in `strict: true` has been already written in tsconfig.json and other included rules such as `noImplicitAny: true` have not been written.
[tsconfig documentation link](https://www.typescriptlang.org/tsconfig#alwaysStrict)
## Documentation / Examples
- [x] Make sure the linting passes
* Update deps
* Run "node-check-update -u"
* "graphql" keeps ^14 since other libs expect it
* Install apollo-link and apollo-cache because @apollo/react-common
wants it as peer-deps
* Add graphql-let/schema/loader
* This enables HMR from modifying *.graphqls.
* Add resolver context
* Remove JSDoc, respect TypeScript defs
* ncu -u
* Keep using graphql@^14.6.0 for the other deps
* fix: Migrate to graphql-let@0.10.0
* Removed duplicated deps
* Updated check
Co-authored-by: Luis Alvarez <luis@zeit.co>
* Find/Replace "Deploy it to the cloud..."
* Find/Replace "Deploy it to the cloud..." (no colon)
* Find/Replace "Deploy it to the cloud..." for firebase
* Convert remaining ones
* Storybook deployment
* Update with-stripe-typescript
* Update contributing.md
* Remove `now`
* Update examples/with-stripe-typescript/README.md
Co-Authored-By: Luis Alvarez D. <luis@zeit.co>
* New example with-typescript-graphql
* Update newer graphql-let
* Apply @lfades 's suggestions
* Use "lib" for tools directory
* Move config decorator to next.config.js
* Apply stricter tsconfig
* mod: hide the word "apollo" from users
* mod: Use variable name `withApollo`
* Use the later version of graphql-let
* Only pages can be in pages
* Life improvements
* fix: .grpahql-let.yml point to the wrong document path
* Use a wider glob for less pitfalls
* Add a note about it in README.md
Co-authored-by: Luis Alvarez D. <luis@zeit.co>
