将Redux替换为ReactQuery后，PUT及带ID的GET请求遇问题求助

PUT请求问题与优化 #

原代码存在的问题 #

• 仍依赖Redux的dispatch分发状态，没用到ReactQuery自身的isSuccess/isError状态
• 修改数据后未主动失效对应查询的缓存，页面数据不会自动刷新
• 异步函数未返回响应数据，不利于后续逻辑处理

原代码 #

const { dispatch } = store;

const editClientDataAsync = async ( id,data ) => {
    await axiosObj().put(`clients/${id}`,data);
}

const { mutateAsync: editClientData, isLoading } = useMutation(['editClientData'], editClientDataAsync, {
    onSuccess: () => dispatch({ type: SUCCESS_DATA, payload: { message: "Success" } }),
    onError: () => dispatch({ type: ERROR_DATA, payload: { message: "Error" } })
});
return { editClientData, isLoading }

优化后的代码 #

// 引入QueryClient用于缓存操作
const queryClient = useQueryClient();

// 调整异步函数参数格式，返回响应数据
const editClientDataAsync = async ({ id, data }) => {
  const response = await axiosObj().put(`clients/${id}`, data);
  return response.data;
};

// 用ReactQuery自身状态替代Redux，移除dispatch依赖
const { mutateAsync: editClientData, isLoading, isSuccess, isError } = useMutation(
  ['editClientData'],
  editClientDataAsync,
  {
    onSuccess: () => {
      // 失效客户详情查询缓存，触发页面自动刷新
      queryClient.invalidateQueries(['ClientId']);
    }
  }
);

return { editClientData, isLoading, isSuccess, isError };

带ID的GET请求问题与优化 #

原代码存在的问题 #

• 依赖Redux的useSelector获取ID，ReactQuery无法自动跟踪参数变化触发查询
• ID为空时返回undefined，ReactQuery会标记查询为成功状态，不符合业务预期
• 未配置查询启用条件，可能发起无意义的空请求

原代码 #

const id = useSelector((state) => state?.clientData?.clientInfo?.data.id)

const getClientDetails = async ({ queryKey }) => {
    const [_, { id }] = queryKey;
    console.log(queryKey)
    if (!id)
        return;

    const { data } = await axiosObj().get(`clients/${id}`)
    console.log(data)
    return data;
}

const { data: clientDetails, isLoading } = useQuery(['ClientId', { id }], getClientDetails)

return { clientDetails, isLoading }

优化后的代码 #

// 推荐从路由参数获取ID（例如react-router的useParams），替代Redux依赖
// const { id } = useParams();

// 若暂时保留从Redux获取，确保ID变化时查询自动更新
const id = useSelector((state) => state?.clientData?.clientInfo?.data.id);

const getClientDetails = async ({ queryKey }) => {
  const [_, { id }] = queryKey;
  // ID为空时抛出错误，让ReactQuery标记为错误状态
  if (!id) throw new Error('缺少有效的客户ID');

  const { data } = await axiosObj().get(`clients/${id}`);
  return data;
};

const { data: clientDetails, isLoading, isError } = useQuery(
  ['ClientId', { id }],
  getClientDetails,
  {
    // 仅当ID存在时才执行查询
    enabled: !!id,
    // 可配置缓存过期时间，按需调整（示例：5分钟）
    staleTime: 5 * 60 * 1000
  }
);

return { clientDetails, isLoading, isError };

核心优化思路：迁移到ReactQuery后，要充分利用它的缓存管理和内置状态（isLoading/isSuccess/isError），减少对Redux的依赖；修改数据后主动关联失效查询缓存，实现数据自动同步；通过enabled选项精准控制查询执行时机，避免无效请求。

内容的提问来源于stack exchange，提问作者ABs