title: ApolloProvider was not passed a client instance. Make sure you pass in your client via the "client" prop
body: <p>This is the error I am facing &quot;ApolloProvider was not passed a client instance. Make sure you pass in your client via the &quot;client&quot; prop.&quot;</p>
  <p>I am trying to work with Hasura Using Apollo but facing this error you can check the code, I am hiding few crediantials.</p>
  <p>this code is giving me above error for some reason I am already defining client but I dont know why this error, i did try to search and see the code but didn't work.</p>
  <pre><code> import React, { useState ,useEffect} from &quot;react&quot;;
      import &quot;./styles/App.css&quot;;
      import Header from &quot;./components/Header&quot;;
      import { useAuth0 } from '@auth0/auth0-react'
  
  
      // for apollo client
      import {
      ApolloClient,
      InMemoryCache,
      ApolloProvider,
      HttpLink
  
      } from &quot;@apollo/client&quot;;
  
  
      import { setContext } from &quot;@apollo/client/link/context&quot;;
  
      const httpLink = new HttpLink({
      uri: '',
      headers:{
      'x-hasura-admin-secret':''
    },
    
  });
  
  function App() {
   
    const { isAuthenticated, user  } = useAuth0();
  
    // used state to get accessToken through getTokenSilently(), the component re-renders when state changes, thus we have
    // our accessToken in apollo client instance.
    const [accessToken, setAccessToken] = useState(&quot;&quot;);
  
    const [client, setClient] = useState('');
    const { getTokenSilently, loading } = useAuth0();
  
   
  
    // get access token
    useEffect(() =&gt; {
      const getAccessToken = async () =&gt; {
        try {
          const token = await getTokenSilently();
          setAccessToken(token);
          console.log(token);
        } catch (e) {
          console.log(e);
        }
      };
      getAccessToken();
    }, []);
  
  
  
  
    useEffect(() =&gt; {
      const authLink = setContext((_, { headers }) =&gt; {
        const token = accessToken;
        if (token) {
          return {
            headers: {
              ...headers,
              authorization: `Bearer ${token}`,
            },
          };
        } else {
          return {
            headers: {
              ...headers,
            },
          };
        }
      });
  
      const client = new ApolloClient({
        link: authLink.concat(httpLink),
        cache: new InMemoryCache(),
      });
  
  
      setClient(client);
    }, [accessToken]);
  
  
    
    if (loading) {
      return &quot;Loading...&quot;;
    }
  
  
    
  
    return (
      &lt;ApolloProvider client={client}&gt;
             &lt;Header /&gt;
            
      &lt;/ApolloProvider&gt;
    );
  }
  
  export default App;
  </code></pre>