graphql codegen apollo next ssr

Mintaner necesitaba

Se puede encontrar una solución alternativa basada en swr y gql-request aquí

GraphQl-Codegen-APollo-Next-SSR

Genere el código Apollo para NextJS SSR

Motivaciones

El NextJS presentó recientemente getServerSideProps , que no permite usar el patrón HOC adoptado por el complemento oficial de Apollo GraphQL (basado en getInitialProps ). Al mismo tiempo, el método SSR ofrecido por Apollo Client ( getDataFromTree ) hace cumplir la aplicación React para representar varias veces para recopilar y obtener todas las consultas relevantes. Al declarar una consulta de nivel superior, podemos ahorrar tiempo de representación y proporcionar un patrón más simple que funcione con getServerSideProps . Este complemento genera una versión TypeFe de getServerSideProps para cada consulta del servidor, y el HOC correspondiente para envolver el componente React que devuelve el resultado del caché. La limitación/ventaja de esta solución es que se ignoran todas las consultas incrustadas en los componentes reactos internos, a menos que sea cubierta por el caché de nivel superior.

Configuración

• excludePatterns (predeterminado: nulo): regexp para excluir los nombres de las operaciones
• excludePatternsOptions (predeterminado: ''): los indicadores de regexp para excluir los nombres de las operaciones
• reactApolloVersion (predeterminado: 2): Versión del cliente Apollo
• apolloCacheImportFrom (predeterminado: Apollo-Cache-InMemory): Apollo-Cache-InMemory Dependency
• apolloImportFrom (predeterminado: Apollo-Client V2 o @Apollo/Client V3): Dependencia del cliente Apollo
• apolloCacheImportFrom (predeterminado: Apollo-Cache-InMemory V2 o @Apollo/Client V3): Dependencia del cliente Apollo Cache
• apolloStateKey (predeterminado: Apolostate): clave utilizada para almacenar Apollo State
• withHooks (predeterminado: falso): personalizado la salida al habilitar/deshabilitar los ganchos react generados.
• withHOC (predeterminado: verdadero): personalizado la salida habilitando/deshabilitando el hoc.
• customImports (predeterminado: ''): Declaración de importación personalizada completa
• contextType (predeterminado: 'any'): tipo de contex pasado a getapolloClient
• contextTypeRequired (predeterminado: falso): si el contexto debe ser requerido cuando se les llame desde getServersideProps
• pre (predeterminado: ''): código personalizado antes de cada función
• post (predeterminado: ''): código personalizado después de cada función
• apolloClientInstanceImport (predeterminado: ''): agregar las importaciones de instancia de apolloClient
• replaceQuery (predeterminado: falso): reemplazar la palabra clave "consulta" dentro de las operaciones generadas
• replacePage (predeterminado: falso): reemplazar la palabra clave "página" dentro de las operaciones generadas
• reactImport (predeterminado: Tipo de importación React de 'React';): Custom React Import

Ejemplo de configuración

 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