@anglinb/graphql-codegen-apollo-next-ssr
v1.6.2
Published
GraphQL Code Generator plugin for generating a functions to read and write from the apollo cache
Downloads
14
Maintainers
Readme
graphql-codegen-apollo-next-ssr
Generate apollo code for nextjs ssr
Motivations
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.
Configuration
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 operationsreplacePage
(default: false): Replace "page" keyword inside the generated operationsreactImport
(default: import type React from 'react';): custom react import
Example config
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