Inconsistency in docs regarding QueryObserver and friends

[lgenzelis]

Maybe this is an error in the docs, or just me missing a point.
In the docs for QueryObserver, we see that we create a new observer as

new QueryObserver(queryClient, { queryKey: ['posts'] })

The only thing required is the queryKey, which makes sense to me.

However, in the docs for QueriesObserver , we need also the queryFn:

new QueriesObserver(queryClient, [
  { queryKey: ['post', 1], queryFn: fetchPost },
  { queryKey: ['post', 2], queryFn: fetchPost },
])

And lastly, InfiniteQueryObserver apparently even requires getNextPageParam and getPreviousPageParam:

new InfiniteQueryObserver(queryClient, {
  queryKey: ['posts'],
  queryFn: fetchPosts,
  getNextPageParam: (lastPage, allPages) => lastPage.nextCursor,
  getPreviousPageParam: (firstPage, allPages) => firstPage.prevCursor,
})

Does anyone know why we need different kind of parameters for each kind of observer?

[TkDodo]

Does anyone know why we need different kind of parameters for each kind of observer?

They don't, these are just examples. You can setup an observer with only the queryKey - that's the only required argument. But if you don't have a queryFn set globally then, it will die. So mostly, you'll need queryKey + queryFn.

useInfiniteQuery mostly does nothing without getNextPageParam, and this will be required on type level in v5, as well as an additional defaultPageParam option. You can read about that changes here:

• RFC: Infinite Queries for v5 #4854

---

basically, options you pass to an Observer are the same as you'd pass to useQuery or useQueries / useInfiniteQuery in react, because the react hooks create observers.

[lgenzelis]

Thanks! So, this is a total misunderstanding from my side 😅 And it gets worse, you're saying

if you don't have a queryFn set globally then, it will die. So mostly, you'll need queryKey + queryFn.

But I don't have a global queryFn and I don't see any issues in my observers. For context, my usual flow here is

• having a react componente which does useQuery({ queryKey: 'my-query', queryFn })
• in another part of the application, outside of react, setting an observer like new QueryObserver(queryClient, { queryKey: 'my-query' }); (no queryFn here), to be able to detect changes in the query.

I'm guessing you're talking about just setting the QueryObserver, without the react part. But I don't even know what that would do tbh 😮 Is there any reference about QueryObserver that I should read?

[TkDodo]

in another part of the application, outside of react, setting an observer like new QueryObserver(queryClient, { queryKey: 'my-query' }); (no queryFn here), to be able to detect changes in the query.

as long as you have one observer with a queryFn, that one will be taken. useQuery also creates an observer. But if that one unmounts, and you only have the one without a queryFn, any fetch will fail

[lgenzelis]

K, thanks @TkDodo !