如何用Apollo Client定义客户端专属查询getMyUser封装getUser？

核心思路 #

利用Apollo Client的**本地解析器（Local Resolvers）**功能，在客户端层封装已有的服务器查询/突变，无需修改服务器端点。通过本地解析器处理客户端特有的逻辑（比如获取当前用户ID），再调用底层的服务器请求，最后返回结果。

实现步骤（以getMyUser为例） #

1. 扩展客户端GraphQL Schema #

首先在客户端定义专属的查询字段，使用extend type Query和@client指令标记这是客户端仅有的字段：

extend type Query {
  getMyUser: User @client
}

2. 编写本地解析器 #

在初始化Apollo Client时，配置resolvers属性，实现getMyUser的解析逻辑：

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

// 封装从indexedDB获取当前用户ID的逻辑
const getCurrentUserId = async () => {
  // 替换成你的indexedDB查询逻辑
  const db = await openYourIndexedDB();
  const currentUser = await db.get('userStore', 'current');
  return currentUser?.id;
};

const client = new ApolloClient({
  uri: '/your-graphql-endpoint',
  cache: new InMemoryCache(),
  resolvers: {
    Query: {
      getMyUser: async (_, __, { client }) => {
        // 步骤1：获取当前登录用户ID
        const userId = await getCurrentUserId();
        if (!userId) {
          throw new Error('未检测到登录用户');
        }

        // 步骤2：调用已有的getUser服务器查询
        const { data } = await client.query({
          query: gql`
            query GetUser($id: ID!) {
              getUser(id: $id) {
                id
                name
                email
                # 按需添加需要返回的字段
              }
            }
          `,
          variables: { id: userId },
        });

        // 步骤3：返回查询结果
        return data.getUser;
      },
    },
  },
});

3. 在组件中使用客户端查询 #

直接调用带@client指令的getMyUser查询即可：

import { useQuery, gql } from '@apollo/client';

const GET_MY_USER = gql`
  query GetMyUser {
    getMyUser @client
  }
`;

function UserProfile() {
  const { loading, error, data } = useQuery(GET_MY_USER);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>错误：{error.message}</div>;

  return (
    <div>
      <h2>{data.getMyUser.name}</h2>
      <p>邮箱：{data.getMyUser.email}</p>
    </div>
  );
}

扩展到整套查询与突变 #

对于需要封装的突变（比如updateMyUser），逻辑完全一致：

1. 扩展客户端Mutation Schema #

extend type Mutation {
  updateMyUser(input: UserInput!): User @client
}

2. 添加突变解析器 #

在resolvers的Mutation对象中添加逻辑：

resolvers: {
  // ... 已有的Query解析器
  Mutation: {
    updateMyUser: async (_, { input }, { client }) => {
      const userId = await getCurrentUserId();
      if (!userId) {
        throw new Error('未检测到登录用户');
      }

      const { data } = await client.mutate({
        mutation: gql`
          mutation UpdateUser($id: ID!, $input: UserInput!) {
            updateUser(id: $id, input: $input) {
              id
              name
              email
            }
          }
        `,
        variables: { id: userId, input },
      });

      return data.updateUser;
    },
  },
}

3. 在组件中使用客户端突变 #

import { useMutation, gql } from '@apollo/client';

const UPDATE_MY_USER = gql`
  mutation UpdateMyUser($input: UserInput!) {
    updateMyUser(input: $input) @client
  }
`;

function EditProfileForm() {
  const [updateMyUser] = useMutation(UPDATE_MY_USER);

  const handleSubmit = async (formData) => {
    try {
      const { data } = await updateMyUser({
        variables: { input: formData },
      });
      alert(`用户信息更新成功：${data.updateMyUser.name}`);
    } catch (err) {
      console.error('更新失败:', err);
    }
  };

  // 表单渲染逻辑...
}

关键注意事项 #

• 缓存一致性：底层调用的是服务器原生查询/突变，Apollo Client会自动处理缓存更新，客户端封装的查询会同步获取最新缓存数据。
• 错误统一处理：可以在解析器中统一处理未登录、权限不足等客户端逻辑错误，避免在每个组件中重复判断。
• 逻辑复用：将获取当前用户ID等公共逻辑抽成工具函数，所有客户端查询/突变都可以复用。
• 类型安全：如果使用TypeScript，可以通过@graphql-codegen为客户端schema生成类型定义，保证类型匹配。

内容的提问来源于stack exchange，提问作者gxc