"Too much recursion" - Using a falsy value in the query key to stall useQuery call

[michaeljblum]

I'd like to try using react-query in my application instead of custom hooks I've been using to interface with Firebase, but I'm running into some issues.

Everything works fine in my component using this code

const doStuffWithFirebase() = async () => {
if (firebase) {
... // read, write, update delete firebase stuff
  }
}

const firebase = useFirebase()
  React.useEffect(() => {
    if (!firebase) return
      doStuffWithFirebase() // simple example
  }, [firebase])

I know I can't call useQuery in useEffect, so I'm setting my firebase variable (the return value of my useFirebase hook above) as the second part of my query key below, and reading it in my queryFn (fetchTodos), like so

const fetchTodos = async (todos, firebase) => {
...
}

const { status, data, isFetching, error } = useQuery(
    ["todos", firebase],
    fetchTodos
  )

My thinking is that fetchTodos would only be called when firebase evaluates to true. I keep getting "InternalError: too much recursion" here, though.

My interest in using react-query here with firebase would be to avoid having a global context provider, as is possible with my custom hook/function called in useEffect pattern. But I'm stumbling on getting useQuery to work here.

[tannerlinsley]

Try firebase && [‘todos’, firebase] as the key.

[michaeljblum]

Hmmm that doesn't seem to make a difference. I'll work more on this later.

And thanks for all your work on this! Absolutely loved your Hawaii JSConf talk on custom hooks, server state vs cache state and the like.

[tannerlinsley]

Thanks!