当我使用 ReactQuery useMutation 创建新组时如何更新组数组

Question

我想创建一个群组并立即更新我的群组列表，但在这里我必须刷新页面并获取新数据

Answer 1

你的代码看起来不错，但你可能想要一个乐观的更新：在请求发生之前在本地更新组，然后在发生错误时可能回滚。 docs here 中对此进行了介绍。在您的情况下，类似于：

useMutation(
  values => createGroup(values),
  {
    onMutate: async value => {
      await queryClient.cancelQueries('groups')
 
      const previousGroups = queryClient.getQueryData('groups')
 
      queryClient.setQueryData('groups', old => [...old, value])
 
      return { previousGroups }
    },
    onError: (err, values, context) => {
      queryClient.setQueryData('groups', context.previousGroups)
    },
    onSettled: () => {
      queryClient.invalidateQueries('groups')
    }
  }
)

如果您的乐观更新被认为是正确的，您也可以省略 onSettled 中的重新获取，或者您可以 return 来自服务器的数据并将其放入 onSuccess 的缓存中。

当我使用 ReactQuery useMutation 创建新组时如何更新组数组

how to update group array when i create new group using ReactQuery useMutation

reactjs

react-query