What is the "right way" to pass down query data?

[taschetto]

A) Props drilling?

B) Creating a custom hook to create a new "instance" of the same query and use it down the component tree?

C) Accessing the query cache directly?

D) Other - which one?

[tannerlinsley]

B for subscriptions in components, C for imperative stuff.

[taschetto]

@asvny You can create a custom hook to reuse your query anywhere:

// hooks/useMe.js

import { fetchMe } from 'api/clients/me'
import { useQuery } from 'react-query'

export const useMe = () => useQuery('me', fetchMe)

// api/clients/me.js

import { instance } from 'api'

export const fetchMe = async () => {
  const { data } = await instance.get('/api/auth/me')

  return data
}

This way you can use the useMe hook at multiple components.

[asvny]

Newbie q: Let's say I have data about the current viewer useCurrentViewer which is fetched initially on loading in ViewProvider.

Should I pass the data in a context for sub-components to consume or should the sub-components use the useCurrentViewer hook?
Wouldn't the latter create an extra request for each reference?

BTW .. thanks for your patience.

[TkDodo]

Call the hook every time you need the data. It does create a request in the background, but that will make your data more accurate. If you don’t need that, set a staleTime for your query.

[imteekay]

For anyone looking for the API to get the cached data imperatively, you can use the getQueryState function from the QueryClient.

import { useQueryClient } from 'react-query';

const MyComponent = () => {
  const queryClient = useQueryClient();
  const query = queryClient.getQueryState('THE_KEY');
  // const { data, isFetching, isError, ... } = query;
  ...
};

For reference: docs

[julionav]

I have been trying to do B, but this is triggering another query. I mention this in another discussion #2018