Using GraphQLServerLambda, playground is not working. Getting a 404.

As the title says, I have a GraphQLServerLambda implementation that works wonderful with serverless, getting responses from the graphqlHandler, but when I try to use the playgroundHandler endpoint the playground client loads but it seems to not be able to load info. Let alone reach the server.

This is my config:

import { makeExecutableSchema } from "graphql-tools"
import { GraphQLServer, GraphQLServerLambda } from "graphql-yoga"
import mongoose from "mongoose"
import dotenv from "dotenv"

dotenv.config()

const typeDefs = `
  type Query {
    hello(name: String): String
  }
`

const resolvers = {
  Query: {
    hello: (_,{ name }) => `Hello ${name || 'world'}`
  }
}

// Executable Schema
const schema = makeExecutableSchema({
  typeDefs,
  resolvers,
})

const port = process.env.PORT || 4000
// Express init

// Mongoose setup
mongoose.Promise = global.Promise // Mongoose promises deprecated, needed to reassign
mongoose.connect(process.env.MONGO_URL, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
})

const context = async (context) => {
  let headers, request

  if (context.event?.headers) {
    // for serverless context
    headers = context.event.headers
    request = context.requestContext
  } else {
    // for local context
    headers = context.request.headers
    request = context.request
  }

  return {
  	headers
    currentUser,
    request,
  }
}

const server = new GraphQLServerLambda({
  schema,
  context,
  tracing: true,
  cacheControl: true,
})

exports.graphqlHandler = server.graphqlHandler
exports.graphqlPlayground = server.playgroundHandler

// This is how I've been running it on local
if (process.env.NODE_ENV === "dev") {
  const localServer = new GraphQLServer({
    schema,
    context,
    tracing: true,
    cacheControl: true,
  })

  const options = {
    port,
  }

  localServer.start(options, ({ port }) =>
    console.log(
      `Server started, listening on port ${port} for incoming requests.`,
    ),
  )
}

This is my serverless file:

# serverless.yml

service: apollo-lambda

# Use serverless-webpack plugin to transpile ES6/ES7
plugins:
  - serverless-webpack
  - serverless-dotenv-plugin
  - serverless-offline

# Configuration for serverless-webpack
# Enable auto-packing of external modules
custom:
  webpack:
    webpackConfig: ./webpack.config.js
    includeModules: true

provider:
  name: aws
  runtime: nodejs12.x
functions:
  graphql:
    # this is formatted as <FILENAME>.<HANDLER>
    handler: src/server.graphqlHandler
    events:
      - http:
          path: /graphql
          method: post
          cors: true
      - http:
          path: /graphql
          method: get
          cors: true
  playground:
    handler: src/server.graphqlPlayground
    events:
    - http:
        path: /playground
        method: get
        cors: true

This is what I get on the playground:

Let me know if you need some clarification! Thanks!

[mishchief]

You can check their docs, should be very straight forward https://www.apollographql.com/docs/apollo-server/deployment/lambda/

[mishchief]

No dice @pratiksyngenta I ended up ripping out graphql yoga and going with Apollo Graphql and their Lambda solution which works wonderfully!

It seems like the prisma lab folks have abandoned the project so it was easier for me to just switch to Apollo. Hope this helps!