React-query:如何更新缓存？

Question

我有一个非常基本的应用程序，获取用户，并允许更改他的名字。我使用React查询来获取用户，这样我就可以从缓存功能中获益。它起作用了。

但是，当我想要更新用户时，我使用带有axios的经典post请求。在数据库中更新用户后，我需要直接在updateUser()函数中更新缓存。我在网上看到过使用queryCache.setCache的教程，但它在这里不起作用。如何解决这个问题？或者也许有更好的方法来处理这样的查询？

另外，我注意到有大量的渲染...(参见app文件中的"user render“console.log )。

为了方便起见，我用pokeapi在codesandbox上做了一个小脚本：

https://codesandbox.io/s/api-service-syxl8?file=/src/App.js:295-306

任何帮助都将不胜感激！

Answer 1

所以，我将向您展示我是做什么的：

const updateUser = async (userUpdates: User) => {
  const data = await UserService.updateUser(userUpdates); // return axios data

  return data;
}

// if you want optimistic updating:
const { mutate: mutateUser } = useMutation(updateUser, {
    onMutate: async (userUpdates) => {
      // Cancel any outgoing refetches (so they don't overwrite our optimistic update)
      await queryClient.cancelQueries(['user', userUpdates.id]);

      // Snapshot the previous value
      const previousUser = queryClient.getQueryData(['user', userUpdates.id]);

      // Optimistically update to the new value
      queryClient.setQueryData(['user', userUpdates.id], userUpdates);

      // Return a context with the previous user and updated user
      return { previousUser, userUpdates }; // context
    },
    // If the mutation fails, use the context we returned above
    onError: (err, userUpdates, context) => {
      queryClient.setQueryData(['user', context.userUpdates.id], context.previousUser);
    },
    // Always refetch after error or success:
    onSettled: (userUpdates) => {
      queryClient.invalidateQueries(['user', userUpdates.id]);
    }
  });

// then to update the user
const handleUpdateUser = (userUpdates: User) => mutateUser(userUpdates); 

这一切都来自文档：Optimistic Updates