graphql codegen apollo next ssr

メンテナーが必要です

swrとgql-requestに基づく代替ソリューションはこちらにあります

graphql-codegen-apollo-next-ssr

NextJS SSRのApolloコードを生成します

動機

NextJSは最近、公式のApollo GraphQLプラグイン（ getInitialPropsに基づく）で採用されたHOCパターンを使用することを許可しないgetServerSidePropsを導入しました。同時に、Apolloクライアント（ getDataFromTree ）が提供するSSRメソッドは、Reactアプリを実施して複数回レンダリングして、関連するすべてのクエリを収集およびフェッチします。トップレベルのクエリを宣言することにより、レンダリング時間を節約し、 getServerSidePropsで動作するよりシンプルなパターンを提供できます。このプラグインは、各サーバークエリのgetServerSidePropsの型バージョンと、対応するHOCを生成し、キャッシュ結果を返すReactコンポーネントをラップします。このソリューションの制限/利点は、内側の反応成分に埋め込まれたすべてのクエリが、上位レベルのキャッシュでカバーされない限り無視されることです。

構成

• excludePatterns （デフォルト：null）：操作名を除外するregexp
• excludePatternsOptions （デフォルト： ''）：操作名を除外するregexpフラグ
• reactApolloVersion （デフォルト：2）：Apolloクライアントバージョン
• apolloCacheImportFrom （デフォルト：Apollo-Cache-Inmemory）：Apollo-Cache-Inmemory依存関係
• apolloImportFrom （デフォルト：apollo-client v2または @apollo/client v3）：apolloクライアント依存関係
• apolloCacheImportFrom （デフォルト：apollo-cache-inmemory v2または @apollo/client v3）：apolloキャッシュクライアント依存関係
• apolloStateKey （デフォルト：Apollostate）：Apollo Stateの保存に使用されるキー
• withHooks （デフォルト：false）：生成された反応フックを有効/無効にすることにより、出力をカスタマイズしました。
• withHOC （デフォルト：TRUE）：HOCを有効/無効にすることにより、出力をカスタマイズしました。
• customImports （デフォルト： ''）：完全なカスタムインポート宣言
• contextType （デフォルト： 'any'）：getApolloclientに渡されたcontexタイプ
• contextTypeRequired （デフォルト：FALSE）：GetServerSidePropsから呼び出されたときにコンテキストが必要な場合
• pre （デフォルト： ''）：各関数の前のカスタムコード
• post （デフォルト： ''）：各関数後のカスタムコード
• apolloClientInstanceImport （デフォルト： ''）：Apolloclientインスタンスのインポートを追加します
• replaceQuery （デフォルト：false）：生成された操作内の「クエリ」キーワードを交換します
• replacePage （デフォルト：false）：生成された操作内の「ページ」キーワードを置き換える
• reactImport （デフォルト：インポートタイプ「React」からのReact;）：カスタムReactインポート

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