react-query - How can I access my queries in multiple components?

Question

I'm just beginning with react query and used it to get a list of books from the server using useQuery in my ListBooks Component

const { data, error, isLoading, isError } = useQuery("books", getAllBooks);

How can I access the list of books in any other component?

I've setted the QueryClientProvider like so :

 const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error);
  },
});

const queryClient = new QueryClient({ queryCache });

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={preset}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

I'm searching for the equivalent of useSelector in Redux to access the data in the redux store.

NearHuscarl · Accepted Answer · 2021-04-14 12:25:23Z

24

react-query manages query caching based on query keys, so in the other component, as long as they're all wrapped inside QueryClientProvider, you just need to call useQuery with the matching key (books), and react-query will return the appropriate data for you.

If you use the same query in multiple places, consider adding a wrapper hook to keep your code clean:

function useAllBooks() {
  return useQuery("books", getAllBooks)
}

function Component1() {
  const {...} = useAllBooks()
  return (...)
}

function Component2() {
  const {...} = useAllBooks()
  return (...)
}

edited Apr 14, 2021 at 12:25

answered Apr 14, 2021 at 12:18

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

medfouedslama Over a year ago

thanks for the quick response @NearHuscarl, so there isn't a "store" in react-query accessible from anywhere like in redux ?

NearHuscarl Over a year ago

By store, do you mean all cache data? @medfouedslama

NearHuscarl Over a year ago

@medfouedslama you can use queryClient.getQueryCache().queries. See this example.

medfouedslama Over a year ago

thank you, that's what i was looking for.

TkDodo Over a year ago

please note that accessing the cache imperatively via the queryClient does NOT create a subscription, so your component will not be re-rendered if you use this during the render function, and it will also not trigger a fetch if the cache is empty. Only useQuery does that, so I'd recommend to always useQuery to read data from the cache.

|

Randall · Accepted Answer · 2024-02-28 08:43:33Z

13

You can get access with custom hook useGetFetchQuery and useQueryClient

import { useQueryClient } from "react-query";

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

    return queryClient.getQueryData(key);
};

And in component just write like this

const data = useGetFetchQuery("key from useQuery or useMutation");

UPD

As correctly note @Tony Tai Nguyen with new (v5) release of react-query query keys should be an array.

const data = useGetFetchQuery(["query key"]);

edited Feb 28, 2024 at 8:43

answered Apr 14, 2022 at 21:51

Randall

2,8976 gold badges44 silver badges76 bronze badges

4 Comments

Janis Basis Basovs Over a year ago

This is the cleaniest approach to reach for allready fetched 'data'. But the variable 'data' is not reactive - That means that if the data is refetched/updated and so on - the 'data' variable will not update/ be updated... :( Is there a way to subscribe to data from a specific query?

Shivam purbia Over a year ago

this is returning undefined for me.

Mazan Labeeb Over a year ago

This function (useGetFetchQuery) will not update when query gets invalidated or udpated.

Tony Tai Nguyen Over a year ago

Note: if you are using the latest version of react query v5, you have to wrap the key around an array queryClient.getQueryData([key]);

Collectives™ on Stack Overflow

react-query - How can I access my queries in multiple components?

2 Answers 2

6 Comments

UPD

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

UPD

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related