Integrating with graphql-yoga and fastify

[mbirkegaard]

Thank you for the work and for super-quickly resolving the reconnection problems in Chrome and Firefox recently!

With graphql-ws we can integrate with graphql-yoga (which among other things lets use use envelop plugins). Is there a way to similarly integrate graphql-sse with graphql-yoga, essentially using the former for the protocol and latter for execution?

Similarly, using the raw requests and replies instead of the ones supplied by fastify means we can't leverage fastify's handling of JWT verification and CORS. Is there a smarter way of doing it than this?

import { createHandler } from 'graphql-sse'
import { FastifyPluginCallback } from 'fastify'

import schema from '../../presentation/schema'
import config from '../../config'

import { corsConfig as extractCorsConfig } from '../cors'
const corsConf = extractCorsConfig(config.corsOrigins)

import { JwtPayload } from '../jwt'
import { makeContext } from './context'

// This has been copied verbatim from the fastify jwt plugin
const isRequestOriginAllowed = (reqOrigin: string, allowedOrigin: string | string[] | RegExp) => {
  if (Array.isArray(allowedOrigin)) {
    for (let i = 0; i < allowedOrigin.length; ++i) {
      if (isRequestOriginAllowed(reqOrigin, allowedOrigin[i])) {
        return true
      }
    }
    return false
  } else if (typeof allowedOrigin === 'string') {
    return reqOrigin === allowedOrigin
  } else if (allowedOrigin instanceof RegExp) {
    return allowedOrigin.test(reqOrigin)
  } else {
    return !!allowedOrigin
  }
}

// This has also been copied verbatim from the fastify jwt plugin
const getAccessControlAllowOriginHeader = (
  reqOrigin: string,
  originOption: '*' | string | string[]
) => {
  if (originOption === '*') {
    // allow any origin
    return '*'
  }

  if (typeof originOption === 'string') {
    // fixed origin
    return originOption
  }

  // reflect origin
  return isRequestOriginAllowed(reqOrigin, originOption) ? reqOrigin : false
}

export const GraphQLSSE: FastifyPluginCallback = (app, _options, done) => {
  // graphql-sse: Serve streaming requests at /graphql/stream
  const streamHandler = createHandler({
    schema,
    context: async (request, _args) => {
      const token = request.headers.authorization?.replace('Bearer ', '')

      let decoded = null

      if (token) {
        try {
          // decoded holds some user data like an account id and such
          decoded = await (app.jwt.verify<JwtPayload>(token) as Promise<JwtPayload>)
        } catch (err) {
          console.log(err)
          //
        }
      }

      return makeContext(
        {
          decoded,
          logger: app.log,
          // The raw request type doesn't have the id that fastify has (AFAICT), so this 
          // is a quick and easy way to have something unique to follow in the logs
          requestId: (Math.random() + 1).toString(36).substring(7),
        },
        true
      )
    },
  })

  app.route({
    method: ['GET', 'POST', 'OPTIONS'],
    url: '/graphql/stream',
    handler: async (req, reply) => {
      const rawReply = reply.raw

      rawReply.setHeader('Content-encoding', 'none')
      rawReply.setHeader('vary', 'Origin')

      if (corsConf.origin !== false && req.headers.origin) {
        const origin = getAccessControlAllowOriginHeader(req.headers.origin, corsConf.origin)

        if (origin) {
          rawReply.setHeader('Access-Control-Allow-Origin', origin)
        }

        if (corsConf.credentials) {
          rawReply.setHeader('Access-Control-Allow-Credentials', 'true')
        }
      }

      reply.sent = true
      void streamHandler(req.raw, reply.raw, req.body)
    },
  })

  done()
}

[enisdenjo]

With graphql-ws we can integrate with graphql-yoga (which among other things lets use use envelop plugins). Is there a way to similarly integrate graphql-sse with graphql-yoga, essentially using the former for the protocol and latter for execution?

I am not familiar with the workings of graphql-yoga, I'd recommend asking them instead. Furthermore, I don't quite understand what you mean with "...essentially using the former for the protocol and latter for execution"?

Similarly, using the raw requests and replies instead of the ones supplied by fastify means we can't leverage fastify's handling of JWT verification and CORS. Is there a smarter way of doing it than this?

Shouldn't you be able to just use a middleware that runs before graphql-sse (of course making sure that the middleware does not close the connection)?

P.S. I've just fixed #28 too, all browsers and environments should now retry while having uncompleted streams starting from v1.2.3.

[enisdenjo]

GraphQL Yoga now has a graphql-sse plugin implementing the full GraphQL over SSE spec.