How to force mutation sync with React Query

在使用React Query库进行数据获取和缓存管理时，useMutation 钩子用于处理数据变动（如添加、修改、删除等）。在某些情况下，我们需要确保 mutation（变更）的状态能够被组件或者应用同步地追踪和响应，这通常涉及到两个方面：状态的反馈和与其他query的同步。

1. 状态的反馈

React Query 的 useMutation 返回一个对象，其中包含了多种状态信息和控制函数，如 isLoading, isError, error, data 等。这些可以直接在组件中使用来给用户反馈。

例如，如果你正在提交一个表单：

javascript
const mutation = useMutation(postNewData, {
    onSuccess: () => {
        // Handle success situation
        queryClient.invalidateQueries('data')
    },
    onError: (error) => {
        // Handle error situation
    },
});

return (
    <div>
        {mutation.isLoading ? (
            <div>Loading...</div>
        ) : (
            <>
                {mutation.isError ? (
                    <div>Error: {mutation.error.message}</div>
                ) : (
                    <div>Data submitted successfully!</div>
                )}

                <button onClick={() => mutation.mutate({ id: 1, name: 'New Data' })}>
                    Submit Data
                </button>
            </>
        )}
    </div>
);

2. 与其他query的同步

当你执行一个mutation时，通常希望与依赖于相同数据的其他query同步。React Query 提供了几种方式来完成这一点：

• invalidateQueries: 最常用的方法是在mutation成功后调用 invalidateQueries 方法，这会使得依赖于特定key的query重新获取最新数据。

• refetchQueries: 另一个选择是使用 refetchQueries，它允许你在mutation成功后立即触发一个或多个query的重新获取。

• setQueriesData: 如果你知道新的数据是什么，可以直接使用 setQueriesData 来更新缓存中的数据，避免了额外的网络请求。

例如，假设在添加新的数据后，你想立即更新列表显示：

javascript
const mutation = useMutation(addNewItem, {
    onSuccess: () => {
        queryClient.invalidateQueries('items')
    },
});

function addItem(item) {
    mutation.mutate(item);
}

在这里，当 addItem 被调用并且 mutation 成功后，依赖于 'items' key 的所有query会自动重新获取，确保UI中显示的是最新数据。

通过这些方法，React Query不仅简化了状态管理，还能确保数据的一致性和实时性，这对于构建现代的、响应快速的Web应用是非常关键的。