graphql codegen apollo next ssr

Maintaner nécessaire

Une autre solution basée sur swr et gql-request peut être trouvée ici

GraphQL-Codegen-Apollo-Next-SSR

Générer le code Apollo pour NextJS SSR

Motivations

NextJS a récemment introduit getServerSideProps qui ne permet pas d'utiliser le modèle HOC adopté par le plugin officiel Apollo GraphQL (basé sur getInitialProps ). Dans le même temps, la méthode SSR offerte par Apollo Client ( getDataFromTree ) applique l'application React à rendre plusieurs fois afin de collecter et de récupérer toutes les requêtes pertinentes. En déclarant une requête de haut niveau, nous pouvons gagner du temps de rendu et fournir un modèle plus simple qui fonctionne avec getServerSideProps . Ce plugin génère une version TypeSafe de getServerSideProps pour chaque requête de serveur, et le HOC correspondant pour envelopper le composant React renvoyant le résultat du cache. La limitation / avantage de cette solution est que toutes les requêtes intégrées dans des composants de réaction intérieure sont ignorées, sauf si couvertes par le cache de niveau supérieur.

Configuration

• excludePatterns (par défaut: null): Regexp pour exclure les noms d'opération
• excludePatternsOptions (par défaut: ''): Indicateurs regexp pour exclure les noms d'opération
• reactApolloVersion (par défaut: 2): version du client Apollo
• apolloCacheImportFrom (par défaut: apollo-cache-inmemory): dépendance apollo-cache-inmemory
• apolloImportFrom (par défaut: Apollo-Client V2 ou @ apollo / client v3): dépendance du client Apollo
• apolloCacheImportFrom (par défaut: apollo-cache-inmemory v2 ou @ apollo / client v3): dépendance du client Apollo Cache
• apolloStateKey (par défaut: apollostate): clé utilisée pour stocker l'état Apollo
• withHooks (par défaut: false): personnalisé la sortie en activant / désactivant les crochets de react générés.
• withHOC (par défaut: true): personnalisé la sortie en activant / désactivant le hoc.
• customImports (par défaut: ''): Déclaration complète d'importation personnalisée
• contextType (par défaut: «any»): le type de contex est passé pour getAPolloclient
• contextTypeRequired (par défaut: false): si le contexte doit être requis lorsqu'il est appelé à partir de getServersIDEPROPS
• pre (par défaut: ''): code personnalisé avant chaque fonction
• post (par défaut: ''): code personnalisé après chaque fonction
• apolloClientInstanceImport (par défaut: ''): Ajouter des importations d'instance Apolloclient
• replaceQuery (par défaut: false): Remplacez le mot-clé "requête" dans les opérations générées
• replacePage (par défaut: false): remplacer le mot-clé "page" dans les opérations générées
• reactImport (par défaut: le type d'importation react à partir de «réagir»;): Importation de réaction personnalisée

Exemple de configuration

 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