graphql codegen apollo next ssr

Manutener necessário

Uma solução alternativa baseada em swr e gql-request pode ser encontrada aqui

GraphQL-CodeGen-Apollo-NEXT-SSR

Gerar código Apollo para NextJS SSR

Motivações

A NextJS introduziu recentemente getServerSideProps , que não permite usar o padrão Hoc adotado pelo plug -in oficial do Apollo GraphQL (com base no getInitialProps ). Ao mesmo tempo, o método SSR oferecido pelo Apollo Client ( getDataFromTree ) aplica o aplicativo React para renderizar várias vezes para coletar e buscar todas as consultas relevantes. Ao declarar uma consulta de nível superior, podemos economizar tempo de renderização e fornecer um padrão mais simples que funciona com getServerSideProps . Este plug -in gera uma versão do TypeAfe do getServerSideProps para cada consulta do servidor e o hoc correspondente para envolver o componente REACT retornando o resultado do cache. A limitação/vantagem desta solução é que todas as consultas incorporadas aos componentes de reação interna são ignoradas, a menos que cobertas pelo cache de nível superior.

Configuração

• excludePatterns (padrão: null): regexp para excluir nomes de operações
• excludePatternsOptions (padrão: ''): sinalizadores regexp para excluir nomes de operações
• reactApolloVersion (padrão: 2): versão do cliente Apollo
• apolloCacheImportFrom (Padrão: Apollo-Cache-InMemory): Apollo-Cache-Inmemory Dependência
• apolloImportFrom (padrão: apollo-client v2 ou @apollo/client v3): dependência do cliente apollo
• apolloCacheImportFrom (padrão: apollo-cache-inmemory v2 ou @apollo/client v3): dependência do cliente de cache apollo
• apolloStateKey (Padrão: Apolostate): Chave usada para armazenar o estado da Apollo
• withHooks (padrão: false): personalizou a saída ativando/desativando os ganchos de reação gerados.
• withHOC (padrão: true): personalizou a saída ativando/desativando o hoc.
• customImports (padrão: ''): Declaração de importação personalizada completa
• contextType (Padrão: 'qualquer'): o tipo Contex passou para o Getapolloclient
• contextTypeRequired (padrão: false): Se o contexto for necessário quando chamado do getServersideProps
• pre (padrão: ''): código personalizado antes de cada função
• post (padrão: ''): código personalizado após cada função
• apolloClientInstanceImport (padrão: ''): adicione importações de instância apolloclient
• replaceQuery (padrão: false): Substitua a palavra -chave "consulta" dentro das operações geradas
• replacePage (padrão: false): Substitua a palavra -chave "página" dentro das operações geradas
• reactImport (padrão: o tipo de importação reage de 'react';): importação de reação personalizada

Exemplo de configuração

 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