Cloudflare workers graphql server unable to access request headers

Hi all,

We are doing a POC to expose a graphql endpoint on workers to orchestrate various REST endpoints to be used by the front end. One of the requirements is to authenticate the request before processing and we are using a JWT token for the same. The issue that I am facing while using the cloudflare workers template for graphql server is the inability to access request headers in the graphql worker.

As shown in the code below, I am trying to access request headers while creating an instance of ApolloServer but the request.headers return an empty object.

FYI - cloudflare workers log emit event as json object and in the cloudflare logs headers are visible.

const { ApolloServer } = require('apollo-server-cloudflare')

const { graphqlCloudflare } = require(‘apollo-server-cloudflare/dist/cloudflareApollo’)
const KVCache = require(’…/kv-cache’)
const resolvers = require(’…/resolvers’)
const typeDefs = require(’…/schema’)
const TapAPI = require(’…/datasources/tapapi’)
const dataSources = () => ({
pokemonAPI: new PokemonAPI(),
tapAPI: new TapAPI()
})

const kvCache = { cache: new KVCache() }

const createServer = graphQLOptions =>
new ApolloServer({
typeDefs,
resolvers,
introspection: true,
dataSources,
…(graphQLOptions.kvCache ? kvCache : {}),
context: ( req ) => ({
req,
/*
this is the important bit:
we extract the needed headers and then
set up a customHeaders property on the context object
*/
customHeaders: {
headers: {
…req.headers,
credentials: ‘same-origin’,
‘Content-Type’: ‘application/json’,
},
},
}),
})

const handler = (request, graphQLOptions) => {
console.log('request headers: ', JSON.stringify(request.headers)) // this return empty object
const server = createServer(graphQLOptions)
return graphqlCloudflare(() => server.createGraphQLServerOptions(request))(request)
}

module.exports = handler

Not sure what I am missing here but I tried to log headers in the event listener for “fetch” event and the headers are coming as empty there as well.

addEventListener('fetch', event => {

console.log('here are the headers: ', event.request.headers)
event.respondWith(handleRequest(event.request))
})