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

Querying firestore documents with subscribe never fetches

Open CalvinMoylan opened this issue 2 years ago • 8 comments

just never finishes fetching. setting subscribe to false fetches instantly

const ref = doc(firestore, "games", id);

const { data, isLoading } = useFirestoreDocumentData(["games", id], ref, {
    subscribe: true,
});

image

it does work with useFirestoreQuery

"@react-query-firebase/firestore": "^1.0.0-dev.7" "firebase": "^9.11.0" "react-query": "^3.39.2"

CalvinMoylan avatar Oct 19 '22 16:10 CalvinMoylan

Also noticed this, happens with RTDB as well. It does return once an update to the DB occurs though. I'm guessing some interaction with React Query regarding the updates isn't right

PatrikTheDev avatar Oct 31 '22 11:10 PatrikTheDev

any chances for a merge? :)

bgalek avatar Dec 08 '22 23:12 bgalek

I am also experiencing the same problem, so it would be very appriciated if it got fixed

KarikoGoat avatar Dec 11 '22 17:12 KarikoGoat

Would also appreciate a merge and release.

jagthedrummer avatar Jan 11 '23 17:01 jagthedrummer

While waiting for this fix, I created a temporary custom hook. :)

Screenshot 2023-02-03 at 1 38 18 PM Screenshot 2023-02-03 at 1 37 57 PM

rizooooo avatar Feb 03 '23 05:02 rizooooo

would be nice to have this fix merged. I rewrote whole app to use-query-firebase and now due this I have to rewrite it back or use custom logic when need to subscribe to document changes...

Please, make it work. Thanks!

martsim6 avatar Feb 12 '23 10:02 martsim6

For getting multiple docs like useFirestoreQuery

import { DocumentData, getDocs, onSnapshot, Query } from "firebase/firestore"
import { useEffect } from "react"
import { useQuery } from "react-query"

interface IProps {
   keyName: Partial<string[]>
   query: Query<DocumentData>
   subscribe?: boolean
}

export const useCustomFireStoreQuery = ({ keyName, query, subscribe = false }: IProps) => {
   const getQuery = useQuery(keyName, async () => {
       const snapshot = await getDocs(query)
       return snapshot
   })
   useEffect(() => {
       if (subscribe) {
           const unsub = onSnapshot(query, (doc) => {
               getQuery.refetch()
           })
           return () => unsub()
       }
   }, [subscribe, query])
   return getQuery
}

Banfanci avatar Apr 25 '23 14:04 Banfanci

The issues regarding infinite loading and disabled functionality associated with the useFirestoreDocumentData hook have been resolved. Therefore, we can now utilize it with Next.js versions 13 or 14. https://github.com/invertase/react-query-firebase/pull/97

kabtamu-degifie avatar Feb 18 '24 22:02 kabtamu-degifie