title: React Hook error when calling the Apollo useQuery()
body: <p>i am getting the below error while i am trying to use the useQuery(). Plese let me know if you need additional details..</p>
  
  <blockquote>
    <p>Error: Invalid hook call. Hooks can only be called inside of the body
    of a function component. This could happen for one of the following
    reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app See  for tips about how to debug and
    fix this problem.</p>
  </blockquote>
  
  <p>my code is as below...</p>
  
  <p><strong>get-characters-action.js</strong></p>
  
  <pre><code>import React from "react";
  import * as ACTION_TYPES from "./../constants/action-types";
  import { useQuery } from "@apollo/react-hooks";
  import gql from 'graphql-tag';
  
  export const getCharactersSuccess = (data) =&gt; {
      return {
          type:ACTION_TYPES.LOAD_CHARACTERS_SUCCESS,
          data
      }
  }
  
  export const getCharactersInProgress = () =&gt; {
      return {
          type:ACTION_TYPES.LOAD_CHARACTERS_INPROGRESS
      }
  }
  
  export const getCharactersError = (error) =&gt; {
      return {
          type:ACTION_TYPES.LOAD_CHARACTERS_ERROR,
          error
      }
  }
  
  const GET_CHARACTERS =gql`
  {
      allPersons {
          name
          gender
          homeworld {
              name
          }
          species {
              name
              language
              classification
          }
      }
  }`;
  
  export const useGetCharacters= () =&gt; {
      const { loading, error, data } = useQuery(GET_CHARACTERS);
  
      if(loading) {
          getCharactersInProgress();
      }
  
      if(error) {
          getCharactersError(error);
      }
  
      if(data) {
          getCharactersSuccess(data);
      }
  }
  </code></pre>
  
  <p><strong>context-state-config.js</strong></p>
  
  <pre><code>export const ContextState = (props) =&gt; {
      // const [stateReducer, dispatchReducer] = useReduceWithLogger(Reducer.AppLoadingReducer,Reducer.initialState);
      const [stateReducer, dispatchReducer] = useReducer(Reducer.MainReducer,Reducer.initialState);
  
      const handleDispatchAppLoadingInProgress = () =&gt; {
          dispatchReducer(GENERIC_ACTION.appLoadingInprogress());
      }
  
      const handleDispatchAppLoadingSuccess = () =&gt; {
          dispatchReducer(GENERIC_ACTION.appLoadingSuccess());
      }
  
      // const getCharacters = () =&gt; {
      //     dispatchReducer(GET_CHARACTERS_ACTION.useGetCharacters());
      // }
  
      const graphqlClient = new ApolloClient({
          uri: "https://swapi.graph.cool/"
      });
  
      return (
          &lt;div&gt;
              &lt;ApolloProvider client={graphqlClient}&gt;
                  &lt;Context.Provider
                      value={{
                          // reducer
                          isAppReady: stateReducer.isAppReady,
                          dispatchAppLoading: () =&gt; handleDispatchAppLoadingInProgress(),
                          dispatchAppLoaded: () =&gt; handleDispatchAppLoadingSuccess(),
                          // get character action
                          getCharacters: () =&gt; dispatchReducer(GET_CHARACTERS_ACTION.useGetCharacters())
                      }}
                  &gt;
  
                          {
                              props.children
                          }
                  &lt;/Context.Provider&gt;
              &lt;/ApolloProvider&gt;
          &lt;/div&gt;
      )
  }   
  </code></pre>