React Query – Essentials course errata

I’m learning React Query, specifically by going through Tanner Linsley’s React Query – Essentials course on Teachable.

I had heard that there are some version-related inconsistencies in the course, and sure enough, I’ve run into them. The associated repo is also out-of-date, so no help there.

I’m documenting them here as I encounter them in case it can save someone else some error-chasing.

Also, I’ve found the “Migrating to React Query 3” documentation very helpful; once I have an idea what the issue is, it often shows “the new code” that I need to fix it.

Queries → Basic Queries

As soon as I tried adding the query, I got the following error:

No QueryClient set, use QueryClientProvider to set one

As you might guess, this means you have to use something called QueryClientProvider. My initial attempts to import and use it within the existing code didn’t work well, so I simply copied the sample code from the React Query docs and modified it to function like the course code.

Queries → React Query Devtools

In React Query 3, the devtools are included in the main package. Instead of installing react-query-devtools via Yarn as shown in the video, simply import them like so:

import { ReactQueryDevtools } from 'react-query/devtools'

Otherwise, you’ll get the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'queries')

Queries → Disabling Queries

When using the enabled config option, I got the following error:

Uncaught Error: Expected enabled to be a boolean

That’s because in version 3, the value is required to be a boolean. Instead of passing pokemon as the value (which is a string), I’m casting it to a bool by passing it like so:

enabled: !!pokemon,