invertase / invertase/tanstack-query-firebase

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

Open
#28 1 comment 0 reactions 0 assignees View on GitHub
react-query-firebase
Dominant language
TypeScript
Stars
462
Forks
69
PR merge metrics
No merged PRs in 30d

Description

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!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.