I'm using useQuery function from React Query to fetch data in my React application. However, I'm encountering an issue where some requests take too long to download content (about a minute).

Here's a is my code:

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 response Image

When I run this code, I receive from the useQuery that the request is successful, but I don't have any data.

There's something that I can do to receive the data from the API ?

I'm using useQuery function from React Query to fetch data in my React application. However, I'm encountering an issue where some requests take too long to download content (about a minute).

Here's a is my code:

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 response Image

When I run this code, I receive from the useQuery that the request is successful, but I don't have any data.

There's something that I can do to receive the data from the API ?

• reactjs
• fetch-api
• react-query

1 Answer 1

you are waiting 60 seconds for your content? I would say the problem is in your api instead of frontend, can you in anyway batch your requests, so you are sending more requests in order to receive smaller responses?

UPDATED: The problem shouldnt be in react query. maybe you can swap your post to axios, because it has a timeout property, and dont fet to disable Retry in react-query,. if you only want to do this once.

 const { data } = useQuery(
    [key],
    // Use timeout you need
    () => axios.get(url, { timeout: 6000 }),
  );