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,