## Description
This PR ensures that the default prettier config is used for examples
and templates.
This config is compatible with `prettier@3` as well (upgrading prettier
is bigger change that can be a future PR).
## Changes
- Updated `.prettierrc.json` in root with `"trailingComma": "es5"` (will
be needed upgrading to prettier@3)
- Added `examples/.prettierrc.json` with default config (this will
change every example)
- Added `packages/create-next-app/templates/.prettierrc.json` with
default config (this will change every template)
## Related
- Fixes#54402
- Closes#54409
Found that this rule was added but all options are set to `false` so it doesn't do anything. Started with enabling it for examples to ensure minimal breaking of existing PRs.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have 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 helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
## 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
Based on https://github.com/vercel/next.js/pull/13607 - I created a new PR as I can't push changes to the initial PR.
Migrated the Apollo client to use SSG, also removed the link to the live demo because I don't know who the owner is or how to update the deployment.
The implementation is pretty simple and will be added to all the other Apollo examples
* Fix getInitialProps in with-apollo example
The code before had two design flaws:
* When we skip WithApollo.getInitialProps we must hoist PageComponent.getInitialProps if it is present.
* We should expose the apolloClient to underlying PageComponent.getInitialProps contexts.
* Add abort check
* Add some comments
* Add client only example page
https://github.com/zeit/next.js/pull/8620#issuecomment-527870886
* Remove connectToDevTools setting in favor default config
7eaf4132cd/packages/apollo-client/src/ApolloClient.ts (L170-L173)
* Remove fetch check
This is done by https://www.npmjs.com/package/isomorphic-unfetch
* Remove apollo-boost
I am removing this package, because we never actually used it.
This is because we use the named export of apollo boost wich resolves to apollo-client.
This way we removed apollo-link-state, apollo-link-error
* Remove redirect code from the client
* Add @apollo/react-hooks and @apollo/react-ssr
* Migrate react-apollo to @apollo/react-hooks and Query component
* Migrate direct client mutations to useMutation hook
* Disable submit button when submiting a new post
* Fix Show More button not updating when loading more entries
* All queries with uppercase name
* Remove react-apollo
* Update getDataFromTree links
* Fixed lint issues
Since version 2.1, react-apollo is exposing some new components that use the function-as-child (or render-prop) pattern to let you connect apollo-client magic with your components. See the blog article: [New in React Apollo 2.1](https://www.apollographql.com/docs/react/react-apollo-migration.html)
If I'm not mistaken, it's generally agreed that this pattern is (where it works) superior to the HOC pattern, for reasons that are best explained here: https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
So I updated the with-apollo example to use the new API, and IMO this code is much simpler and natural to read and understand, especially if you are not already familiar with Apollo's HOC APIs.
I broke up my changes into separate commits, for easier review. Commits with "Refactor" in the message accomplish the goal of switching to the new APIs while minimizing line-by-line differences (select "Hide whitespace changes" under "Diff settings"). Commits with "Clean up" in the message follow up the refactoring with trivial things like reorganizing code sections, renaming variables, etc.
For the components doing mutations, I chose not to use the `Mutation` component, since that doesn't really make sense to me; a mutation is something that happens at a point in time, so it's not meaningful to represent a mutation in the markup, which exists for a period of time. All that component does is expose a `mutate` function for a single specified mutation, and `result` data for a single firing of the mutation (which we don't need anyways; apollo handles updating the local data with the result). To me it seems simpler and more flexible to just get the apollo client via `ApolloConsumer` and call `.mutate()` on it.
In case anyone is interested, here's what my version of `PostUpvoter` using the `Mutation` component looked like:
<details>
```jsx
import React from 'react'
import { Mutation } from 'react-apollo'
import { gql } from 'apollo-boost'
export default function PostUpvoter ({ votes, id }) {
return (
<Mutation mutation={upvotePost}>
{mutate => (
<button onClick={() => upvote(id, votes + 1, mutate)}>
{votes}
<style jsx>{`
button {
background-color: transparent;
border: 1px solid #e4e4e4;
color: #000;
}
button:active {
background-color: transparent;
}
button:before {
align-self: center;
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 0 4px 6px 4px;
content: '';
height: 0;
margin-right: 5px;
width: 0;
}
`}</style>
</button>
)}
</Mutation>
)
}
const upvotePost = gql`
mutation updatePost($id: ID!, $votes: Int) {
updatePost(id: $id, votes: $votes) {
id
__typename
votes
}
}
`
function upvote (id, votes, mutate) {
mutate({
variables: { id, votes },
optimisticResponse: {
__typename: 'Mutation',
updatePost: {
__typename: 'Post',
id,
votes
}
}
})
}
```
</details>
###
I'm happy with where things are at here, but I'm more than happy to address any comments, concerns, ideas for improvent!
Thanks!
* Add new apollo example
* Update readme
* Update with-apollo to use _app.js
* Move withData to _app
* Make SSR work again
* Remove withData
* Use HOC to provide apolloClient
* Spread pageprops
* Updated dependencies related to Apollo and React.
* Updated libs with Apollo 2 new set of modules.
* Updated to Apollo 2 react integration modules.
* Updated withData to separate apollo state from the app's state.
* Add minimal apollo example
* Update apollo example README
* Update apollo example demo link in README
* Fix button styles
* Fix show more button
* Alias demo url
* Include the data field on the Apollo store when hydrating
* Revert
* Include the data field on the Apollo store when hydrating per tpreusse's suggestion.
* Add example to faq section in README
* Sort by newest; Add active state to buttons
* Make optimization suggestions
* Use process.browser; inline props
* Pass wrapped component's initial props into component heirarchy if they exist
* Remove unnecessary sorting of array
* Update Apollo example
* Remove trailing comma
* Update reduxRootKey
* Remove unnecessary babelrc
* Update with-apollo example
- Remove use of deprecated 'reduxRootKey' option
- Add loading indicator inside pagination button
* Fix with-apollo example pagination; Pass initialState to ApolloClient
* Split apollo example into two (one with and without Redux integration)
* Rename createClient private function to _initClient
* Set initialState default parameter inside initClient function
* Remove redux dep from with-apollo example
* Add minimal apollo example
* Update apollo example README
* Update apollo example demo link in README
* Fix button styles
* Fix show more button
* Alias demo url
* Include the data field on the Apollo store when hydrating
* Revert
* Include the data field on the Apollo store when hydrating per tpreusse's suggestion.
* Add example to faq section in README
* Sort by newest; Add active state to buttons
* Make optimization suggestions
* Use process.browser; inline props
* Pass wrapped component's initial props into component heirarchy if they exist
* Remove unnecessary sorting of array
* Update Apollo example
* Remove trailing comma
* Update reduxRootKey
* Remove unnecessary babelrc
* Update with-apollo example
- Remove use of deprecated 'reduxRootKey' option
- Add loading indicator inside pagination button
- Deleted several unused dependencies.
- Updated dependencies.
- Simplified Apollo related imports thanks to react-apollo exporting apollo-client and graphql-tag since [v0.13.2](https://github.com/apollographql/react-apollo/blob/master/Changelog.md#0132).
- Tidied the readme and added a link to the Apollo docs.
* Add minimal apollo example
* Update apollo example README
* Update apollo example demo link in README
* Fix button styles
* Fix show more button
* Alias demo url
* Include the data field on the Apollo store when hydrating
* Revert
* Include the data field on the Apollo store when hydrating per tpreusse's suggestion.
* Add example to faq section in README
* Sort by newest; Add active state to buttons
* Make optimization suggestions
* Use process.browser; inline props
* Pass wrapped component's initial props into component heirarchy if they exist
* Remove unnecessary sorting of array
* Add minimal apollo example
* Update apollo example README
* Update apollo example demo link in README
* Fix button styles
* Fix show more button
* Alias demo url
* Include the data field on the Apollo store when hydrating
* Revert
* Include the data field on the Apollo store when hydrating per tpreusse's suggestion.
* Add example to faq section in README
* Sort by newest; Add active state to buttons
* Make optimization suggestions
* Use process.browser; inline props
