Write Your First Query

The component below is supposed to fetch a list of books from a GraphQL API and display them. However, the developer hardcoded the data instead of using Apollo Client's useQuery hook. Your task: 1. Import useQuery and gql from @apollo/client. 2. Define a GET_BOOKS query using a gql tagged template. 3. Replace the hardcoded data with the result of useQuery. 4. Handle loading, error, and data states properly. The GraphQL schema exposes: query { books { id title author } }

Problem Code

import React from 'react';

// TODO: import useQuery and gql from @apollo/client

const BookList = () => {
  // Bug: hardcoded data instead of fetching from GraphQL
  const books = [
    { id: '1', title: 'Hardcoded Book', author: 'Nobody' },
  ];

  return (
    <div>
      <h1>Book List</h1>
      <ul>
        {books.map((book) => (
          <li key={book.id}>
            {book.title} by {book.author}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default BookList;