如何使用JS GraphQL客户端避免冗余字段声明并减少跨页请求？

可以实现你的需求——让StepsList组件的查询只写所需的id字段，同时实际获取到name存入缓存，供StepDetail直接读取而不发起二次请求。下面是几种JavaScript GraphQL客户端的具体做法：

1. 通过客户端链路拦截并修改查询（推荐，以Apollo Client为例） #

利用Apollo Client的Link机制，在查询发送到服务器前自动为指定查询添加所需字段。组件代码保持干净，只声明自身需要的字段，实际请求会悄悄带上StepDetail需要的字段。

实现代码： #

import { ApolloLink, ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
import { visit } from 'graphql';

// 自定义链路：拦截查询并添加指定字段
const addRequiredFieldsLink = new ApolloLink((operation, forward) => {
  // 匹配StepsList的查询（根据实际operationName调整）
  if (operation.operationName === 'StepsListQuery') {
    // 遍历查询AST，给steps字段添加name
    const updatedQuery = visit(operation.query, {
      Field(node) {
        if (node.name.value === 'steps' && node.parentType?.name.value === 'Query') {
          return {
            ...node,
            selectionSet: {
              ...node.selectionSet,
              selections: [
                ...node.selectionSet.selections,
                { kind: 'Field', name: { kind: 'Name', value: 'name' } }
              ]
            }
          };
        }
        return node;
      }
    });
    operation.setQuery(updatedQuery);
  }
  return forward(operation);
});

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

组件中的查询保持原样： #

# StepsList组件的查询
query StepsListQuery {
  steps {
    id
  }
}

# StepDetail组件的查询
query StepDetailQuery($stepId: ID!) {
  step(id: $stepId) {
    id
    name
  }
}

当StepsList请求时，实际发送到服务器的查询会包含name字段，返回的数据存入缓存。StepDetail查询时，Apollo Client会直接从缓存读取name，不会发起二次请求。

2. 手动补全缓存（简单场景适用） #

如果不想修改查询链路，可以在StepsList请求完成后，手动发起一次补充查询获取name字段，然后更新缓存。这种方式会多一次请求，但组件代码依然保持简洁：

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

const StepsListQuery = gql`
  query StepsListQuery {
    steps {
      id
    }
  }
`;

const StepsNamesQuery = gql`
  query StepsNamesQuery {
    steps {
      id
      name
    }
  }
`;

function StepsList() {
  const { data, client, cache } = useQuery(StepsListQuery);

  useEffect(() => {
    if (data?.steps) {
      // 请求name字段并更新缓存
      client.query({ query: StepsNamesQuery }).then(({ data: namesData }) => {
        namesData.steps.forEach(step => {
          cache.writeFragment({
            id: cache.identify(step),
            fragment: gql`
              fragment StepName on Step {
                name
              }
            `,
            data: { name: step.name }
          });
        });
      });
    }
  }, [data, client, cache]);

  // 渲染StepsList...
}

注意事项 #

• 第一种链路拦截的方式需要维护字段映射逻辑，如果StepDetail需要的字段变更，要同步更新拦截规则。
• 两种方式都依赖客户端缓存的正常工作，确保缓存的id字段能正确关联Step对象。

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