graphql codegen apollo next ssr

需要維護器

可以在此處找到基於swr和gql-request的替代解決方案

GraphQl-Codegen-Apollo-Next-SSR

生成NextJS SSR的Apollo代碼

動機

NextJS最近引入了getServerSideProps ，該prop不允許使用官方Apollo GraphQl插件（基於getInitialProps ）採用的事件模式。同時，Apollo客戶端（ getDataFromTree ）提供的SSR方法強制將React應用程序多次渲染，以收集和獲取所有相關的查詢。通過聲明頂級查詢，我們可以節省渲染時間，並提供更簡單的模式，可與getServerSideProps一起使用。該插件為每個服務器查詢生成typesafe版本的getServerSideProps ，以及包裝返回緩存結果的React組件的相應HOC。該解決方案的限制/優勢是，除非頂級緩存涵蓋，否則嵌入到內部反應組件中的所有查詢都被忽略。

配置

• excludePatterns （默認值：null）：REGEXP排除操作名稱
• excludePatternsOptions （默認值：''）：以排除操作名稱的RegexP標誌
• reactApolloVersion （默認值：2）：Apollo客戶端版本
• apolloCacheImportFrom （默認：apollo-cache-inmemory）：apollo-cache-inmemory依賴關係
• apolloImportFrom （默認：apollo-client v2或 @apollo/client v3）：apollo client依賴關係
• apolloCacheImportFrom （默認：apollo-cache-inmemory v2或 @apollo/client v3）：apollo緩存客戶端依賴關係
• apolloStateKey （默認：Apollostate）：用於存儲Apollo狀態的密鑰
• withHooks （默認值：false）：通過啟用/禁用生成的React掛鉤來自定義輸出。
• withHOC （默認值：true）：通過啟用/禁用HOC來自定義輸出。
• customImports （默認值：''）：完整的自定義導入聲明
• contextType （默認：'任何'）：傳遞給getapolloclient的contex類型
• contextTypeRequired （默認值：false）：如果從getServersideprops調用時應需要上下文
• pre （默認值：''）：每個功能之前的自定義代碼
• post （默認值：''）：每個功能之後的自定義代碼
• apolloClientInstanceImport （默認值：''）：添加apolloclient實例導入
• replaceQuery （默認值：false）：在生成的操作中替換“查詢”關鍵字
• replacePage （默認值：false）：在生成的操作中替換“頁面”關鍵字
• reactImport （默認：導入類型從“ React”;）：自定義React Import

示例配置

 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