如何减少Apollo/GraphQL查询响应中的重复数据？

你提到的需求——让评论查询仅返回话题的__typename和ID，同时在缓存已有话题数据时，能直接通过comment.topic访问完整字段——完全可以通过Apollo Client的缓存归一化和**字段政策（Field Policies）**实现，无需手动维护查找表或额外发起查询。

核心原理：Apollo的自动缓存归一化 #

Apollo Client默认会根据对象的__typename和主键（默认是id）对数据进行归一化存储。也就是说，只要你的评论查询中返回了comment.topic的__typename和id，Apollo会自动将这个话题引用关联到缓存中已有的完整话题对象上。此时，即使查询没请求话题的其他字段，当你在代码中访问comment.topic.title这类字段时，Apollo会直接从缓存中读取，不会触发网络请求。

示例查询 #

只请求话题的标识字段，大幅减少网络传输数据：

query GetCommentsByTopic($topicId: ID!) {
  comments(topicId: $topicId) {
    id
    content
    author
    topic {
      __typename
      id
    }
  }
}

在组件中使用时，只要缓存里已有该话题的完整数据，直接访问关联字段即可：

function CommentList({ topicId }) {
  const { data } = useQuery(GetCommentsByTopic, { variables: { topicId } });
  
  return (
    <div>
      {data?.comments.map(comment => (
        <div key={comment.id}>
          <p>{comment.content}</p>
          {/* 直接访问缓存中的话题字段，无额外网络请求 */}
          <small>话题：{comment.topic.title}</small>
        </div>
      ))}
    </div>
  );
}

进阶：用字段政策强化逻辑 #

如果你的主键不是默认的id，或者需要自定义关联字段的解析逻辑，可以通过配置**类型政策（Type Policies）**来实现。比如指定Topic类型的主键为uuid，并给Comment的topic字段自定义读取规则：

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

const cache = new InMemoryCache({
  typePolicies: {
    // 自定义Topic的主键字段
    Topic: {
      keyFields: ['uuid'],
    },
    Comment: {
      fields: {
        // 自定义topic字段的读取逻辑
        topic: {
          read(existing, { args, cache }) {
            // 如果已有缓存引用，直接返回完整的缓存对象
            if (existing) {
              return cache.readFragment({
                id: cache.identify(existing),
                fragment: gql`
                  fragment FullTopic on Topic {
                    uuid
                    title
                    content
                    createdAt
                  }
                `,
              });
            }
            return existing;
          },
        },
      },
    },
  },
});

const client = new ApolloClient({
  uri: '/graphql',
  cache,
});

类型安全补充：useFragment #

如果用TypeScript开发，推荐使用useFragment来访问缓存中的完整字段，既能保证类型安全，又能明确依赖的缓存数据：

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

const FULL_TOPIC_FRAGMENT = gql`
  fragment FullTopic on Topic {
    id
    title
    content
    createdAt
  }
`;

function CommentItem({ comment }) {
  // 从缓存中读取完整的Topic数据
  const topic = useFragment(FULL_TOPIC_FRAGMENT, comment.topic);
  
  return (
    <div>
      <p>{comment.content}</p>
      <p>话题：{topic.title}（发布于{topic.createdAt}）</p>
    </div>
  );
}

方案优势对比 #

• 对比“仅查ID+按需单独查询”：无需额外发起缓存优先查询，直接通过关联字段访问缓存数据，代码更简洁
• 对比“单独加载话题+手动关联”：无需维护查找表，Apollo自动处理关联逻辑，减少代码冗余

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