- Typescript.
- Automatic type generation from graphql queries.
- Support for Apollo on pages with
getStaticProps
without a need to know and load all queries. Addresses vercel/next.js#11957. - Prevent apollo queries running twice for
fetchPolicy: 'cache-and-network'
, once on SSR then on CSR. Apollo won't run network queries until a page is mounted. IMHO it's preferred solution tossrForceFetchDelay
. - When doing a client side navigation to pages that were generated statically Apollo doesn't fire a new query to load data, instead it uses data that was pre-generated by merging it into apollo cache.
- Addresses shortcomings of
revalidate
(vercel/next.js#11552 (comment)) by checking when the data was last fetched. If it was fetch longer than therevalidate
period, we trigger a query from client-side to load up-to-date data on queries withfetchPolicy: 'cache-and-network'
. - Supports API server setting cookies during SSR phase.
Bonus:
- Eslint config.
- Styled-components integration.
If you want to inject apollo client into your page and generate it on server wrap it in withApollo({ ssr: true })(YourPage)
, e.g.:
export default withApollo({ ssr: true })(YourPage)
If you want to inject apollo client into your page and skip server-side generation then wrap it in withApollo({ ssr: false })(YourPage)
, e.g.:
export default withApollo({ ssr: false })(YourPage)
If you want to pre-generate your page, then do the following:
export default withApollo({ ssr: false })(YourPage)
export const getStaticProps = getStaticApolloProps<Props, Params>(YourPage)
If you want to pre-generate your page, but keep updating it every N seconds, then do the following:
export default withApollo({ ssr: false })(YourPage)
// Update every 60 seconds
export const getStaticProps = getStaticApolloProps<Props, Params>(YourPage, { revalidate: 60 })