在React Apollo中动态选择查询变量

import { useLazyQuery } from '@apollo/client';
import { gql } from 'graphql-tag';

const GET_DATA = gql`
  query GetData($id: ID!) {
    data(id: $id) {
      // 查询的字段
    }
  }
`;

const MyComponent = () => {
  const [getData, { loading, data }] = useLazyQuery(GET_DATA);

  const handleGetData = (id) => {
    getData({ variables: { id } });
  };

  return (
    <div>
      <button onClick={() => handleGetData(1)}>获取数据1</button>
      <button onClick={() => handleGetData(2)}>获取数据2</button>
      {loading && <p>加载中...</p>}
      {data && <p>{data}</p>}
    </div>
  );
};

export default MyComponent;