Configuration client graphql to use token authentication

[mativiscusso]

Hello everyone, I am sharing the configuration (bearer token) of my apollo client to test it and help each other.

In this case, I extend response object by adding the vendure-auth-token in data.

import {
    ApolloClient,
    ApolloLink,
    createHttpLink,
    InMemoryCache,
} from '@apollo/client'
import {
    setContext
} from '@apollo/client/link/context'

const httpLink = createHttpLink({
    uri: `${process.env.NEXT_PUBLIC_URL_SHOP_API}/shop-api`,
    withCredentials: true,
})

const afterwareLink = new ApolloLink((operation, forward) => {
    const existTokenInLocalStorage =
        localStorage.getItem('vendure-auth-token') !== null
    return forward(operation).map((response) => {
        const context = operation.getContext()
        const authHeader = context.response.headers.get('vendure-auth-token')
        if (authHeader) {
            response.data.token = authHeader
        }
        return response
    })
})

const client = new ApolloClient({
    link: ApolloLink.from([
        setContext(() => {
            const authToken = localStorage.getItem('vendure-auth-token')
            if (authToken) {
                return {
                    headers: {
                        authorization: `Bearer ${authToken}`,
                    },
                }
            }
        }),
        afterwareLink.concat(httpLink),
    ]),
    cache: new InMemoryCache(),
})

export default client

[michaelbromley]

Thanks for this! I will add this to the docs 👍

[michaelbromley]

Actually I have a couple of questions about this:

1. What is this line for?

   const existTokenInLocalStorage =
      localStorage.getItem('vendure-auth-token') !== null

2. I don't see anywhere that sets the localStorage value for the 'vendure-auth-token' key. Is this missing from the afterwareLink?