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

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

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
}

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
}

Hint

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

Practice

1. What does the useQuery hook in GraphQL primarily do inside a React component?

easy

A. Fetches data from a GraphQL server and provides loading and error states

B. Updates data on the GraphQL server

C. Deletes data from the GraphQL server

D. Creates a new GraphQL schema

Solution

1. Step 1: Understand the purpose of useQuery

   The useQuery hook is designed to run a GraphQL query and fetch data.

2. Step 2: Recognize the states it provides

   It also provides loading and error states to manage UI feedback during data fetching.

3. Final Answer:

   Fetches data from a GraphQL server and provides loading and error states -> Option A

4. Quick Check:

   useQuery fetches data = A [OK]

Hint: useQuery fetches data and manages loading/error states [OK]

Common Mistakes:

• Confusing useQuery with mutation hooks
• Thinking useQuery updates or deletes data
• Assuming useQuery creates schemas

2. Which of the following is the correct syntax to use the useQuery hook with a query named GET_USERS?

easy

A. useQuery(GET_USERS).then(response => ...);

B. const { data, loading, error } = useQuery(GET_USERS);

C. const data = useQuery(GET_USERS);

D. const { data, error } = useQuery(GET_USERS, loading);

Solution

1. Step 1: Recall the useQuery return structure

   The useQuery hook returns an object with data, loading, and error properties.

2. Step 2: Match the correct destructuring syntax

   const { data, loading, error } = useQuery(GET_USERS); correctly destructures these properties from the hook call.

3. Final Answer:

   const { data, loading, error } = useQuery(GET_USERS); -> Option B

4. Quick Check:

   Destructure data, loading, error = C [OK]

Hint: Destructure data, loading, error from useQuery call [OK]

Common Mistakes:

• Not destructuring loading state
• Using promises with useQuery (it's a hook)
• Passing loading as argument

3. Given this code snippet:

const { data, loading, error } = useQuery(GET_POSTS);
if (loading) return 'Loading...';
if (error) return 'Error!';
return data.posts.length;

What will be the output if data.posts contains 5 posts?

medium

A. 5

B. 'Error!'

C. undefined

D. 'Loading...'

Solution

1. Step 1: Check loading and error conditions

   The code returns 'Loading...' if loading is true and 'Error!' if error exists. Since data.posts has 5 posts, loading is false and error is null.

2. Step 2: Return the length of posts array

   With no loading or error, the code returns data.posts.length, which is 5.

3. Final Answer:

   5 -> Option A

4. Quick Check:

   data.posts.length = 5 [OK]

Hint: Check loading/error first, then return data length [OK]

Common Mistakes:

• Ignoring loading state and expecting data immediately
• Confusing error with data
• Returning undefined if data is not checked

4. Identify the error in this code using useQuery:

const { data, loading, error } = useQuery(GET_COMMENTS);
if (loading) return ;
if (error) return 
Error occurred
;
return data.comments.map(c => <p>{c.text}</p>);

medium

A. The map function should use curly braces instead of parentheses

B. The component returns JSX before checking loading

C. The query name GET_COMMENTS is not imported

D. No error; code is correct

Solution

1. Step 1: Check for common mistakes in useQuery usage

   The code uses GET_COMMENTS but does not show it being imported or defined, which is required.

2. Step 2: Verify JSX and map usage

   The JSX and map syntax are correct; returning JSX conditionally is valid.

3. Final Answer:

   The query name GET_COMMENTS is not imported -> Option C

4. Quick Check:

   Missing query import = A [OK]

Hint: Always import your GraphQL queries before useQuery [OK]

Common Mistakes:

• Forgetting to import the query
• Returning JSX before loading check
• Incorrect map syntax for JSX

5. You want to fetch a list of users but only display them after the data is fully loaded. Which pattern correctly uses useQuery to achieve this?

hard

A. const { data } = useQuery(GET_USERS); if (!loading) return data.users.map(u => u.name); else return 'Loading...';

B. const { loading } = useQuery(GET_USERS); if (loading) return data.users; else return 'Loading...';

C. const { data } = useQuery(GET_USERS); return data.users.map(u => u.name);

D. const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name);

Solution

1. Step 1: Understand loading state usage

   We must show 'Loading...' while data is loading, so check if loading is true first.

2. Step 2: Return user list only after loading is false

   const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name); correctly returns 'Loading...' if loading is true, else maps over data.users.

3. Final Answer:

   const { data, loading } = useQuery(GET_USERS); if (loading) return 'Loading...'; return data.users.map(u => u.name); -> Option D

4. Quick Check:

   Check loading first, then return data = B [OK]

Hint: Always check loading before accessing data [OK]

Common Mistakes:

• Accessing data before loading is false
• Returning data when loading is true
• Ignoring loading state completely