Access data already fetched with react query in other component

Question

I'm new with React Query, and I have a question, I've being looking on the documentation but I can't find how should I access the data that is already fetched with useQuery() from another component.

I'm fetching const query = useQuery('todos', fetchFunction) from HomeComponent and I want to access that data that is already fetched in the TodosComponent. Is ok to fetch the data again with const query = useQuery('todos', fetchFunction) or is there anything like redux that the data is in something like Store so I can access it from any place ?

;)

Cabaret

Does this answer your question? how can i access my queries from react-query? – Curriculum

Answer 1

It is definitely best to just call useQuery again, because it's the only thing that creates a subscription, so your component will re-render correctly if new data comes in. You can do it imperatively with queryClient.getQueryData('todos'), but it doesn't create a subscription.

Note that useQuery will not always trigger a fetch of the data. You can customize staleTime to tell react-query how long a resource is considered fresh, and as long as it's fresh, data will come from the internal cache only. If you set staleTime: Infinity, there will only be one fetch, and all other invocations will only read from the cache (apart from manual invalidations and garbage collection).

It's also best to extract useQuery calls to a custom hook:

const useTodos = () => useQuery('todos', fetchFunction)

HomeComponent:

const { data } = useTodos()

TodosComponent:

const { data } = useTodos()

Vanna

Thanks! I wonder why it only works when I create a wrapper hook like you suggested? When I used useQuery directly (without the wrapper hook), it made separate API requests for each component, despite using the same query key and setting staleTime: Infinity. – Ilario

that shouldn't be. Can you reproduce that in codesandbox? Would love to take a look :) – Vanna

How can we get previously passed parameters in other components? e.g. I have a search where I integrated this useQuery hook but in another component, I just want to subscribe and use the latest returned data instead of managing search and filter options. – Flavoprotein

Answer 2

You can create custom hook with useQueryClient

import { useQueryClient } from "react-query";

export const useGetFetchQuery = (name) => {
    const queryClient = useQueryClient();

    return queryClient.getQueryData(name);
};

And in component just write like this

const data = useGetFetchQuery(["todos"]);

Sidoon

Answer 3

You can use options { refetchOnMount: false } to use it in many other components, it will render only once and make only one api call.

Cyrene

Answer 4

UPDATE in React Query V5:

We can use the getQueryData from useQueryClient to get the already fetched data.

import { useQueryClient } from "react-query";

// First create a helper function
export const useGetCachedQueryData = (key) => {
    const queryClient = useQueryClient();
    
    // Make sure that the key is wrapped in an array for this to work
    const data = queryClient.getQueryData([key]);
    return data;
};

Then in your component make this call to get the data again:

const todoData = useGetCachedQueryData('todos');

Chamkis

Answer 5

you can use usemutationstate like this

const data = useMutationState({
  filters: { mutationKey },
  select: (mutation) => mutation.state.data,
})

https://tanstack.com/query/latest/docs/framework/react/reference/useMutationState

Yah