When it comes to managing API calls, React Query — or TanStack Query as it’s also known — stands out as a remarkable innovation. This library, in my view, is truly ahead of its time and it’s become a central part of my toolbox for any future projects involving API calls. I’ve spent a considerable amount of time exploring useQuery, useMutation, and useInfiniteQuery, among other features. However, for today’s discussion, we’re narrowing our focus to explore in depth the two critical hooks offered by this library: useQuery and useMutation.
Heads up! This documentation is tailored for TanStack Query v4. The developers have recently released TanStack Query v5. Explore the new version here: https://tanstack.com/query/v5/docs/react/reference/useQuery
In an earlier blog post, I embarked on a detailed exploration to distinguish between the return properties from the library — isLoading, isFetching, and isRefetching. If you find yourself still grappling with these concepts, I highly recommend revisiting that post for a refresher. You can access it here: isLoading vs isFetching.
How To Use It?
Let’s start with installing the library into our project via npm, yarn or pnpm:
$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn…