Apollo Client中是否存在RTK的transformResponse()对应功能？

Apollo Client没有直接对应RTK中transformResponse的同名API，但可以通过以下几种方式实现相同的“响应存入缓存前自定义转换”需求：

1. 自定义Apollo Link（推荐用于全局/特定请求的响应转换） #

Apollo Link是请求/响应处理的管道，你可以在响应到达缓存前拦截并修改数据，这是最贴近RTK transformResponse 功能的实现方式。

示例代码：

import { ApolloLink, HttpLink } from '@apollo/client';

// 创建自定义Link处理响应转换
const transformResponseLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(response => {
    // 根据你的需求修改响应数据
    // 示例：给User类型数据添加fullName字段
    if (response.data?.getUser) {
      response.data.getUser = {
        ...response.data.getUser,
        fullName: `${response.data.getUser.firstName} ${response.data.getUser.lastName}`
      };
    }
    // 返回修改后的响应，后续会存入缓存
    return response;
  });
});

// 构建Apollo Client时将自定义Link加入链路
const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  link: ApolloLink.from([transformResponseLink, new HttpLink({ uri: '/graphql' })])
});

2. 缓存Type Policies（针对特定类型字段的转换） #

如果你的转换需求是针对GraphQL类型的特定字段，可以在InMemoryCache的typePolicies中定义merge函数，在数据写入缓存时完成转换：

示例代码：

import { InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache({
  typePolicies: {
    User: {
      fields: {
        // 自动生成fullName字段并存入缓存
        fullName: {
          merge(existing, incoming, { readField }) {
            return `${readField('firstName', incoming)} ${readField('lastName', incoming)}`;
          }
        }
      }
    }
  }
});

3. 组件内useQuery数据转换（仅组件内生效，不修改缓存） #

如果不需要修改缓存中的数据，只是在组件使用时转换，可以直接在useQuery获取数据后处理：

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

const GET_USER = gql`
  query GetUser {
    getUser {
      firstName
      lastName
    }
  }
`;

function UserComponent() {
  const { data } = useQuery(GET_USER);
  // 组件内转换数据，不影响缓存
  const transformedUser = data?.getUser ? {
    ...data.getUser,
    fullName: `${data.getUser.firstName} ${data.getUser.lastName}`
  } : null;

  return <div>{transformedUser?.fullName}</div>;
}

内容的提问来源于stack exchange，提问作者I am X