Configuration with Apollo Client and refresh token

[HarunKilic]

Hi guys,

Does anyone use Next Auth along with Apollo client?
How did you make it work together and also with refresh tokens?

Would be nice to see a solution for this. Have been stuck for days now :(

Thanks! :D

[adamfortuna]

I struggled with this for a few days myself. The solution I've been using has room for improvement, but it could help:

lib/apollo.js

import { ApolloClient, InMemoryCache, createHttpLink } from "@apollo/client"
import { setContext } from "@apollo/client/link/context"
import { getSession } from 'next-auth/client'

// Saved apolloClient for the duration of this request
let apolloClient, token

const createApolloClient = () => {
  const httpLink = createHttpLink({
    uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
  });
  
  const authLink = setContext((_, { headers }) => {
    if(token) {
      return {
        headers: {
          ...headers,
          ...{ authorization: `Bearer ${token}` }
        }
      }
    }
    let promise = new Promise(async(resolve, reject) => {
      const session = await getSession()
      if(!session) { return resolve(headers) }

      token = session.token
      const auth = token ? { authorization: `Bearer ${token}` } : {}
      resolve({
        headers: {
          ...headers,
          ...auth
        }
      })
    })
    return promise
  });

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


// from https://github.com/vercel/next.js/blob/canary/examples/api-routes-apollo-server-and-client/apollo/client.js
export function initializeApollo(initialState = null) {
  const _apolloClient = apolloClient ?? createApolloClient()

  // If your page has Next.js data fetching methods that use Apollo Client, the initial state
  // gets hydrated here
  if (initialState) {
    _apolloClient.cache.restore(initialState)
  }
  // For SSG and SSR always create a new Apollo Client
  if (typeof window === 'undefined') return _apolloClient
  // Create the Apollo Client once in the client
  if (!apolloClient) apolloClient = _apolloClient

  return _apolloClient
}

export function useApollo(initialState) {
  return initializeApollo(initialState, [initialState])
}

Then your _app.js can import this client and use it (I'm also using a few other tweaks here, but you get the idea).

import '../styles/globals.css'
import App from 'next/app'
import { Provider } from 'next-auth/client'
import { ApolloProvider } from '@apollo/client';
import { useApollo } from "@lib/apollo"
import { ThemeProvider, useTheme } from 'next-themes'
import LayoutWrapper from "../layouts/layout-wrapper";

class MyApp extends App {
  
  render () {
    const { Component, pageProps } = this.props
    const apolloClient = useApollo(pageProps.initialApolloState)

    return (
      <Provider session={pageProps.session}>
        <ApolloProvider client={apolloClient}>
          <ThemeProvider attribute="class">
            <LayoutWrapper {...pageProps}>
              <Component {...pageProps} />
            </LayoutWrapper>
          </ThemeProvider>
        </ApolloProvider>
      </Provider>
    )
  }
}

export default MyApp

The only problem I've had is that the client script will connect to get the token twice on the first page load. Once if you're using useSession and then again within this apollo setup. If page loads are rare that might not be a big deal, but something to keep in mind.

If someone has a recommended way of doing this while sharing the same request as useSession I'd switch to that too!

[HarunKilic]

I have something similiar, but i am also having the same issue because of the client side rendering and server side rendering. As they will work seperately.

[hect1c]

Have you been able to get this to work as I've been struggling as well with the same setup provided above. I'm trying to see if I can pass session via the useApollo as second prop since I will get this in my pageProps from the getServerSideProps but seems still on SSR the value is null or blank. Especially since I'm trying make an authenticated request in my next-auth authorize method since I am also using MFA.