GraphQL查询的无效挂钩调用

Question

我正在尝试运行一个像这样的简单graphql。我想在屏幕上显示所有提取的数据（目前console.log也可以使用）。但是，每次单击按钮时，都会出现无效的挂钩问题，并且页面崩溃。

我检查了此内容：https://reactjs.org/warnings/invalid-hook-call-warning.html 但我不认为我做错任何这些事情。

const ShowUsersQuery = gql`
query {
  users {
    nodes {
      id, firstName, email
    }
    totalCount
  }
}`;

function FindUsers() {
  const { loading, error, data } = useQuery(ShowUsersQuery);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  console.log('Data: ', data.users.nodes.firstName);
}

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <div className='main-content'>
          <button 
          onClick={FindUsers}
          >HELLO</button>
            </div>
          )
    </div>
  );
}