如何在Apollo的refetchQueries中传递变量？最佳实践及报错解决

嘿，我来帮你搞定这个头疼的问题！你遇到的核心卡点是：graphql高阶组件的options如果直接写死成对象，它会在组件还没完成实例化的时候就执行了，这时候this.props根本还没绑定到组件上，自然拿不到值。不过别担心，Apollo早就考虑到这种场景了，给你两个实用的解决方案：

1. 把options改成函数形式（最推荐） #

options支持传入一个函数，这个函数会接收当前组件的props作为参数，这样就能在函数内部轻松拿到最新的item.id了，完全避开组件未实例化的问题：

MyComponent = graphql(createItemImage, {
  name: "createItemImage",
  options: (props) => ({ // 这里用函数接收组件的props
    refetchQueries: [
      {
        query: YourTargetQuery, // 替换成你实际要重新获取的GraphQL查询
        variables: { id: props.item.id } // 直接用传入的props里的id
      }
    ]
  })
})(MyComponent);

而且这个函数会在组件props更新的时候自动重新执行，能保证拿到的永远是最新的item.id，非常省心。

2. 在mutation回调里手动触发refetch #

如果你的场景需要在mutation执行完成后做一些额外操作（比如提示用户成功），再触发数据刷新，那可以不在options里配置refetchQueries，而是在调用mutation的时候手动处理：

// 组件内部调用mutation的代码块
this.props.createItemImage({
  variables: { /* 这里填你的mutation所需变量 */ },
}).then(() => {
  // 这里组件已经实例化完成，完全可以拿到this.props
  this.props.data.refetch({ id: this.props.item.id });
  // 还可以加一些其他逻辑，比如弹窗提示：alert("图片创建成功！")
});

不过这种方式需要注意，你得确保对应的查询已经通过graphql HOC注入到组件的props.data里，不然refetch方法会找不到哦。

额外小提示 #

• 如果item可能为undefined（比如数据还在加载中），建议加个判断，避免传递无效变量导致GraphQL报错：

  options: (props) => ({
    refetchQueries: props.item?.id ? [
      { query: YourTargetQuery, variables: { id: props.item.id } }
    ] : []
  })
  

• 要是你用的是较新的Apollo Client版本，也可以试试用update函数直接修改缓存，有时候比重新发起查询更高效，能减少不必要的网络请求～

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