React Native中Apollo Client的GraphQL refetchQueries无法正常工作

问题核心 #

Apollo Client无法识别你在refetchQueries的include数组中指定的查询，本质是查询的标识（名称或AST结构）与缓存中存储的查询不匹配。

解决步骤 #

• 给查询添加显式名称：
  未命名的查询会让Apollo只能通过AST结构匹配，极易因为细微差异（比如字段顺序、空格）导致识别失败。修改你的查询定义，添加明确的查询名：

  // 原无名称查询
  gql`
    query($where: AppointmentWhereInput!) {
      appointments(where: $where) { ... }
    }
  `
  
  // 修改为带名称的查询
  gql`
    query GetAppointments($where: AppointmentWhereInput!) {
      appointments(where: $where) { ... }
    }
  `
  

• 复用已定义的查询变量：
  不要在refetchQueries中重新编写查询，直接导入项目中已定义好的查询常量，确保结构完全一致：

  // 提前定义并导出查询
  import { gql } from '@apollo/client';
  export const GET_APPOINTMENTS = gql`
    query GetAppointments($where: AppointmentWhereInput!) {
      appointments(where: $where) {
        id
        date
        slot
        // 所有需要的字段...
      }
    }
  `;
  
  // 在refetch时使用
  yourMutation({
    refetchQueries: [
      {
        query: GET_APPOINTMENTS,
        variables: { where: yourWhereVariables }
      }
    ]
  });
  

• 检查查询结构一致性：
  确保refetchQueries中的查询与原组件中使用的查询，在变量定义、选择集字段、嵌套结构上完全一致，哪怕少一个__typename字段都可能导致匹配失败。
• 避免动态生成查询：
  动态生成的查询AST会和缓存中静态定义的查询无法匹配，尽量使用静态定义的查询常量。

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