我们已经学会了如何通过**AXIOS的react-query钩子从你的服务器上POST和GET**数据。所有这些都是整洁干净的工作，因为 react query 已经为你做了很多艰苦的工作。在这篇文章中，我们将为我们的reactjs应用程序添加另一个变化，不管你信不信，都会让它变得更好、更快。因此，不再多说，让我们开始吧
什么是错的？
我们在代码中是否做错了什么，答案是绝对没有。但就性能而言，这是不是最好的解决方案？不是！是的。
一旦我们通过useMutation钩子将我们的新星球发布到我们的服务器上，我们的查询就会对查询键失效，这使得它重新获取数据：
const successCb = () => {
queryClient.invalidateQueries(["get-planets"]);
};
我们做了两个请求
- POST我们的新数据
- 获取 更新的数据
什么是更好的方法？
为了节省我们的第二个API，我们将使用onMutate回调来优化我们的性能。我们的想法是，基本上
- 访问 react-query 的缓存
- 使用其查询键获取我们试图重新获取的数据。
- 手动添加我们的新项目到数据中
- 并把我们更新的缓存放回原处。
乐观地更新数据
我们称其为乐观地更新数据，因为我们在更新缓存中的现有数据时，不知道我们的API在改变数据时是否真的返回成功或错误。
onMutate: async (variables) => {
const { successCb, errorCb } = variables;
// cancel queries against this query key
// so that if any other component is consuming this data
// is not able to get the old data
await queryClient.cancelQueries(["get-planets"]);
// get the cached values of 'get-planets'
const previousValue = queryClient.getQueryData(["get-planets"]);
// set the cached data with an added object
// i.e the new planet posted
queryClient.setQueryData(
["get-planets"],
[...previousValue, { name: variables?.name, id: variables?.id }]
);
// return previousValue here
// we will use it in the next section
return { successCb, errorCb, previousValue };
},
一旦我们乐观地更新了我们的缓存数据，我们就可以继续前进，看看我们瘦的成功回调：
// you can add code here to show alert
// or trigger side effects
const successCb = () => {};
在最坏的情况下
但是，假设我们的API失败了，我们乐观地更新了我们的数据，现在怎么办？这里我们将使用我们在onMutate返回的previousValue 。
onError: (error, variables, context) => {
queryClient.setQueryData(["get-planets", context?.previousValue]);
if (context.errorCb) {
context.errorCb(error);
}
},
如果我们的API失败了，我们现在已经回到了我们的previousValue，而且是在一瞬间。
真理的时刻
收尾
好了，这很顺利吧？或者，如果你没有看到区别，想象一下，每次你更新东西的时候都要获取非常多的数据集。你也可以在网络调用时检查和核对，因为我们现在只是在进行一次网络调用。我个人喜欢react-query的这种整洁的设施，以提高你的应用性能。这也是为了在生活中保持乐观的态度。坐稳了，这不是它。继续学习。这不是一个告别，但要小心。
