在Success React Query上突变后从服务器传递数据

Question

想知道是否有人可以帮助解决以下问题或为我指明正确的方向？我正在做POC，因为我们可能会转到RQ。我一直纠结于如何传递来自突变的数据。

我正在从API获取数据。然后，我通过ID获取一个特定的用户。我想实现的是，当用户的名称更改时，会发生突变(目前是成功的(，用户的名称也会更改。如何在OnSuccess之后返回并更新数据？

出于测试目的，我对用户名进行了硬编码。这是一个沙盒。

这是一个沙盒https://codesandbox.io/s/fast-bird-4p1u08?file=/src/components/User/User.js

编辑：我不能使用invalidateQueries或refetch，因为问题是当发出put请求时，服务器上的资源不会真正更新，但它会被伪造。所以我收到了响应，但我不能再进行refetch了，因为用户还没有更新(根据文档(https://jsonplaceholder.typicode.com/guide/

Answer 1

如果我正确理解你的问题，我知道你可以做两件事。

1，乐观更新

const queryClient = useQueryClient() // import useQueryClient
useMutation(updateTodo, {
// When mutate is called:
onMutate: async newTodo => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries(['todos'])
// Snapshot the previous value
const previousTodos = queryClient.getQueryData(['todos'])
// Optimistically update to the new value
queryClient.setQueryData(['todos'], old => [...old, newTodo])
// Return a context object with the snapshotted value
return { previousTodos }
},
// If the mutation fails, use the context returned from onMutate to roll back
onError: (err, newTodo, context) => {
queryClient.setQueryData(['todos'], context.previousTodos)
},
// Always refetch after error or success:
onSettled: () => {
queryClient.invalidateQueries(['todos'])
},
})

这不会请求新的数据，但您可以只获取在突变时发送的值并更新缓存。

2，查询无效您必须导入如上所述的useQueryClient

let queryClient = useQueryClient()

成功后，可以调用invalidateQueries((函数来触发一个数据刷新，你需要传递像["query key"]这样的查询键，以便RQ知道它需要什么数据来刷新

queryClient.invalidateQueries()

在我看来，两者都有各自的用例，但在的大部分时间里都可以互换使用