React Query：如何将404错误响应转换为空数组

完全可以实现，别用你示例里直接修改状态的方式，React Query的data、isError等状态由内部管理，直接修改会导致状态不一致。推荐两种靠谱的实现方式：

方式一：在请求函数内捕获404（最优） #

直接在useQuery的queryFn里处理API异常，把404映射为空数组，这样React Query会认为请求成功，自动将data设为空数组，isError保持false：

const { data, isLoading, isError } = useQuery('key', async () => {
  try {
    const res = await apiCall();
    return res.data;
  } catch (err) {
    // 识别404错误，返回空数组
    if (err.statusCode === 404) {
      return [];
    }
    // 其他错误正常抛出，让React Query标记为错误状态
    throw err;
  }
});

方式二：通过缓存更新处理（适合无法修改请求逻辑的场景） #

如果不想改动原有的apiCall函数，可以用useQueryClient手动更新缓存，同时让404不触发错误重试：

import { useQuery, useQueryClient } from '@tanstack/react-query';

const queryClient = useQueryClient();

const { data, isLoading, isError } = useQuery('key', apiCall, {
  onError: (err) => {
    if (err.statusCode === 404) {
      // 更新缓存数据，组件会自动拿到空数组
      queryClient.setQueryData('key', []);
    }
  },
  // 404错误不重试，避免无效请求
  retry: (_, err) => err.statusCode !== 404
});

注意 #

你示例里的setData和setIsError是错误用法，React Query返回的状态是只读的，不能直接修改，必须通过上述方式让React Query内部管理状态。

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