I am trying to run a simple graphql like this. I want to display all data fetched on the screen (for now the console.log would also work). However, everytime I click the button, I get the invalid hook issue and my page crashes.

I checked this :https://reactjs.org/warnings/invalid-hook-call-warning.html but I don't think i am doing any of these things wrong.

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

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 className='main-content'>

0 Answers