react-query-firebase icon indicating copy to clipboard operation
react-query-firebase copied to clipboard

`useFirestoreInfiniteQuery` with realtime subscriptions supported?

Open davidoort opened this issue 1 year ago • 1 comments

Hey, I'm just wondering if this is supported or if there's a workaround to make this work with this library?

The goal is to have an infinite scroll list where the items update in realtime.

davidoort avatar Nov 25 '24 08:11 davidoort

https://github.com/vpishuk/react-query-firebase This package has useInfiniteQuery hook. Here is an example of how to use it:

const getInitialPageParam = () => {
        return by === "createdOn"
            ? direction === "desc"
                ? Infinity
                : -Infinity
            : direction === "desc"
              ? "~"
              : "";
    };

    const getNextPageParam = (lastPage) => {
        return (lastPage?.length ?? 0) > 0 ? lastPage[lastPage.length - 1].createdOn : "";
    };

    const getPrevPageParam = (firstPage) => {
        return (firstPage?.length ?? 0) > 0 ? firstPage[0].createdOn : "";
    };

   const collectionReference = useCollectionReference({ path: COLLECTION_PATH }).withConverter(converter);

    useInfiniteQuery({
        options: {
            queryKey: ['mykey'],
            initialPageParam: startAfter(getInitialPageParam()),
            getNextPageParam: (lastPage) => {
                return startAfter(getNextPageParam(lastPage));
            },
            getPreviousPageParam: (firstPage) => {
                return endBefore(getPrevPageParam(firstPage));
            },
        },
        query: collectionReference,
        queryConstraints: [orderBy(by, direction)]
    });

vpishuk avatar Jan 06 '25 03:01 vpishuk