Apollo-client: Setting Apollo client header dynamically is not working

[vladinko0]

I am trying to set the header of Apollo client dynamically in React Native 0.62 according official doc, but I am getting error:

TypeError: (0 , _apollo.default) is not a function

This is my apollo.js

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { AsyncStorage } from 'react-native';

const httpLink = createHttpLink({
  uri: 'http://192.168.2.4:8000/api/',
});

const authLink = setContext((_, { headers }) => {
  const token = AsyncStorage.getItem('token');

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

export default client; 

[JClackett]

AsyncStorage.getItem is asynchronous ( its in the name :) ), i.e. you must await the getItem call

const token = await AsyncStorage.getItem('token');

dont forget to use async in the setContext callback:

const authLink = setContext(async (_, { headers }) => {

EDIT:
How are you using the client from this file, if youre importing it make sure its the default export and you pass it into the ApolloProvider like so

import client from "./apollo"
<ApolloProvider client={client}> 

[vladinko0]

Yes, I was trying also your approach, and used asynchronous calls:

const httpLink = createHttpLink({
  uri: 'http://192.168.2.7:8000/api/',
});

const authLink = setContext(async (_, { headers }) => {
  const token = await AsyncStorage.getItem('token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

export default client; 

but the error is anyway the same:

TypeError: (0 , _apollo.default) is not a function

This is how I am importing the client:

import { ApolloProvider } from 'react-apollo';
import Routes from './app/config/routes';
import makeApolloClient from './app/config/apollo';

export default function App() {
  const client = makeApolloClient();

  return (
    <ApolloProvider client={client}>
      <Routes />
    </ApolloProvider>);
}

[JClackett]

yeah makeApolloClient isnt a function, the file just exports an instance of the apollo client. Just import it as if its a variable.

import client from './app/config/apollo'

export default function App() {
  return (
    <ApolloProvider client={client}>
      <Routes />
    </ApolloProvider>);
}

[vladinko0]

@JClackett If you want to earn some points on Stackoverflow, you can answer my question here and I will accept it.

[alexakasanjeev]

@JClackett Hi, I'm really confuse how to set authorization header dynamically, after the client has been setup.

I want to set authorization header, after user has logged in, what do I need to do, to set authorization header in apollo client, when Apollo client has already been created

[JClackett]

@alexakasanjeev Hi, after logging in, you'll want to set a token to storage, if on React native, use async storage, if on web, can be local storage for example. Then when setting up apollo client you set up a "authLink", this just means that every time a request is made, we access the storage and apply the auth header, if there is a token.

In your login screen

const handleLogin =async () => {
    // login function
    const data = login()
    // on return of this, set token to storage
    await AsyncStorage.setItem("AUTH_KEY", data.token)
}

Apollo client setup

const httpLink = createHttpLink({
  uri: API_URL,
});

const authLink = setContext(async (_, { headers }) => {
  const token = await AsyncStorage.getItem('AUTH_KEY');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

[alexakasanjeev]

hi @JClackett Thank you, it's working fine,

one question: the way I understood is, every time api is called, authLink is called every time, which set the header authorization token, now since in React Native, we have to await for the response from AsyncStorage I am assuming lets say 100ms, isn't this bad, that we are increasing the time it takes to execute and get response from an api?

[JClackett]

Hi @alexakasanjeev yeah exactly, I don't think the time for getting the token from storage should make a significant difference, I've been doing it like this for years 😃