How to build a jwt refresh token flow with graphql-request?

[chrisLovesCode]

Hi,
there are two examples for building middleware on the website (https://www.the-guild.dev/graphql/codegen/plugins/typescript/typescript-graphql-request#simple-request-middleware)
but it's not clear to me how to build a flow, where i get a new token from my rest endpoint with transmitting the refresh token.
it seems there is only this "action()" thing available but it doesnt look that i am able to manipulate the headers for instance?
maybe someone has build it, since its a common need?

my current setup:
`
import { CodegenConfig } from '@graphql-codegen/cli'

const config: CodegenConfig = {
schema: 'http://api:3000/graphql',
documents: ['src/**/*.graphql'],
generates: {
'src/generated/graphql.ts': [
{
"typescript": {}
},
{
"typescript-operations": {}
},
{
"typescript-graphql-request": {}
},
],
}
}

export default config`

[charlypoly]

Hi @chrisLovesCode,

A middleware function has the following signature:

type SdkFunctionWrapper = <T>(action: (requestHeaders?:Record<string, string>) => Promise<T>, operationName: string, operationType?: string) => Promise<T>;

meaning that you can pass new headers to the current request, and, I guess, get the returned headers from the result of the request (return of action()).
I am not an expert with this plugin, but you might need to use rawRequest() instead of simple request() in order to get the response headers.

[chrisLovesCode]

thanks for help! i think, the solution that its possible to give action() the requestHeaders as argument would for shure be the solution, but since i now changed my flow to httpOnly Cookies it's now not longer neccesary to manipulate headers manualy, since my refreshToken requests sets the tokens.

so in case someone like me is googling for the topic jwt refresh and graphl-request plugin, heres my current implementation,
(nestjs backend with graphql and graphql code gen with graphl-request plugin. my refresh token endpoint is rest, since i have no benefit in using gql here)

//gqlRequest.ts

import { GraphQLClient } from 'graphql-request'
import { getSdk, SdkFunctionWrapper } from '@/generated/graphql'
import axios, { AxiosResponse } from 'axios'

const withJWTRefresh: SdkFunctionWrapper = async <T>(action: () => Promise<T>): Promise<T> => {
    try {
      const result = await action()
      return result
    } catch (error:any) {
      if (!error.message.includes('UNAUTHENTICATED') || 
        typeof window === 'undefined'
      ) {return error;}
        
      const getNewToken:AxiosResponse = await axios.get(
        'http://localhost:3000/auth/refresh', 
        {withCredentials: true}
      )
      
      if (getNewToken.status === 200) {
        return await action()
      } else {
        return getNewToken.data
      }
    }
 
  }

const endpoint = typeof window === 'undefined' ? 'http://api:3000/graphql' : 'http://localhost:3000/graphql'
const client = new GraphQLClient(endpoint, {
  credentials: 'include',
  mode: "cors",
})
const gqlReq = getSdk(client, withJWTRefresh)
export default gqlReq;

[charlypoly]

Thank you for sharing your solution @chrisLovesCode! 🙇🏼