Fastify \w Mercurius on Lamba - Graphiql introspection Issue Help

[PyroOtter]

Hello,

I've created a basic fastify/mercurius app to test out how it would work on lambda. The /graphql endpoint works as expected, but the graphiql endpoint has issues trying to call the /graphql endpoint for introspection.

Lambda Stage: dev
graphql endpoint: /graphql

Url for graphiql: https://***-east-1.amazonaws.com/dev/graphiql

The issue is when the graphiql page loads up, it attempts to call the graphql endpoint for introspection. The endpoint it attempts to hit is: https://***-east-1.amazonaws.com/graphql -- without the stage name included. Is this a known issue, and is there a possible fix/way around it?

Incorrect: https://***-east-1.amazonaws.com/graphql
Should be: https://***-east-1.amazonaws.com/dev/graphql

Setting the prefix or path did not solve the issue for me.

Looking forward to your responses, and please let me know if I can provide any more information.

Thanks

[mcollina]

I think we have a bug in how graphiql is wired up in this module. It calls /grapqhl, independently of any prefix. This is configurable in GraphiQL, we should expose this config option to mercurius users.

Would you like to send a Pull Request to address this issue? Remember to add unit tests.

[aecorredor]

I'm seeing a similar issue. I have my API deployed on Lambda through API Gateway (using @h4ad/serverless-adapter) and the main /graphql endpoint works as expected, but the /graphiql endpoint still gets a 404.

Here's how my API gateway is set up (Pulumi):

import * as apigateway from '@pulumi/aws-apigateway';

import { handler } from './handler';

export const apiGateway = new apigateway.RestAPI('my-service', {
  routes: [
    {
      path: '/graphql',
      method: 'GET',
      eventHandler: handler,
    },
    {
      path: '/graphql',
      method: 'POST',
      eventHandler: handler,
    },
    {
      path: '/graphql',
      method: 'OPTIONS',
      eventHandler: handler,
    },
    {
      path: '/graphiql',
      method: 'GET',
      eventHandler: handler,
    },
    {
     // I had this code from older versions of mercurius in another app I have. At that point,
     // this was the missing piece for the playground to work when deployed on a lambda.
      path: '/graphiql/init.js',
      method: 'GET',
      eventHandler: handler,
    },
  ],
});

And here's my handler entry point:

import { ServerlessAdapter } from '@h4ad/serverless-adapter';
import { DefaultHandler } from '@h4ad/serverless-adapter/lib/handlers/default';
import { FastifyFramework } from '@h4ad/serverless-adapter/lib/frameworks/fastify';
import { PromiseResolver } from '@h4ad/serverless-adapter/lib/resolvers/promise';
import { ApiGatewayV1Adapter } from '@h4ad/serverless-adapter/lib/adapters/aws';

import { createApp } from './server';

const app = createApp();

export const handler = ServerlessAdapter.new(app)
  .setFramework(new FastifyFramework())
  .setHandler(new DefaultHandler())
  .setResolver(new PromiseResolver())
  .addAdapter(new ApiGatewayV1Adapter())
  .build();