title: put JWT token in header for Apollo Client
body: <p>Currently if I run graphql mutations from my react app, they don't work because the authorisation token is missing from the header. I have an admin secret that I want to insert into the header but I am not sure how to do so.</p>
  <pre><code>import { ApolloClient } from 'apollo-client';
  import { InMemoryCache, NormalizedCacheObject } from 'apollo-cache-inmemory';
  import { HttpLink } from 'apollo-link-http';
  import { ApolloProvider } from '@apollo/react-hooks';
  ....
  const cache = new InMemoryCache();
  const link = new HttpLink({
    uri: 'https://api/graphql',
  });
  
  const client: ApolloClient&lt;NormalizedCacheObject&gt; = new ApolloClient({
    cache,
    link,
  });
  ReactDOM.render(
    &lt;ThemeProvider theme={theme}&gt;
      &lt;CssBaseline /&gt;
      &lt;ApolloProvider client={client}&gt;
        &lt;BrowserRouter&gt;
          &lt;App /&gt;
        &lt;/BrowserRouter&gt;
      &lt;/ApolloProvider&gt;
    &lt;/ThemeProvider&gt;,
    document.querySelector('#root'),
  );
  </code></pre>
  <p>I also have this in my Apollo.config.js file:</p>
  <pre><code>module.exports = {
      client: {
        service: {
          url: 'https://api/graphql',
          headers: {
            'x-hasura-admin-secret': 'xxx',
          },
        },
        excludes: ['src/graphql/index.tsx'],
      },
    };
  </code></pre>
  <p>How can I include the token in the header? It would be something like this:</p>
  <pre><code>'Authorization', `Bearer ${token}
  </code></pre>
  <p>The same API was used in another React Native project too and they had obtained the token like this:</p>
  <pre><code>import auth from '@react-native-firebase/auth';
  ...
  const token = await auth().currentUser?.getIdToken();
  </code></pre>
  <p>But I don't get how to achieve this in react.</p>
  <p><strong>I also tried it like this:</strong></p>
  <pre><code>import { createHttpLink, InMemoryCache, ApolloClient } from '@apollo/client';
  import { setContext } from '@apollo/client/link/context';
  
  const httpLink = createHttpLink({
    uri: 'https://graphql',
  });
  
  const authLink = setContext((_, { headers }) =&gt; {
    const token = 'XX';
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : &quot;&quot;,
      }
    }
  });
  
  const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
  });
  </code></pre>
  <p>But I get an error here:</p>
  <pre><code>&lt;ApolloProvider client={client}&gt;
  </code></pre>
  <p>that:</p>
  <pre><code>Type 'ApolloClient&lt;NormalizedCacheObject&gt;' is missing the following properties from type 'ApolloClient&lt;any&gt;': store, writeData, initQueryManager
  </code></pre>