usequery.js

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

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="book" onChange={onBookSelected}>
      {data.books.map(book => (
        <option key={book.id} value={book.title}>
          {book.title}
        </option>
      ))}
    </select>
  );
}