apollo 客户端：带有 @client 查询字段的 codegen 打字稿

1个回答

余鱼克西南

2025-06-16 22:15

客户端

使用Apollo客户端可以轻松地与GraphQL服务器进行通信，并获得所需的数据。当客户端需要在本地进行查询时，可以使用@client指令来指示Apollo客户端处理请求，而不是将其发送到服务器。这个功能对于在客户端进行数据操作或处理本地状态非常有用。在本文中，我们将探讨如何使用Apollo客户端的@client查询字段和codegen打字稿来实现这一功能。

什么是@client查询字段？

@client查询字段是一种特殊的GraphQL查询字段，它告诉Apollo客户端在本地处理查询，而不是将其发送到服务器。使用@client指令，我们可以在GraphQL查询中定义一些字段，这些字段不在服务器上可用，而是在客户端上进行处理。这样，我们就可以利用Apollo客户端的功能来处理这些查询字段，包括与本地状态进行交互和更新。

如何生成代码？

为了使用@client查询字段，我们需要生成代码。Apollo提供了一个名为codegen的工具，它可以根据GraphQL模式和查询文件自动生成类型安全的代码。我们可以通过在终端中运行命令npx apollo codegen:generate --localSchemaFile=schema.JSon --target=typescript --includes=src//*.tsx --tagName=gql来生成代码。这将根据GraphQL模式文件（schema.JSon）和查询文件（以.tsx为后缀的文件）生成typescript代码，并使用gql作为标签。
案例代码
假设我们有一个简单的任务管理应用程序，我们想在客户端上处理查询任务列表的功能。我们已经设置了一个名为TaskList的查询，在服务器上可用。现在，我们想在客户端上使用@client查询字段来处理TaskList查询。
首先，我们需要在我们的查询文件中定义TaskList查询的字段，并使用@client指令标记它们。例如，我们可以创建一个名为taskList.ts的文件，并在其中定义TaskList查询的字段，如下所示：
typescript
import { gql } from '@apollo/client';
export const GET_TASK_LIST = gql<code>
query TaskList {
tasks @client {
id
title
completed
}
}
</code>;
在上面的代码中，我们使用@client指令标记了tasks字段，告诉Apollo客户端在本地处理这个字段。
接下来，我们可以运行codegen命令来生成类型安全的代码。假设我们的GraphQL模式文件是schema.JSon，我们可以运行以下命令：
bash
npx apollo codegen:generate --localSchemaFile=schema.JSon --target=typescript --includes=src/</strong>/*.tsx --tagName=gql
这将生成一个名为src/generated/graphql.tsx的文件，其中包含了我们的查询类型和相关的代码。
现在，我们可以在我们的应用程序中使用生成的代码来处理TaskList查询。例如，我们可以创建一个名为TaskList组件，并使用Apollo客户端来查询和处理任务列表。
typescript
import React from 'react';
import { useQuery } from '@apollo/client';
import { GET_TASK_LIST } from './taskList';
import { Task } from './generated/graphql';
const TaskList: React.FC = () => {
const { data } = useQuery<{ tasks: Task[] }>(GET_TASK_LIST);
if (!data) {
return <div>Loading...</div>;
}
return (
<ul>
{data.tasks.map((task) => (
<li key={task.id}>{task.title}</li>
))}
</ul>
);
};
export default TaskList;
在上面的代码中，我们使用useQuery钩子来执行TaskList查询，并通过data属性获取返回的任务列表。然后，我们可以将任务列表渲染为一个无序列表。
使用Apollo客户端的@client查询字段和codegen打字稿，我们可以轻松地在客户端上处理本地查询。通过定义查询字段并使用@client指令标记它们，我们可以利用Apollo客户端的功能来处理这些查询字段，并与本地状态进行交互和更新。通过生成类型安全的代码，我们可以确保我们的代码与GraphQL模式保持一致，并避免潜在的错误。
参考资料
- Apollo Client文档：https://www.apollographql.com/docs/react/
- Apollo codegen文档：https://www.apollographql.com/docs/devtools/cli/

举报有用（4）分享收藏

apollo 客户端：带有 @client 查询字段的 codegen 打字稿

1个回答

余鱼克西南

热门话题

相关问题