Dynamic Variables

The search component below is supposed to let users type a search term and fetch matching users from the API. However, the query always fetches the same results regardless of what the user types. Your task: 1. Add a search input controlled by useState. 2. Pass the search term as a variable to the useQuery hook. 3. Make sure the query re-executes when the user changes the input. The GraphQL schema exposes: query SearchUsers($term: String!) { searchUsers(term: $term) { id name email } }

Problem Code

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

const SEARCH_USERS = gql`
  query SearchUsers {
    searchUsers {
      id
      name
      email
    }
  }
`;

const UserSearch = () => {
  // Bug: no state for search term, no variables passed to query
  const { loading, error, data } = useQuery(SEARCH_USERS);

  return (
    <div>
      <h1>User Search</h1>
      <input
        type="text"
        placeholder="Search users..."
        onChange={() => {
          // Bug: does nothing with the input value
        }}
      />
      {loading && <p>Searching...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && (
        <ul>
          {data.searchUsers.map((user: { id: string; name: string; email: string }) => (
            <li key={user.id}>
              {user.name} ({user.email})
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default UserSearch;