Allow access to `queryClient` / `variables` in `initialData` / `placeholderData` fns

[V1OL3TF0X]

Summary

Small change, but imo with great DX: inject variables and queryClient into initialData / placeholderData functions.

Motivation

With usual REST API structure, it's not uncommon to have this type of endpoints:
/teams - gets all teams
/teams/${id} - gets specific team data
With that, I found it useful to do this query structure

export const useAllTeams = () => useQuery({
    queryKey: ['teams'],
   queryFn: () => client.get('/teams'),
});

export const useTeam = (id: string) => {
    const queryClient = useQueryClient();
    return useQuery({
        queryKey: ['teams', { id }],
        queryFn: () => client.get(`/teams/${id}`),
        initialData: () => queryClient.getQueryData(['teams']).find(team => team.id === id),
    })
}

Unfortunately, with how router / createQuery are currently implemented, there's no way to recreate that.

Is there some room to create / approve such change? I could implement it and submit a PR, if you see it fit the package

[a29paul]

This is a very hacky workaround and I've still yet to try it out extensively and see if there's any potential issues that I've introduced with this. Will get back to you guys on this:

export const useUser = (
  options: Omit<
    CreateQueryOptions<Response, Variables, AxiosError>,
    'queryKey' | 'fetcher'
  >,
) =>
  createQuery<Response, Variables, AxiosError>({
    ...options,
    queryKey: ['user'],
    fetcher: ({ userId }) => fetchUser(client, { userId }),
    initialData: () => {
      const users = queryClient.getQueryData(['users']) as User[] | undefined;
      return users?.find(
        (user: User) => user.id === options.variables?.userId,
      );
    },
  })();

Ideally we update the library directly, but unfortunately I'm very sleep deprived right now.

Update: Seems to work fine. Pulls from cache and don't see anything unusual with the queries in the dev tools console.

[V1OL3TF0X]

Yeah, I know I could do it like this; in my case I want to declare all wueries with the router, which means I can't pull in queryClient from context when defining options. I'll sketch something up and will get back to you with a PR, if that's okay 😀

EDIT: I played around a bit and it sees it's not really achievable, since query creation also happens outside a hook, which means it's outside of React. In theory, there could be a second version of defining added to allow for that (by making getOptions named useOptions, which would allow to inject the queryClient there), but since that's far off of the scope, I'm not sure if you'd like it