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

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.