useInfiniteQuery and server side filtering to data

[berkaycirak]

Hi, I am trying to use tanstack query on my async state management however I am stuck at some point. In my app there is a infinite scroll. Without filtering it works correctly however when I try to do some server side filtering in addition to infinite scroll it is now working as I expected. Below is my hook where all logic is happening. In that hook, I am also returning setQuery function to do server side filtering on proper areas. For example, when user check the checkbox of red items, I am filtering red items on the server and want to do infinite scroll logic based on that filtering on the client. Is there any idea?

  const [query, setQuery] = useState(null);
  const searchParams = useSearchParams();
  const address = searchParams.get('address');

  const fetchEvents = async ({ pageParam }): Promise<EventArray> => {
    let apiUrl = `${chainData?.cardApiUrl}/histories`;
    if (address) {
      apiUrl += `/owner/${address}?skip=${pageParam * 15}&take=15`;
    } else if (tokenId) {
      apiUrl += `/card/${tokenId}?skip=${pageParam * 15}&take=15`;
    } else {
      apiUrl += `?skip=${pageParam * 15}&take=15`;
    }
    if (query) {
      apiUrl += query;
      console.log(apiUrl);
    }

    const result = await axios.get<EventArray>(apiUrl);
    return result.data;
  };

  const { data, fetchNextPage, hasNextPage, refetch } = useInfiniteQuery({
    queryKey: [queryKey],
    queryFn: fetchEvents,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages, lastPageParam) => {
      if (lastPage.length === 0) {
        return undefined;
      } else {
        return lastPageParam + 1;
      }
    },
  });

  useEffect(() => {
    if (data?.pages && hasNextPage && inView) {
      fetchNextPage();
    }
  }, [data, hasNextPage, fetchNextPage, inView]);

  useEffect(() => {
    if (query) {
      refetch();
    }
  }, [query, refetch]);

[TkDodo]

everything that you use in your queryFn must be part of your queryKey. we have a lint rule for that.

[berkaycirak]

Yeah you are right. I have fixed that issue by passing unique queryKeys for each filtering logic.

[berkaycirak]

Here is my custom hook usage for infinite query and server side filtering

 const queryType = searchParams.get('type');
  const { eventArray, observerRef } = useEventHistory({
    user,
    queryKey: queryType ? `${queryType}_user_activity` : 'all_user_activity',
  });

That is the inside of the hook (it is not clean code, I will refactor it but the logic works as I expected now)

const searchParams = useSearchParams();
  const address = searchParams.get('address');

  const fetchEvents = async ({ pageParam, queryKey }): Promise<EventArray> => {
    console.log(queryKey);
    let apiUrl = `${chainData?.cardApiUrl}/histories`;
    if (address) {
      apiUrl += `/owner/${address}?skip=${pageParam * 15}&take=15`;
    } else if (tokenId) {
      apiUrl += `/card/${tokenId}?skip=${pageParam * 15}&take=15`;
    } else {
      apiUrl += `?skip=${pageParam * 15}&take=15`;
    }
    if (searchParams.get('type')) {
      apiUrl += `&type=${searchParams.get('type')}`;
      console.log(apiUrl);
    }

    const result = await axios.get<EventArray>(apiUrl);
    return result.data;
  };

  const { data, fetchNextPage, hasNextPage, refetch } = useInfiniteQuery({
    queryKey: [queryKey],
    queryFn: fetchEvents,
    initialPageParam: 0,
    getNextPageParam: (lastPage, pages, lastPageParam) => {
      if (lastPage.length === 0) {
        return undefined;
      } else {
        return lastPageParam + 1;
      }
    },
  });

  useEffect(() => {
    if (data?.pages && hasNextPage && inView) {
      fetchNextPage();
    }
  }, [data, hasNextPage, fetchNextPage, inView]);

  useEffect(() => {
    if (searchParams) {
      refetch();
    }
  }, [searchParams, refetch]);