title: How to implement Search Function in React-GraphQL using React-Hooks and Apollo Client?
body: <p>I try to implement the Search function into my management system using React-Hooks and GraphQL-Apollo Client. While the interface is shown successfully, when I press the 'Search' button it came out an error which named: </p>
  
  <blockquote>
    <p>Invalid hook call. Hooks can only be called inside of the body of a function component.</p>
  </blockquote>
  
  <p>I'm pretty sure the <code>useQuery</code> is being called inside a function, so I do not understand what will cause this. The other function such as display all users and add new users are working fine.</p>
  
  <p>I have tried a couple of ways to implement the search function and search around online while still couldn't get it solve. This is my first time encounters React-Hooks too. </p>
  
  <p>Here is my current code in the <code>searchUser</code> component</p>
  
  <pre><code>import React from 'react'
  import {useQuery} from 'react-apollo-hooks';
  import {searchUserQ} from '../queries/queries';
  
  const SearchUserForm = () =&gt; {
      let name = '';
      let content;
  
  return (
      &lt;div id="edit-user"&gt;
          &lt;div className="field"&gt;
              &lt;label htmlFor="name"&gt;Search UserName&lt;/label&gt;
              &lt;input type="text" id="name" onChange={ (event) =&gt; {
                  name = event.target.value }}/&gt;
              &lt;button onClick={(event) =&gt; {
                  event.preventDefault();
                  const { data, loading, error } = useQuery(searchUserQ, {
                      variables: { name: name },
                      suspend: false
                  });
  
                  if (loading) {
                      content = &lt;p&gt;Loading User...&lt;/p&gt;
                  }
  
                  if (error){
                      console.log(`Error Occur: ${ error }`);
                      content = &lt;p&gt;Error Occur!&lt;/p&gt;
                  }
  
                  content = data.users.map(user =&gt; (
                      &lt;p key={user.id}&gt;Username: {user.name}    ID: {user.id}&lt;/p&gt;
                  ));
              }}&gt;
                  Submit
              &lt;/button&gt;
              &lt;p&gt;{ content }&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  )
  }
  
  export default SearchUserForm;
  </code></pre>
  
  <p>Can anyone help with this?</p>
  
  <p>One more question is that my <code>data</code> seems to return <code>undefined</code> everytime I execute the query. Is there something wrong with my query?
  Here are the query:</p>
  
  <pre><code>const searchUserQ = gql`
  query User($name: String!){
      user(name: $name){
          id
          name
          email
      }
   }
  `;
  </code></pre>
  
  <p>Thanks and appreciate on the help!</p>