An alternative solution based on swr
and gql-request
can be found here
Generate apollo code for nextjs ssr
Nextjs recently introduced getServerSideProps
which doesn't allow to use the HOC pattern adopted by the official apollo graphql plugin (based on getInitialProps
). At the same time the SSR method offered by apollo client (getDataFromTree
) enforces the react app to render multiple times in order to collect and fetch all the relevant queries.
By declaring a top level query we can save rendering time and provide a simpler pattern which works with getServerSideProps
. This plugin generates a typesafe version of getServerSideProps
for each server query, and the corresponding HOC to wrap the react component returning the cache result. The limitation/advantage of this solution is that all the queries embedded into inner react components are ignored, unless covered by the top level cache.
excludePatterns
(default: null): regexp to exclude operation namesexcludePatternsOptions
(default: ''): regexp flags to exclude operation namesreactApolloVersion
(default: 2): apollo client versionapolloCacheImportFrom
(default: apollo-cache-inmemory): apollo-cache-inmemory dependencyapolloImportFrom
(default: apollo-client v2 or @apollo/client v3): apollo client dependencyapolloCacheImportFrom
(default: apollo-cache-inmemory v2 or @apollo/client v3): apollo cache client dependencyapolloStateKey
(default: apolloState): Key used for storing Apollo statewithHooks
(default: false): Customized the output by enabling/disabling the generated React Hooks.withHOC
(default: true): Customized the output by enabling/disabling the HOC.customImports
(default: ''): full custom import declarationcontextType
(default: 'any'): Contex type passed to getApolloClientcontextTypeRequired
(default: false): If the context should be required when called from getServerSidePropspre
(default: ''): custom code before each functionpost
(default: ''): custom code after each functionapolloClientInstanceImport
(default: ''): Add apolloClient instance importsreplaceQuery
(default: false): Replace "query" keyword inside the generated operations replacePage
(default: false): Replace "page" keyword inside the generated operations reactImport
(default: import type React from 'react';): custom react import overwrite: true
schema:
- 'https://myschema/graphql'
documents:
- 'src/**/*.graphql'
generates:
src/@types/codegen/graphql.tsx:
plugins:
- 'typescript'
- 'typescript-operations'
- 'typescript-react-apollo'
src/@types/codegen/page.tsx:
config:
documentMode: external
importDocumentNodeExternallyFrom: ./graphql
preset: import-types
presetConfig:
typesPath: ./graphql
plugins:
- ./build/src/index.js
hooks:
afterAllFileWrite:
- prettier --write