React Query useQuery遇长耗时请求返回成功却无数据，如何处理？

问题 #

在React应用中使用React Query的useQuery获取数据时，部分请求耗时长达一分钟，且useQuery显示请求成功，但无法获取到任何数据。相关代码如下：

const useServiceHook = ({
  columns,
  currentPage,
  title,
  enabled,
  filters,
  pageSize,
  sorting,
}) => {
  const { data, isLoading, status } = useQuery({
    enabled,
    refetchOnWindowFocus: false,
    queryKey: [
      'table-listing',
      columns,
      currentPage,
      title,
      filters,
      pageSize,
      sorting,
    ],
    select: ({ data }) => data,
    queryFn: () =>
      API.post(
        generatePath(URL, { title }),
        {
          columns,
          filters: [{ and: filters }],
        },
        {
          params: {
            page: currentPage,
            size: pageSize,
            sort: sorting,
          },
        },
      ).catch(() => ({
        content: [],
        total_elements: 0,
        total_pages: 0,
      })),
    onSuccess: (data) => {
      console.log('log sucess', data);
    },
  });

  const rows = useMemo(() => (data ? data.content : []), [data]);

  return {
    rows,
    totalNumberOfPages: data ? data.total_pages : 0,
    totalNumberOfElements: data ? data.total_elements : 0,
    isLoading,
  };
};

export { useServiceHook };

API响应结构：返回数据外层包含data字段，内部包含content、total_elements、total_pages等核心数据。

解决方法 #

• 核对select函数与API响应结构
  你的select函数是({ data }) => data，假设API响应外层有data属性。但如果实际响应结构是直接包含content等字段的对象，这个select会导致data变为undefined。先注释掉select选项，打印完整响应确认结构：

  onSuccess: (data) => {
    console.log('完整API响应:', data); // 查看真实结构
  },
  

  若响应直接是{ content: [...], total_elements: ... }，则删除select选项；若确实外层有data，则保留select。

• 统一成功/失败响应结构
  错误捕获回调返回的是直接包含content的对象，和正常响应的外层data结构不一致，会导致后续取值出错。修改catch返回结构与成功响应对齐：

  .catch(() => ({
    data: {
      content: [],
      total_elements: 0,
      total_pages: 0,
    }
  })),
  

• 优化请求超时与缓存策略
  针对请求耗时过长问题，给useQuery添加超时、重试和缓存配置：

  useQuery({
    // 其他配置
    timeout: 30 * 1000, // 30秒超时
    retry: 1, // 失败后重试1次
    staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜，减少重复请求
  })
  

• 确保queryKey可序列化
  queryKey中的columns、filters如果是复杂对象（含函数、Symbol等），会导致React Query缓存异常。将复杂序列化为JSON字符串：

  queryKey: [
    'table-listing',
    JSON.stringify(columns),
    currentPage,
    title,
    JSON.stringify(filters),
    pageSize,
    JSON.stringify(sorting),
  ],
  

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