Expose queryClient to queryOptions

[vezaynk]

I have queries that build on top of other queries, and it's currently difficult to keep passing around a reference to queryClient.

To take an example from this page (https://tanstack.com/query/latest/docs/framework/react/guides/query-options), I'd like it if I could do something like this:

function groupOptions(id: number) {
  return queryOptions(queryClient => ({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    onSuccess: () => {
       // invalidate some other query
       queryClient.invalidateQueries(...)
    }
    staleTime: 5 * 1000,
  }))
}

Achieving the same today, requires a function signature like groupOptions(queryClient: QueryClient, id: number), and passing queryClient through the whole function stack just to trigger invalidation within a context that ostensibly is already working with the desired queryClient instance.

A similar request was addressed here, for adding it to queryContext, but this is a higher-level request that doesn't need to affect queries/observers/etc. It should be entirely static. #3151

I imagine it could be implemented something like:

if (typeof queryOptions === 'function')
   queryOptions = queryOptions(queryClient)

[TkDodo]

There is nowhere we could get the queryClient from, as you create the client to use. In React, it’s available through the <QueryClientProvider>, but that means we need access to a react context to get the client, so we’d need a hook for that.

[vezaynk]

Sorry, I didn't express myself well here I think.

What I meant was that currently, every call looks roughly look like this:

const options = groupOptions({ ... })

// Can use them like this, with implicit `useQueryClient`
useQuery(options);

// Can use them like this, with explicit reference to queryClient instance
queryClient.fetchQuery(options);

The implicit nature of not needing to write useQuery(queryClient, options) is great, because it means that I don't need to pass queryClient down to run a query.

However, I still end up needing to capture an explicit reference to it if I want to re-use the same queryClient within the options (queryFn, onSuccess, etc).

function groupOptions(id: number) {
  return queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    onSuccess: () => {
       // invalidate some other query
       queryClient.invalidateQueries(...) // Where do I get this?
    }
    staleTime: 5 * 1000,
  })
}

What I could do here, is to write my own factory and wrap queryOptions:

function groupOptions(id: number) {
  return (queryClient: QueryClient) => queryOptions({
    queryKey: ['groups', id],
    queryFn: () => fetchGroups(id),
    onSuccess: () => {
       // invalidate some other query
       queryClient.invalidateQueries(...)
    }
    staleTime: 5 * 1000,
  })
}

And then write code like this:

const options = groupOptions(queryClient)({ ... })

// Can use them like this, with implicit `useQueryClient`
useQuery(options);

// Can use them like this, with explicit reference to queryClient instance
queryClient.fetchQuery(options);

And this works fine, but it feels bad because I end up needing to do this every time, despite queryOptions having access to queryClient at the time that its actually consumed. Additionally, I'd like a standard way of invoking my queryOptions constructors without caring whether they need to invalidate queries or not.

[TkDodo]

your example is a bit weird because there is no onSuccess on queryOptions. We do pass the queryClient into the queryFn