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