Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

react-query-firebase hooks do not work in a Next.js app until AFTER a vanilla Firebase API is made.

Aperta
  • Qualcosa non va?
#28 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
28/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
firebase, javascript, next.js, react, typescript
Ambito
api, frontend

Direzione di ricerca

Inizia dal file app.js, dove vengono configurati queryClient e l’inizializzazione di Firebase, quindi segui useFirestoreQueryData e la chiamata all’API vanilla di Firebase che fa sì che gli hook inizino a funzionare. Riproduci l’errore al caricamento iniziale o all’aggiornamento di una pagina nell’app Next.js e confronta il comportamento prima e dopo quella chiamata all’API. Il lavoro è completato quando l’hook funziona senza la chiamata dummy oppure viene documentata l’inizializzazione richiesta.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

react-query-firebase

Hi,
Great package so far but I'm having an issue where I get the following error: "FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore".

I am building a Next.js app (but no SSR or SSG). I am currently refactoring our Firebase API (vanilla JS) with react-query-firebase hooks.

When a page is loaded (or refreshed), I see the above error message. At first, I thought it was something specific with Next.js (and it could very well be). I then realized that using a react-query-firebase hook such as 'useFirestoreQueryData' anywhere in the app provides the above error message right away. However, if I use one of our vanilla Firebase API calls BEFORE using a react-query-firebase hook, everything works just fine.

I believe that react-query-firebase is NOT reading the Firebase initializeApp code (which is set up according to both this library's documentation and the official Firebase documentation). To confirm this, I have made a simple "dummy" Firebase API call in our app.js file (the file where we set up queryClient). Doing this "hack" fixes the above issue right away.

Please advise on what to do. Perhaps it's not a bug and i'm simply missing something from your documentation. Also, still could be a Next.js specific issue, however, we have built other Next.js apps with react-query (non-firebase, graphQL) and that worked perfectly fine too.

Thanks!

Lingua principale
TypeScript
Stelle
462
Fork
70
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di invertase/tanstack-query-firebase

Tutte le issue di invertase/tanstack-query-firebase

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.