React Query - unable to access the data via 'getQueryData', always returns undefined

Question

I am trying out React Query for the first time and I wrote this:

export function Component(): JSX.Element {
  const queryClient = new QueryClient()

  const { data } = useQuery<DataType>({
    queryKey: "myKey",
    queryFn: () => ....,
  })

  const sameData: DataType| undefined = queryClient.getQueryData("myKey")

  return (
    <>
      {console.log(data)}
      {console.log(sameData)}
      <p>Loaded, see console for values.</p>
    </>
  )
}

The data object is created as expected, but I cannot seem to make sameData return anything other than undefined. I know this means that React Query isn't finding my key. Does anyone have any ideas on how to fix this?

TkDodo · Accepted Answer · 2021-04-06 16:38:31Z

8

You’re creating a new QueryClient in each render, so you’ll get a new cache. Have a look at the example on the front page of the docs: https://react-query.tanstack.com/overview

You need a stable queryClient, and put it in a QueryClientProvider

answered Apr 6, 2021 at 16:38

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

3 Comments

clev Over a year ago

Thanks! I understand now - super helpful!

MacK Over a year ago

Great answer - to add on top of this - make sure the query client is global outside any JSX component or at the root of it. For example on next.js I had the query client inside the Provider function component - while it works during development it breaks on static site generation. Creating the client on the root or simply outside the component solves any issue with it.

TkDodo Over a year ago

in nextjs, if you create the client outside of the component, it will be shared between requests and users on the server. that's why the recommendation with ssr to create it in useState: tanstack.com/query/latest/docs/framework/react/guides/…

dennis · Accepted Answer · 2022-09-16 05:42:23Z

6

like the above answer explained

const queryClient = new QueryClient()

will create a new instance on every render

the provided useQueryClient() hook returns the current instance

const queryClient = useQueryClient()

answered Sep 16, 2022 at 5:42

dennis

1091 silver badge5 bronze badges

Collectives™ on Stack Overflow

React Query - unable to access the data via 'getQueryData', always returns undefined

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related