T
TanStack•8mo ago
rising-crimson

Difference between infinite query and use-query

Hello all, I am wondering if someone could help me out, I am having a weird issue with infinite query - The first one would be as you can see when i switch pages(URL) it seems like the infinite query still runs because it returns data, and it shouldn't it should only log on the page where it was used - also if you see the network tab it seems to refetch more than it should on mount and window foucs now when i play with the setting like setting refetchOnMount as false, it does not fetch but should not be the correct behavior if i am changing to the tab it should run
 useInfiniteQuery({
      queryKey: ['KEY_DEMOOOOOOOOO'],

      queryFn: async ({ pageParam }) => {
        try {
          console.log(':arrows_counterclockwise: Query function called with pageParam:', pageParam);

          const url = "/staff-member"
          console.log(':globe_with_meridians: Fetching URL:', url);
          const res = await ICS_AXIOS_CLIENT.get(url);
          console.log(':package: Response received:', res.data);
          return res.data;
        } catch (e) {
          console.error(':x: Failed to fetch staff list:', e);
          throw e;
        }
      },
      initialPageParam: 0,
      getPreviousPageParam: () => undefined,
      getNextPageParam: (lastPage) => {
        if (lastPage?.page.totalPages && lastPage?.page?.number < lastPage?.page?.totalPages - 1) {
          return lastPage?.page.number + 1;
        }
        return undefined;
      },

      enabled: !!session?.user?.cookie,
      refetchOnWindowFocus: false,
      // refetchOnMount: false,
      // placeholderData: (data) => data,
      // staleTime: 60 * 1000, // 1 minute
    });
 useInfiniteQuery({
      queryKey: ['KEY_DEMOOOOOOOOO'],

      queryFn: async ({ pageParam }) => {
        try {
          console.log(':arrows_counterclockwise: Query function called with pageParam:', pageParam);

          const url = "/staff-member"
          console.log(':globe_with_meridians: Fetching URL:', url);
          const res = await ICS_AXIOS_CLIENT.get(url);
          console.log(':package: Response received:', res.data);
          return res.data;
        } catch (e) {
          console.error(':x: Failed to fetch staff list:', e);
          throw e;
        }
      },
      initialPageParam: 0,
      getPreviousPageParam: () => undefined,
      getNextPageParam: (lastPage) => {
        if (lastPage?.page.totalPages && lastPage?.page?.number < lastPage?.page?.totalPages - 1) {
          return lastPage?.page.number + 1;
        }
        return undefined;
      },

      enabled: !!session?.user?.cookie,
      refetchOnWindowFocus: false,
      // refetchOnMount: false,
      // placeholderData: (data) => data,
      // staleTime: 60 * 1000, // 1 minute
    });
what is strange is that if i do it with useQuery it works as expected that it only runs the code once in terms of fetching and also it only logs data in the page where it was used any ideas?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?