27

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 ?

;)

1

5 Answers 5

43

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()
3
  • 3
    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.
    – glocore
    Commented Apr 2, 2022 at 14:11
  • that shouldn't be. Can you reproduce that in codesandbox? Would love to take a look :)
    – TkDodo
    Commented Apr 2, 2022 at 17:25
  • 1
    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.
    – Dhaval L.
    Commented Jul 14, 2023 at 5:05
17

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"]);
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.

2

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');
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.