graphql codegen apollo next ssr

Wartaner benötigt

Eine alternative Lösung basierend auf swr und gql-request finden Sie hier

GraphQL-Codegen-Apollo-Next-SSR

Generieren Sie den Apollo -Code für NextJs SSR

Motivationen

NextJS hat kürzlich getServerSideProps eingeführt, mit denen das vom offizielle Apollo GraphQL -Plugin angewendete Hoc -Muster (basierend auf getInitialProps ) nicht verwendet wird. Gleichzeitig erzwingt die SSR -Methode, die der Apollo -Client ( getDataFromTree ) bietet, die React -App mehrmals, um alle relevanten Abfragen zu sammeln und abzurufen. Durch die Deklonation einer Top -Level -Abfrage können wir die Rendering -Zeit speichern und ein einfacheres Muster liefern, das mit getServerSideProps funktioniert. Dieses Plugin generiert eine TypeSafe -Version von getServerSideProps für jede Serverabfrage und die entsprechende HOC, um die React -Komponente zu wickeln, die das Cache -Ergebnis zurückgibt. Die Einschränkung/den Vorteil dieser Lösung besteht darin, dass alle in inneren React -Komponenten eingebetteten Abfragen ignoriert werden, sofern nicht durch den obersten Cache abgedeckt.

Konfiguration

• excludePatterns (Standard: NULL): REGEXP, um die Bedienungsnamen auszuschließen
• excludePatternsOptions (Standard: ''): REGEXP -Flags, um die Operationsnamen auszuschließen
• reactApolloVersion (Standardeinstellung: 2): Apollo Client -Version
• apolloCacheImportFrom (Standard: Apollo-Cache-inmemory): Apollo-Cache-inmemory-Abhängigkeit
• apolloImportFrom (Standard: Apollo-Client V2 oder @apollo/client v3): Apollo Client-Abhängigkeit
• apolloCacheImportFrom (Standard: Apollo-Cache-inmemory v2 oder @apollo/client v3): Apollo-Cache-Client-Abhängigkeit
• apolloStateKey (Standard: Apolostate): Schlüssel zum Speichern von Apollo -Status verwendet
• withHooks (Standard: Falsch): Anpassen die Ausgabe durch Aktivieren/Deaktivieren der generierten React -Hooks.
• withHOC (Standard: TRUE): Anpassung der Ausgabe durch Aktivieren/Deaktivieren des hoc.
• customImports (Standard: ''): Vollständige benutzerdefinierte Importdeklaration
• contextType (Standard: 'Any'): CONTX -Typ, um GetAPolloclient zu erhalten
• contextTypeRequired (Standard: Falsch): Wenn der Kontext erforderlich sein sollte, wenn er von GetServersideProps aufgerufen wird
• pre (Standard: ''): benutzerdefinierter Code vor jeder Funktion
• post (Standard: ''): benutzerdefinierter Code nach jeder Funktion
• apolloClientInstanceImport (Standard: ''): Hinzufügen von Apolloclient -Instanzimporten hinzufügen
• replaceQuery (Standard: Falsch): Ersetzen Sie das Schlüsselwort "Abfrage" in den generierten Operationen
• replacePage (Standard: Falsch): Ersetzen Sie das Schlüsselwort "Seite" in den generierten Operationen
• reactImport (Standard: Importtyp reagieren aus 'React';): Custom React Import

Beispielkonfiguration

 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