React Query：如何从其他组件重新调用API

React Query 提供了多种实用方式，在数据更新后触发重新获取最新数据，以下是最常用的几种方案：

1. 标记缓存失效（推荐） #

使用 queryClient.invalidateQueries() 标记对应查询的缓存为失效状态，React Query 会自动在合适时机重新发起请求拉取最新数据，这是最贴合 React Query 缓存设计的方案。

示例代码： #

// 组件A：获取数据
import { useQuery, useQueryClient } from '@tanstack/react-query';

const ComponentA = () => {
  const { data } = useQuery({
    queryKey: ['userData'], // 唯一标识该查询的Key
    queryFn: () => fetch('/api/user').then(res => res.json())
  });

  return <div>{data?.name}</div>;
};

// 组件B：更新数据并触发重新获取
const ComponentB = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: (newData) => fetch('/api/user', {
      method: 'PUT',
      body: JSON.stringify(newData),
      headers: { 'Content-Type': 'application/json' }
    }),
    onSuccess: () => {
      // 标记userData查询的缓存失效，React Query自动重新获取
      queryClient.invalidateQueries({ queryKey: ['userData'] });
    }
  });

  return <button onClick={() => mutation.mutate({ name: '新用户名' })}>更新数据</button>;
};

2. 直接触发重新获取 #

如果需要立即执行重新请求，可使用 queryClient.refetchQueries()，它会直接发起API请求，而非等待缓存失效逻辑触发。

示例代码： #

// 在组件B的mutation onSuccess回调中替换为：
onSuccess: () => {
  queryClient.refetchQueries({ queryKey: ['userData'] });
}

3. 利用更新接口返回数据直接更新缓存 #

如果你的更新接口会返回最新的完整数据，可直接用 queryClient.setQueryData() 覆盖缓存，无需额外发起API请求，能提升页面响应速度。

示例代码： #

const ComponentB = () => {
  const queryClient = useQueryClient();
  const mutation = useMutation({
    mutationFn: (newData) => fetch('/api/user', {
      method: 'PUT',
      body: JSON.stringify(newData),
      headers: { 'Content-Type': 'application/json' }
    }).then(res => res.json()), // 假设更新接口返回最新用户数据
    onSuccess: (updatedData) => {
      // 直接更新缓存，组件A会立即渲染最新数据
      queryClient.setQueryData(['userData'], updatedData);
    }
  });

  return <button onClick={() => mutation.mutate({ name: '新用户名' })}>更新数据</button>;
};

内容的提问来源于stack exchange，提问作者Đỗ Duy Đoàn