Not able to connect to my local graphql server with apollo studio sandbox

Question

I am running a graphql server using serverless offline and trying to connect to the server with Aollo Studio. The weirdest bug is that it was connecting properly a week back and now the exact same server is not connecting. The same thing I have deployed on the AWS and Aollo Studio is able to connect to the deployed server. Any idea what could be the reason for it?

Environment

I am on Macbook m1 pro.

Node Version 15.6

As you can in the config file I have started a playground as well on this path http://localhost:3000/dev/playground which I am able to access but this playground is also not connecting the server.

One thing which I have observed is my local network IP URL like http://192.168.1.3:3000/dev/playground is also not working when I am trying to visit so maybe some kind of network issue might be there. But when I run something like a React App I am able to access it on this http://192.168.1.3:3000

My serverless.yml looks like below

service: serverless-graphql-rds

frameworkVersion: "3.8.0"

provider:
  name: aws
  runtime: nodejs14.x
  stage: ${env:PROVIDER_STAGE}
  region: ${env:REGION}
  environment:
    JWT_SECRET: ${env:JWT_SECRET}
    DATABASE_URL: ${env:DATABASE_URL}
    REDIRECT_TO_DASHBOARD: ${env:REDIRECT_TO_DASHBOARD}
    HUB_SPOT_CLIENT_ID: ${env:HUB_SPOT_CLIENT_ID}
    HUB_SPOT_CLIENT_SECRET: ${env:HUB_SPOT_CLIENT_SECRET}
    HUB_SPOT_REDIRECT_URI: ${env:HUB_SPOT_REDIRECT_URI}

plugins:
  - serverless-plugin-typescript
  - serverless-offline
package:
  patterns:
    - "migrations/**"
    - "**.js"
    - "config"

custom:
  serverless-offline:
    httpPort: ${env:httpPort, 3000}
    lambdaPort: ${env:lambdaPort, 3002}
  serverless-plugin-typescript:
    tsConfigFileLocation: "./tsconfig.json"

functions:
  graphql:
    handler: server.handler
    events:
      - http:
          path: graphql
          method: post
          cors: true
  playground:
    handler: server.playgroundHandler
    events:
      - http:
          path: playground
          method: get
          cors: true
  oauth-callback:
    handler: ./rest-apis-handlers/oauth-callback.handler
    events:
      - http:
          path: oauth-callback
          method: get
          cors: true

And the file server.ts looks like below which contains the handler function

import { ApolloError, ApolloServer } from "apollo-server-lambda";
import lambdaPlayground from "graphql-playground-middleware-lambda";
import { verifyToken } from "./common/jwt";
import { useContext } from "./core/context";
import resolvers from "./graphql/resolvers";
import typeDefs from "./graphql/schema";

const server = new ApolloServer({
  typeDefs,
  resolvers,
  context: ({ event, context, express }) => {
    const auth = express.req.headers["authorization"] as string;
    if (auth) {
      const [_, token] = auth.split("Bearer ");
      try {
        const user = verifyToken(token);
        if (user) {
          return useContext({
            type: "user",
            properties: {
              ...user,
            },
          });
        } else {
          throw new ApolloError("Not authenticated", "UNAUTHENTICATED");
        }
      } catch (ex) {}
    }
    return useContext({
      type: "public",
    });
  },
});
export const handler = server.createHandler({});

// for local endpointURL is /graphql and for prod it is /stage/graphql
export const playgroundHandler = (event, context, callback) => {
  context.callbackWaitsForEmptyEventLoop = false;
  return lambdaPlayground({
    endpoint: process.env.REACT_APP_GRAPHQL_ENDPOINT,
  })(event, context, callback);
};

Answer 1

After struggling for 3 days today I finally figured it out. As I am using the serverless-offline package to run the local graphql server and due to the node version it requires less than 15. Here is the details discussion on it.

So just downgrade the node version to anything < 15 and it will work.