Fetching Catalog Data

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.

// src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { AuthProvider } from './features/auth/AuthContext';
import { router } from './routes/router';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
if (!container) throw new Error('Root container missing');
const root = ReactDOM.createRoot(container);

const queryClient = new QueryClient();
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <AuthProvider>
        <RouterProvider router={router} />
      </AuthProvider>
    </QueryClientProvider>
  </React.StrictMode>
);

reportWebVitals();

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.

// src/lib/types.ts
export interface Book {
  id: string;
  title: string;
  author: string;
  coverImageUrl?: string;
  uploadedAt: string;
}

Explanation

• Book models the server representation your UI expects.
• PaginatedBooksResponse matches the API’s paginated envelope for /books (list + counts). Typed responses make your UI and data transforms safer.

// src/api/books.ts
import { apiClient } from "./client";
import { Book } from "../lib/types";

export interface PaginatedBooksResponse {
  items: Book[];
  total: number;
  page: number;
  pageSize: number;
}

export const getBooks = async (): Promise<PaginatedBooksResponse> => {
  const { data } = await apiClient.get("/books");
  return data.data;
};

Explanation

• The backend responds with an envelope { success, data, ... }.

• We unwrap the data so components consume a typed PaginatedBooksResponse directly.

• Centralizing this in api/books.ts avoids duplicating response-shape knowledge in your components.

• The index.tsx file sets up our React app, including the router and TanStack Query provider.

• The Book interface defines the shape of a book object.

• The getBooks function is used to fetch a list of books from our API.

This setup ensures our app is ready to fetch and display data.