Using Yoga with AWS Lambda through Serverless Framework

[arimgibson]

Hi all!

I'm currently working on a project and attempting to substitute out Apollo Server for Yoga. However, I'm running into some issues integrating with the current tech stack, which uses the Serverless Framework to manage Lambda functions.

Apollo Server's documentation has a specific mention of integration with the Serverless Framework and explains how to integrate them together. I figured Yoga wouldn't be difficult, but I can't seem to get anything returned besides 404 errors. I read through and copied the Yoga Lambda Integration documentation and followed it, along with comparing the handler function to the handlers in @as-integrations/aws-lambda but am still stuck.

How would one take the Lambda example and integrate it with Serverless, where things like the endpoint URLs for certain functions are handled by Serverless? The code for Yoga is essentially copied directly from the Lambda integration docs besides the endpoint used, and the relevant code from our serverless.ts config file is also below.

Thank you!

server.ts

import { createYoga, createSchema, GraphQLServerLambda } from 'graphql-yoga';
import { APIGatewayEvent, APIGatewayProxyResult, Context } from 'aws-lambda';

const yoga = createYoga<{
  event: APIGatewayEvent
  lambdaContext: Context
}>({
  // You need to specify the path to your lambda function
  graphqlEndpoint: '/',
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () => 'This is the `greetings` field of the root `Query` type',
      },
    },
  }),
});

export async function handler(
  event: APIGatewayEvent,
  lambdaContext: Context,
): Promise<APIGatewayProxyResult> {
  console.log('handler called');
  const response = await yoga.fetch(
    `${event.path}?${new URLSearchParams(event.queryStringParameters as Record<string, string> || {}).toString()}`,
    {
      method: event.httpMethod,
      headers: event.headers as HeadersInit,
      body: event.body
        ? Buffer.from(event.body, event.isBase64Encoded ? 'base64' : 'utf8')
        : undefined,
    },
    {
      event,
      lambdaContext,
    },
  );

  const responseHeaders: Record<string, string> = {};

  response.headers.forEach((value, name) => {
    responseHeaders[name] = value;
  });

  return {
    statusCode: response.status,
    headers: responseHeaders,
    body: await response.text(),
    isBase64Encoded: false,
  };
}

serverless.ts

  functions: {
    graphql: {
      handler: 'src/server.handler',
      events: [
        {
          httpApi: {
            method: 'GET',
            path: '/',
          },
        },
        {
          httpApi: {
            method: 'POST',
            path: '/',
          },
        },
      ],
    },
  },

[Vectormike]

Hi @arimgibson In this case, it appears that you are trying to trigger your function with a GET and POST HTTP API event, but the path is set to / for both events. Make sure that the path is set to a unique value for each event, otherwise you may be running into issues with overlapping paths.

I just hope this might fix the issue.

[arimgibson]

Thanks for the reply! No luck here though; I'd imagine they need to be on the same path for Serverless to be able to expose the required endpoint 🤔

[n1ru4l]

Hey @arimgibson, could you get this running? We have not used the serverless framework before, but if you think it is a tool that many people use and struggle with we would love to add an example to this repository!

@arimgibson or @Vectormike would you be willing to send a pull request for adding one?

[arimgibson]

Didn't have any luck unfortunately @n1ru4l , but it would be a great example if someone can get it going!

[jazarja]

@arimgibson It's seems graphql-yoga only support API gateway v1 (https://www.serverless.com/framework/docs/providers/aws/events/apigateway), while your code using API gateway v2 (https://www.serverless.com/framework/docs/providers/aws/events/http-api).

You need to modify http event definition from

 httpApi: {
            method: 'GET',
            path: '/',
          },

to

 http: {
            method: 'GET',
            path: '/',
          },

[rajumb502]

I have my graphql-yoga deployed using serverless and working fine on AWS. This is my serverless.yml file:

service: edulite-server
frameworkVersion: '3'

# Ref: https://www.serverless.com/plugins/serverless-dotenv-plugin
# Also requires the env entry below in provider section for each variable
# requires `npm i dotenv`
useDotenv: true

provider:
  name: aws
  runtime: nodejs18.x
  region: ap-south-1
  environment: 
    DATABASE_URL: ${env:DATABASE_URL}
    NODE_ENV: ${env:NODE_ENV}

functions:
  graphql:
    # this is formatted as <FILENAME>.<HANDLER>
    handler: "./src/index.graphqlHandler"
    events:
      - http:
          method: POST
          path: graphql
          cors: true
      - http:
          method: GET
          path: graphql
          cors: true

plugins:
  - serverless-webpack
  - serverless-offline

# Ref: https://forum.serverless.com/t/examples-with-using-knex-on-serverless-aws-lambda/6962/7
custom:
  webpack:
    includeModules:
      forceInclude:
        - knex
        - pg # I'm using postgres

[vanbujm]

For those that want to use API gateway V2 here is my working code:

import { APIGatewayProxyEventV2, APIGatewayProxyResultV2, APIGatewayEventRequestContextV2 } from "aws-lambda"

const yoga = createYoga<{
  event: APIGatewayProxyEventV2
  lambdaContext: APIGatewayEventRequestContextV2
}>({
  // You need to specify the path to your lambda function
  graphqlEndpoint: '/',
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () => 'This is the `greetings` field of the root `Query` type',
      },
    },
  }),
});


export async function graphqlHandler(
  event: APIGatewayProxyEventV2,
  lambdaContext: APIGatewayEventRequestContextV2,
): Promise<APIGatewayProxyResultV2> {
  const path = event.requestContext.http.path

  const request =
    path + "?" + new URLSearchParams((event.queryStringParameters as Record<string, string>) || {}).toString()

  const response = await yoga.fetch(
    new URL(request),
    {
      method: event.requestContext.http.method,
      headers: event.headers as HeadersInit,
      body: event.body ? Buffer.from(event.body, event.isBase64Encoded ? "base64" : "utf8") : undefined,
    },
    {
      event,
      lambdaContext,
    },
  )

  const responseHeaders = Object.fromEntries(response.headers.entries())

  return {
    statusCode: response.status,
    headers: responseHeaders,
    body: await response.text(),
    isBase64Encoded: false,
  }
}