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
The props are being assigned incorrectly based on the `inAppContext`, they should be wrapped in `pageProps` when `inAppContext` is true, not the other way around. This will cause a new apollo client to be created during `getDataFromTree` instead of using the one that has already been created on the server.
* Make withApollo work with _app.js components
* Support wrapping functional _App
* Add apolloClient to NextPageContext & NextPageContext
* Propertly call App.getInitialProps if used in NextAppContext
* Add Automatic Static Optimization warning
* Update deps
* Reduce API surface
* Move back to singleton client
* Improve documentation
* Remove Head.rewind()
We can get rid of .rewind by now as the latest next/head no longer uses legacy context.
* Add extra docs
* Reuse apolloState coming from previous hocs
Co-authored-by: Joe Haddad <timer150@gmail.com>
* 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>
* Make withApollo work with _app.js components
* Support wrapping functional _App
* Add apolloClient to NextPageContext & NextPageContext
* Propertly call App.getInitialProps if used in NextAppContext
* Add Automatic Static Optimization warning
* Remove redefinition of apolloClient
It seems that the definition of `apolloClient` on line 47 seems to be a intended to be defining the `apolloClient` defined in global scope. That re-declaration of the `apolloClient` variable is removed in favor of assigning the return of `initApolloClient()` to the globally defined `apolloClient`
* Rename the global apollo client to globalApolloClient
* 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
* Simplify apollo setup
* Allow disabling of ssr in favor of automatic static optimization
- Converted Class to Function Component
- Added ssr config option
* Exclude @apollo/react-ssr from client bundle
* Remove WithApollo.getInitialProps from the client
* Remove displayName from production build
* Fix production switch
* Change export & fucntion naming
- Use named export
- Change function naming
* Warn if someone tries to use this HOC with _app.js
* Remove _app from with-apollo example
This allows automatic static optimization for pages, that don’t need apollo.
* Rename with-apollo
Name should be same as hoc
* Adjust text to reflect latest changes
more info: 4321c469466160d13bcd52afa099385e84a112a0
* 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
I changed the version to the following files:
- [x] - examples/with-next-css/package.json
- [x] - examples/with-draft-js/package.json
- [x] - examples/custom-server-polka/package.json
- [x] - examples/with-cerebral/package.json
- [x] - examples/with-zones/package.json
- [x] - examples/with-universal-configuration-runtime/package.json
- [x] - examples/with-apollo/package.json
- [x] - examples/with-higher-order-component/package.json
- [x] - examples/with-hashed-statics/package.json
- [x] - examples/with-pkg/package.json
- [x] - examples/with-jest/package.json
- [x] - examples/with-glamorous/package.json
- [x] - examples/with-custom-reverse-proxy/package.json
- [ ] - examples/with-emotion/package.json
- [x] - examples/with-styled-jsx-scss/package.json
- [x] - examples/with-styled-jsx-plugins/package.json
`with-emotion/package.json` already has the latest, so I guess it's other packabe. BUT I think we need to update this example with the latest version of `emotion` since it changed a little bit (for better).
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!
As seen on `with-apollo-auth` there are some things that need to be addressed here too.
* #4554 remove useless `apolloState` from App props on `getDataFromTree`
* #4563 simplify `apolloState` prop
Let me know if further changes/fixes are needed.
Thank you 🎉
Apollo's getDataFromTree is supposed to be called during the server side rendering.
Being called in browser it fires an unnecessary fake render process and blocks components from rendering with loading=true.
Also there was a mistake in this code:
// `getDataFromTree` renders the component first, the client is passed off as a property.
// After that rendering is done using Next's normal rendering pipeline
this.apolloClient = props.apolloClient || initApollo(props.apolloState.data)
**Apollo** component is not rendered by getDataFromTree actually, it renders the **App** directly, thus props.apolloClient will always be undefined.
This example was discussed here: https://github.com/zeit/next.js/issues/387.
I had some trouble to get server side rendering with the AWSAppSyncClient working. I finally found a solution in https://github.com/awslabs/aws-mobile-appsync-sdk-js/issues/82 but it might be worth to share it here as well. Instead of adding a big code block to each file I'll just refer to this Pull Request.
______
In case you want to use the `AWSAppSyncClient` you just need to replace the `create()` function with this function:
```jsx
import AWSAppSyncClient from 'aws-appsync';
import { AUTH_TYPE } from 'aws-appsync/lib/link/auth-link';
function create(initialState) {
const client = new AWSAppSyncClient({
url: AWS_AppSync.graphqlEndpoint,
region: AWS_AppSync.region,
auth: {
type: AUTH_TYPE.API_KEY,
apiKey: AWS_AppSync.apiKey,
// Amazon Cognito Federated Identities using AWS Amplify
//credentials: () => Auth.currentCredentials(),
// Amazon Cognito user pools using AWS Amplify
// type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
// jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
},
disableOffline: true,
}, {
cache: new InMemoryCache().restore(initialState || {}),
ssrMode: true
});
return client;
}
```
