Apollo 客户端 - 多次更新后重新获取查询答案

【问题标题】：Apollo Client - refetchQueries after multiple updatesApollo 客户端 - 多次更新后重新获取查询
【发布时间】：2021-01-16 04:43:06
【问题描述】：

我正在使用 Apollo 客户端 3 并尝试构建一个可编辑的表格

我有多个 API 突变，我应该在最后一个突变之后触发 refetchQueries。

例如：

  const [updateName] = useMutation(updateNameD)
  const [updateAge] = useMutation(updateAgeD)
  const [updateCity] = useMutation(updateCityD, {refetchQueries: () => [{ query: UsersDocument }],})

问题：突变的顺序并不总是相同，我需要在最后一个突变中重新获取查询

【问题讨论】：

标签： react-apollo apollo-client

【解决方案1】：

如果需要同时执行所有三个突变，那么您可以将三个突变查询合并为一个查询，并且只有在突变查询（组合一个）完成后才会执行您的 refetchQueries。请不要在组合查询时只有一个 useMutation 钩子。

如果您有其他用例，请告诉我。

[编辑] 如果您无法分组查询，可以采用以下方法。

const [updateName] = useMutation(updateNameD)
const [updateAge] = useMutation(updateAgeD)
const [updateCity] = useMutation(updateCityD)
const [refetchPageData] = useLazyQuery(UsersDocument)

Promise.all(updateName(), updateAge(), updatedCity()).then(res => {
    refetchPageData()
})

【讨论】：

是的，这是一个不同的用例，我无法合并查询。我需要将它们分开，但我无法知道它们的调用顺序

【解决方案2】：

找到另一个解决方法： useQuery 钩子还返回一个 refetch 方法，然后你可以在任何你想要的地方使用它

const [updateName] = useMutation(updateNameD)
const [updateAge] = useMutation(updateAgeD)
const [updateCity] = useMutation(updateCityD)
const {data, refetch} = useQuery(UsersDocument)

await Promise.all([updateName(), updateAge(), updatedCity()])
refetch()

【讨论】：