如何在按钮点击时使用graphql useQuery方法查询或手动查询

import { useQuery, gql } from 'apollo-boost';

const GET_DATA = gql`
  query GetData($param: String!) {
    getData(param: $param) {
      id
      name
      // 其他字段
    }
  }
`;

function MyComponent() {
  const [param, setParam] = useState('');
  const { loading, error, data } = useQuery(GET_DATA, {
    variables: { param },
  });

  const handleClick = () => {
    // 在按钮点击时执行查询
    // 可以根据需要设置param的值
    setParam('example');

    // 手动执行查询
    // useQuery会自动执行查询，但你也可以手动调用refetch方法来执行查询
    // refetch方法会重新发送查询请求，并更新查询结果
    // refetch方法可以在任何需要的地方调用，例如按钮点击事件中
    // refetch方法还可以接收参数，用于更新查询的变量
    // 例如：refetch({ variables: { param: 'newParam' } });
    // data会自动更新，展示最新的查询结果
    refetch();
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <button onClick={handleClick}>查询数据</button>
      {data && (
        <ul>
          {data.getData.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}