Infinite scrolling with useQuery instead useInfiniteQuery

[igdev116]

My problem

I'm using nextjs, graphQL with react-query to implement infinite scroll with useQuery since useInfiniteQuery does not support server side rendering, but I don't know how to APPEND new products to products variable when setPage called and data from useQuery returned

Here is my code

const [page, setPage] = useState<number>(1);

// Data returned when setPage inside useEffect called
const { data, isFetching } = useQuery<GetProductsQuery>(
    ['products', page],
    () => getProducts(page),
    {
      keepPreviousData: true,
      refetchOnMount: false,
      refetchOnWindowFocus: false,
      enabled: Boolean(page),
      staleTime: 5 * 1000,
    }
  );

const initProducts = data?.products.products;
const nextPage = data?.products.nextPage;

// Init data from server side so client can see products without having to see empty page
const [products, setProducts] = useState<ProductType[]>(initProducts ?? []); 

const getProducts = async (page: number) => {
    const { category, sort, order } = router.query;
    const { data } = await apolloClient.query(...)

    // my API call here...

    return data;
};

// I'm using built in IntersectionObserver Javascript to detect scroll to bottom, 
// It's work okay
useEffect(() => {
    if (isIntersecting && nextPage && !isFetching) setPage(nextPage);
}, [isFetching, isIntersecting, nextPage]);

Hope you understand them, thanks a lot!! 🥪🌮

[igdev116]

OMG I found a way to solve that with onSuccess method inside useQuery but now I'm having a new issue 😅

Let's see my code first

const { data, isFetching } = useQuery<GetProductsQuery>(
    ['products', page],
    () => getProducts(page),
    {
      // options above...
      onSuccess(data) {
        setProducts((prevState) => [...prevState, ...data.products]); // It's solved problem above !! 😄😄
      },
    }
  );

New issue

When I click a button to filter products, I wanna reset my page variable back to 1 but nothing happen
I think the reason is because ['products', 1], ['products', 2], etc... is still in my cache so react-query sees when I call setPage to 1, it matches ['products', 1] from cache so it pulls it out from cache

I also tried when i click button filter

const queryClient = useQueryClient();
queryClient.removeQueries('products');

Do you have any idea, thanks a ton 😄

[igdev116]

I solved my problem here

queryClient.removeQueries('products'); // clear all products queries
setPage(1); // reset page back to 1