Welcome to the first lesson of our course, "Fetching Catalog Data". In this lesson, we will focus on how to fetch catalog data from an API and display it in our React app.

In a real-world catalog application, such as a library or bookstore, the list of items (like books) is always changing. New books are added, and old ones might be removed. Because of this, we need a way to fetch the latest data from our backend API and show it to users in real time.

In this lesson, you’ll fetch book catalog data from your API and render it efficiently. We’ll wire providers, define types, create an API helper, and then compare two approaches:

1. TanStack Query’s useQuery (recommended), and
2. a manual useEffect + fetch implementation (for contrast).

You’ll learn why useQuery scales better—caching, retries, de-duplication, background refetch, pagination support—while also seeing how to implement the same flow with plain hooks and what trade-offs you accept.

TanStack Query (formerly known as React Query) is a popular library that helps us fetch, cache, and update data in React applications. It makes handling data from APIs much easier and more reliable. In this lesson, you will learn how to use TanStack Query to fetch and display a list of books in your catalog.

We'll discuss the runtime “plumbing” our app uses to retrieve and display data: the Query Client provider, shared types, and an API module that calls /books. Each file is shown separately with an explanation.

Explanation

• QueryClient is the app-wide cache/manager for queries.
• QueryClientProvider exposes TanStack Query to your entire tree (so useQuery works anywhere below it).
• AuthProvider remains wrapped around your routed app to supply auth state.
• RouterProvider renders pages that will now consume queries.

This placement ensures every page and component can leverage caching, retries, and background refetching provided by TanStack Query.

Explanation

TanStack Query is a library that helps you manage data fetching in React apps. Instead of writing all the logic for fetching, caching, and updating data yourself, TanStack Query provides hooks that do most of the work for you.

• Why use it?
  • Caching & de-duplication: Re-using data across screens without re-fetching.
  • Stale-While-Revalidate: Show cached results instantly, then refresh in background.
  • Retries & recovery: Built-in retry on transient failures.
  • Devtools & diagnostics: Inspect cache, queries, and states quickly.

The most important hook you will use is useQuery. This hook lets you fetch data from an API and gives you information about the loading, error, and success states.

Local install (if developing on your machine):

CodeSignal environment: Already pre-configured. You don’t need to install or configure anything—just import and use.

Let’s see how to use TanStack Query’s useQuery hook to fetch and display books in our catalog.

Here is the main code for our catalog page:

Let’s break down what’s happening:

• We use the useQuery hook to fetch books.
  • queryKey: ["books"] is a unique key for this query.
  • queryFn: getBooks tells TanStack Query which function to call to fetch the data.
• The hook returns several values:
  • isLoading: true while the data is being fetched.
  • isError: if there was an error fetching the data.

You can build the same screen with React’s built-in hooks. This is instructive, but you’ll re-implement loading/error states, caching, and background updates yourself. While it works, relying on useEffect plus fetch puts a lot of responsibility on you as the developer. Every time you fetch data this way, you must remember to set up local state for loading and error, write a try/catch/finally block, and handle cleanup with an AbortController. This creates a lot of repetitive boilerplate code.

In this lesson, you learned how to use TanStack Query to fetch and display catalog data in a React app. We covered:

• Why dynamic data is important for a catalog app.
• How our app and data are set up.
• What TanStack Query is and why it’s useful.
• How to use the useQuery hook to fetch and display books, including handling loading and error states.

You are now ready to practice these concepts. In the next exercises, you will get hands-on experience fetching data and displaying it on your own catalog page. Try experimenting with the code and see how changing different parts affects the output. Good luck!