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

[amak07]

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!

[TimonVS]

reactfire has a similar issue, some workarounds are provided here: https://github.com/FirebaseExtended/reactfire/issues/491.