This PR updates the minimum version of React used by examples from 17.0.2 to 18.2.0.
Fixes#41975
## Bug
- [x] Related issues linked using `fixes #41975`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
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
```
## Motivation
As Graphcool is being shutdown, we replaced all the graphcool api endpoints with some handcrafted APIs using Prisma & Nexus, that can be found here https://github.com/prisma-labs/nextjs-graphql-api-examples. These GraphQL endpoints are now deployed to Vercel.
## Notes
- I couldn't get the reason-relay example to run. Given that the relay endpoint works on the other relay example, I don't see any reason why it wouldn't work on that one
- The `with-apollo` example is buggy when creating some posts, but nothing related to the switch of the api endpoint as it was already buggy before. I suspect the `concatPagination` strategy to be the cause of that bug, but I couldn't figure it out.
Fixes#14780
* Example with-react-relay-network-modern: update dependencies
* Example with-react-relay-network-modern: move relay __generated__ out of pages dir
* Example with-react-relay-network-modern: fix some errors
- Without checking if props.allBlogPosts exists it fails sometimes on
"TypeError: Cannot read property 'edges' of undefined"
- I have no idea how it could work before with Component.query().params.name,
but maybe some dependent library API has changed
* Example with-relay-modern-server-express: update dependencies
* Example with-relay-modern-server-express: move relay __generated__ out of pages dir
Fixes Error: Build optimization failed: found page without a React Component as default export in
pages/__generated__/pages_indexQuery.graphql
* Example with-relay-modern: update dependencies
* Example with-react-relay-network-modern: fix prettier errors
Update examples with-relay-modern and with-relay-modern-server-express to react-relay 2.0.0
- react-relay has started to use new Context API instead of Legacy Context API
- add `parseInt` because graphql 14.0.0 introduced stricter scalar value coercion
Closes#6157
I wrote a [script](https://github.com/j0lv3r4/dependency-version-updater) to update dependencies recursively in `package.json` files, e.g.:
```
$ node index.js --path="./examples" --dependencies="react=^16.7.0,react-dom=^16.7.0"
```
This PR contains the result against the examples folder.
* Fix with-relay-modern example
Starting with react-relay 1.5.0 the schema canno't be in the same dir as
the src. This can be fixed by excluding the schema dir. Globs should
also be inside quotation marks, to avoid non-deterministic behavior of
different shells.
* Add missing key on BlogPosts
