将graphql变量传递给Material UI组件

import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';
import { useQuery } from '@apollo/client';
import { GET_USER } from './graphqlQueries';

const UserProfile = () => {
  const [userId, setUserId] = useState('');
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId },
  });

  const handleUserIdChange = (event) => {
    setUserId(event.target.value);
  };

  const handleButtonClick = () => {
    // 执行GraphQL查询
  };

  return (
    <div>
      <TextField
        label="User ID"
        value={userId}
        onChange={handleUserIdChange}
      />
      <Button variant="contained" color="primary" onClick={handleButtonClick}>
        查询用户
      </Button>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && (
        <div>
          <p>User ID: {data.user.id}</p>
          <p>User Name: {data.user.name}</p>
          {/* 其他用户信息 */}
        </div>
      )}
    </div>
  );
};

export default UserProfile;