How to share data across multiple components with react-query useMutation

在React中，useMutation 是来自 react-query 库的一个钩子，它用于处理异步更新操作，如数据的提交。要在多个组件之间共享数据，我们通常会结合使用 react-query 的 QueryClient 和 QueryClientProvider。

这里是一个步骤和例子的详细说明：

步骤 1: 安装 react-query

首先，确保你的项目中已经安装了 react-query。

bash
npm install react-query

步骤 2: 设置 QueryClient 和 QueryClientProvider

在你的应用程序的顶层组件中设置 QueryClient 和 QueryClientProvider。这允许在应用程序的任何组件中访问同一个查询客户端和缓存。

jsx
// src/App.js
import { QueryClient, QueryClientProvider } from 'react-query';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ComponentA />
      <ComponentB />
    </QueryClientProvider>
  );
}

export default App;

步骤 3: 在组件中使用 useMutation

假设我们有一个API用于更新用户数据，我们可以在多个组件中使用 useMutation 钩子来调用这个API，并且通过 react-query 的缓存机制共享状态。

jsx
// src/updateUser.js
export const updateUser = async (userData) => {
  const response = await fetch('/api/user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });
  return response.json();
};

jsx
// src/ComponentA.js
import { useMutation } from 'react-query';
import { updateUser } from './updateUser';

function ComponentA() {
  const mutation = useMutation(userData => updateUser(userData), {
    onSuccess: () => {
      // Handle success
      console.log('User updated successfully');
    },
  });

  return (
    <div>
      <button onClick={() => mutation.mutate({ id: 1, name: 'John Doe' })}>
        Update User
      </button>
    </div>
  );
}

export default ComponentA;

步骤 4: 反应状态的更新

其他组件现在可以使用 useQuery 或 useMutation 的 onSuccess, onError 回调来反应这些更新，或者通过观察相应的数据更改来自动获取更新。

此外，通过 QueryClient 的方法，如 queryClient.invalidateQueries 或 queryClient.setQueryData，可以在一个组件中触发另一个组件的更新。

总结

通过以上步骤，你可以在多个组件之间共享和同步使用 react-query 的 useMutation 状态。这不仅可以使状态管理更为清晰和简洁，还可以充分利用 react-query 提供的强大数据同步和缓存功能。