GraphQL Apollo Client查询传参无法到达vat图节点如何解决

问题排查与解决方案 #

按优先级依次排查以下场景：

• 请求参数漏传/值为undefined
  Apollo Client会默认过滤掉variables中值为undefined的字段，不会传递到后端。请确认你调用查询接口时，传入的variables对象明确包含countryCode字段，且值合法：

// 示例：useQuery调用写法
const { loading, data } = useQuery(QUERY_PRODUCT, {
  variables: {
    productId: "你的产品ID",
    productHasStock: true,
    countryCode: "CN" // 此处必须显式赋值，不能省略，也不能设为undefined
  }
})

• 缓存字段策略未配置参数关联
  这是该类问题最常见的诱因：Apollo Client的InMemoryCache默认不会自动把字段参数纳入缓存键的计算规则，如果没有显式配置，当你第一次查询过vat节点数据后，后续即使传了不同的countryCode，也会直接返回缓存的旧数据，看起来就像参数没有传递生效。
  需要在Apollo Client初始化时配置对应类型的字段策略：

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

const client = new ApolloClient({
  uri: '你的GraphQL接口地址',
  cache: new InMemoryCache({
    typePolicies: {
      // 此处的Product需要替换为你Schema中products数组返回的实体类型名，可参考后端Schema定义
      Product: {
        fields: {
          vat: {
            // 声明countryCode为vat字段的缓存区分参数
            keyArgs: ['countryCode']
          }
        }
      }
    }
  })
})

如果不确定对应实体类型名，可临时将keyArgs设为false测试，该配置会让Apollo将字段的所有传入参数都纳入缓存键计算：

vat: {
  keyArgs: false
}

• 变量类型不匹配
  请确认查询语句中声明的$countryCode: String类型，和后端Schema中vat节点的countryCode参数类型完全一致。如果后端定义的是必填类型String!，而你声明的是可选类型String，当参数为空时会被自动过滤。你可以将查询变量声明改为和后端一致的必填类型，开发阶段如果漏传参数会直接抛出明确报错，方便排查。
• 请求报文校验
  打开浏览器开发者工具的「网络」面板，找到对应GraphQL请求，查看请求Payload：

1. 确认variables字段中包含countryCode和对应值
2. 确认query字段中确实存在vat(countryCode: $countryCode)的参数传递声明，没有被编译工具/插件误修改

内容的提问来源于stack exchange，提问作者Ferran Puig Martínez