React Query Not Syncing with Query Key

64 Views Asked by At

I am counting that when the react query key changes, react query would fetch the new query of the new key but it now won't. It is weird because the devtools shows the new key, but it won't actually call the queryFn function most of the time.

useEffect(() => {
  console.log("Selected Tab:", selectedTab);
}, [selectedTab]);

  const { data, fetchNextPage, isFetchingNextPage, isLoading } =
    useInfiniteQuery({
      queryKey: ["products", selectedTab],
      queryFn: async (props) => await getItemsFromFeed(props, selectedTab),
      initialPageParam: 0,
      getNextPageParam: (lastPage: any) => {
        return lastPage?.lastVisible || undefined
      },
      enabled: !viewShops,
      staleTime: 1000 * 60 * 1, // 1 minute
    })

Selectedtab is a Jotai atom but I tried it with a useState and reducer variable but had the same issue.

For a selected tab, I expected react query to call the function which calls the api, but it won't. I have an initial list of 10 products and if that subcategory (what the tabs are for) are included in the list, RQ will call, otherwise it won't despite what the react dev tools say. How can I sync it without having to refreshquery every time.

0

There are 0 best solutions below