Apollo GraphQL v2如何将查询中可能缺失的字段设为null正常接收响应

问题背景 #

使用Apollo Client v2发起GraphQL查询时，查询语句中声明的cartNumber字段可能不会被服务端返回，因版本限制无法使用v3的typePolicies特性做字段兜底，需要实现缺失字段自动赋值为null，保证响应正常解析。
示例查询语句：

query FetchStore {
  storeId
  cartNumber
}

可行解决方案 #

方案1：通过Apollo Link响应中间件全局兜底 #

Apollo v2原生支持自定义链路插件，可以在响应进入缓存解析前统一处理缺失字段，一次配置全局生效，代码示例：

import { ApolloLink } from 'apollo-link';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

// 自定义字段补全链路
const fillMissingFieldLink = new ApolloLink((operation, forward) => {
  return forward(operation).map(resp => {
    const responseData = resp?.data;
    // 针对目标查询的根级返回结构补全缺失字段
    if (responseData && !('cartNumber' in responseData)) {
      responseData.cartNumber = null;
    }
    // 有其他同类缺失字段可以按相同逻辑在这里补充
    return resp;
  });
});

// 初始化Client时拼接自定义链路
const client = new ApolloClient({
  link: ApolloLink.from([
    fillMissingFieldLink, // 注意要放在HttpLink前面
    new HttpLink({ uri: '你的GraphQL服务地址' })
  ]),
  cache: new InMemoryCache()
});

注：如果你的schema中storeId、cartNumber是某个对象（比如store）下的嵌套字段，直接调整上述代码中的字段判断层级即可

方案2：查询结果本地兜底 #

如果不想修改全局Apollo配置，可以在每次拿到查询返回结果后，手动做字段兜底，适合只有少量查询存在字段缺失问题的场景：

// 以直接调用client.query为例，React/Vue的hooks返回结果处理逻辑一致
const { data } = await client.query({ query: FetchStore });
const safeRespData = {
  storeId: data?.storeId,
  // 字段存在就用返回值，不存在赋值null
  cartNumber: data && Object.prototype.hasOwnProperty.call(data, 'cartNumber') ? data.cartNumber : null
};

注意事项 #

按照GraphQL官方规范，服务端必须返回查询中声明的所有可访问字段，出现字段缺失通常是服务端实现不符合规范、字段级权限拦截未按规范返回错误、或者接口异常吞错导致，优先和后端确认字段不返回的根因做修复，比前端兜底逻辑更可靠。

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