useQuery hook in GraphQL - Mini Project: Build & Apply

Using the useQuery Hook to Fetch GraphQL Data

📖 Scenario: You are building a simple React app that shows a list of books from a GraphQL API. You want to fetch the book data using the useQuery hook.

🎯 Goal: Learn how to use the useQuery hook to fetch data from a GraphQL endpoint and display it.

📋 What You'll Learn

Create a GraphQL query named GET_BOOKS to fetch id and title of books

Use the useQuery hook with GET_BOOKS to fetch data

Handle loading and error states

Display the list of book titles when data is loaded

💡 Why This Matters

🌍 Real World

Fetching data from a GraphQL API is common in modern web apps to show dynamic content like books, products, or user info.

💼 Career

Understanding useQuery is essential for frontend developers working with React and GraphQL to build efficient and responsive user interfaces.

1

Define the GraphQL query

Create a GraphQL query called GET_BOOKS using the gql tag. The query should fetch id and title fields from books.

GraphQL

# Define the GET_BOOKS query using gql
# Your code here

Need a hint?

Use gql`...` to define the query. Include id and title inside books.

2

Use the useQuery hook

Import useQuery from @apollo/client. Use useQuery(GET_BOOKS) inside your component to get loading, error, and data.

GraphQL

import { gql, useQuery } from '@apollo/client';

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

// Use useQuery hook to fetch data
// Your code here

Need a hint?

Call useQuery(GET_BOOKS) and destructure loading, error, and data.

3

Handle loading and error states

Inside the BooksList component, add conditional returns: if loading is true, return <p>Loading...</p>; if error exists, return <p>Error!</p>.

GraphQL

import { gql, useQuery } from '@apollo/client';

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

function BooksList() {
  const { loading, error, data } = useQuery(GET_BOOKS);

  // Add loading and error handling
  // Your code here
}

Need a hint?

Use simple if statements to return loading and error messages.

4

Display the list of books

After handling loading and error, return a <ul> element that maps over data.books. For each book, render a <li> with the book's title and use book.id as the key.

GraphQL

import { gql, useQuery } from '@apollo/client';

const GET_BOOKS = gql`
  query GetBooks {
    books {
      id
      title
    }
  }
`;

function BooksList() {
  const { loading, error, data } = useQuery(GET_BOOKS);

  if (loading) return Loading...;
  if (error) return Error!;

  // Render list of book titles
  // Your code here
}

Need a hint?

Use data.books.map to create list items with keys and titles.