在客户端和服务器之间共享 GraphQL 模式

Question

useQuery我正在使用诸如来自React 应用程序中的钩子@apollo/client来查询我的 AppSync 后端。我已在单独的存储库中的无服务器 AppSync 项目中定义了架构。为了在我的 IDE 中获得 React 项目中 graphql 架构的智能感知，我需要将我的架构复制到我的 React 应用程序中，并在后端构建架构时尝试使其保持最新。人们正在使用/做什么来解决客户端和服务器项目之间相同模式的重复？目前，我schema.graphql在反应项目和无服务器项目中都有一个文件，但是感觉就像是我错过了一些东西，或者做错了什么？任何帮助表示赞赏

Answer 1

我强烈建议使用使用原始架构作为源的代码生成工具。

GraphQL 代码生成器是一个包，您可以轻松地将其合并到 React 应用程序或类似应用程序中。一旦你将它添加到你的项目中，你就可以运行yarn graphql-codegen init（假设你使用 Yarn；有 npm 等选项），它会询问一系列问题来生成 YAML 配置文件。yarn generate然后，您可以添加类似引用该文件的命令。

这是我为项目创建的配置示例：

overwrite: true
schema: "http://localhost:8080/query"
documents: "./src/**/*.graphql"
generates:
  src/generated/graphql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-query"
  ./graphql.schema.json:
    plugins:
      - "introspection"

当您运行该yarn generate命令时，它会从正在运行的后端服务中获取架构（您需要确保您的服务启用了 GraphQL 自省），将其与客户端查询相结合，然后生成与之交互所需的所有内容您的服务。就我而言，我使用react-query，它会创建一个围绕 的每个操作包装器useQuery，例如useWidgetsQuery。效果很好。

我与该项目没有任何关系，我只是一个粉丝。

如果您还在后端使用代码生成（通过另一个项目，具体取决于您的后端语言），这意味着您可以编写一次架构等，然后生成大量易于保留的类型和接线跨项目同步。