Async Middleware (with ApolloLink)

Intended outcome:

To resolve a promise inside an ApolloLink middleware to adjust request headers.

Actual outcome:

Wasn’t able to write code that works.

How to reproduce the issue:

import { ApolloLink } from 'apollo-client-preset'

export const authMiddleware = new ApolloLink((operation, forward) => {
  resolvePromise().then(data => {
    operation.setContext(({ headers = {} }) => ({
      headers: {
        ...headers,
        authorization:  || null,
      }
    }))

    return forward(operation)
  })
})

There’s no examples regarding this type of middleware in the docs. How can this be achieved?

Version

• apollo-client@^2.0.1

[vtsatskin]

@pycraft114 @matteodem Here is how I got it working:

import {
  ApolloClient,
  InMemoryCache,
  ApolloLink,
  from,
} from "apollo-client-preset";
import { setContext } from "apollo-link-context";
import { createHttpLink } from "apollo-link-http";

import { AsyncStorage } from "react-native";

const GRAPHQL_API_ENDPOINT = "https://path/to/graphql/api"

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

const authMiddleware = setContext(operation =>
  somePromise().then(token => {
    return {
      // Make sure to actually set the headers here
      headers: { 
        authorization: token || null,
      },
    };
  })
);

const client = new ApolloClient({
  link: from([authMiddleware, httpLink]),
  cache: new InMemoryCache(),
});

@jbaxleyiii The documentation was a little confusing due to not having a fully working example with the HTTP link. I understand this is meant to be generalized for any link, but your advice in this issue was a little misleading due to having to set explicitly structure the context to what HttpLink expects. How can we make the documentation clearer in the migration and other related documentations?

[marceloogeda]

Following the @vtsatskin’s implementation, I’ve changed the authMiddleware function to works with async/await.

const authMiddleware = setContext(async (req, { headers }) => {
  const token = await AsyncStorage.getItem(TOKEN_NAME);

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