推荐使用 `graphql-typed-document-node`：让GraphQL操作更类型安全-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00023/article/details/139165370

推荐使用 `graphql-typed-document-node`：让GraphQL操作更类型安全

graphql-typed-document-nodeAn improved version of `DocumentNode` for seamless TypeScript integration for GraphQL. 项目地址:https://gitcode.com/gh_mirrors/gr/graphql-typed-document-node

在如今的开发环境中，类型安全是提升代码质量的关键因素之一。为此，我们向您推荐一个强大的工具——graphql-typed-document-node。它是一个开发工具，可以帮助您创建全类型化的DocumentNode对象，确保您的GraphQL查询、变异和订阅等操作更加直观且避免类型错误。

1、项目介绍

graphql-typed-document-node允许您通过简单的配置，将GraphQL查询转换为带有完全类型信息的结果对象和变量对象。借助TypeScript的类型推断功能，您可以享受到自动完成、类型检查以及类型安全带来的诸多好处。该项目支持大部分主流的GraphQL客户端库，并提供了一套自动化的工作流程，使您可以轻松地从源代码中提取类型信息。

2、项目技术分析

这个项目的核心在于，当您编写完GraphQL操作（如查询、变异或片段）后，GraphQL Code Generator会自动生成对应的TypedDocumentNode。TypedDocumentNode包含了预编译的DocumentNode，以及操作结果类型和变量类型。这意味着，在执行这些操作时，您的代码将具有强类型的支持，从而提高代码质量并减少错误。

3、项目及技术应用场景

无论您是在React、Angular还是Vue项目中使用Apollo或其他GraphQL客户端，graphql-typed-document-node都能为您提供帮助。它可以无缝集成到现有的工作流中，帮助您在进行数据获取、状态管理或任何涉及GraphQL操作的任务时，保持代码的类型安全。

例如，在React应用中，配合@apollo/client和GraphQL Code Generator，可以实现类型安全的组件化查询：

import { gql, useQuery } from '@apollo/client';
import { ResultOf, VariablesOf } from '@graphql-typed-document-node/core';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
    }
  }
`;

type GetUsersResult = ResultOf<typeof GET_USERS>;
type GetUsersVariables = VariablesOf<typeof GET_USERS>;

function UsersList() {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}