I use useQuery to get all my headers.

  const descDocsHeadersQuery = useQuery({
    queryKey: ["getDescDocsHeaders"],
    queryFn: async () => {
      const response = await instance.get(
        `/api/audits/audit/descdocs/getheaders`
      );

      if (response.status === 200) {
        return response.data;
      }
    },
  });

Everything is fine – data from that query returning all headers and positions of this header which is number array, but everthing goes wrong when I add useInfiniteQuery in the same component to get all my fields.

  const descDocsFieldsQuery = useInfiniteQuery({
    queryKey: ["getDescDocsFields"],
    queryFn: async ({ pageParam }) => {
      const response = await instance.get(
        `/api/audits/audit/descdocs?page=${pageParam}`
      );

      if (response.status === 200) {
        console.log(response.data) //output here is correct from the beginning 
        return response.data;
      }
    },
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages) => {
      console.log(lastPage, allPages)
      const nextPage = allPages.length + 1;
      return lastPage.defaultFields.length !== 0 ? nextPage : undefined;
    },
  });

Firstly positions array output from descDocsHeadersQuery.data is empty (rest of data is fine). Console log in queryFn returns right array everytime. The strange thing is when I invalidate “getDescDocsHeaders” the array is right. What am I doing wrong? How to make query to return the right array from the beginning?

I tried to figure out what’s going on and I know the problem is with useInfiniteQuery, because without this the problem is not happening.

I want to return right data from the beginning.