Apollo Server - GET query missing - reactjs

Question

I am trying to use this template to learn how to use graphql/apollo/prisma etc.
When I try to start the server, I get a confirmation in the console, but an error in the browser that says: GET query missing.
import "reflect-metadata"
import "dotenv/config"
import { ApolloServerPluginCacheControl, ApolloServerPluginLandingPageDisabled } from "apollo-server-core"
import { ApolloServer } from "apollo-server-express"
import jwt from "express-jwt"
import { buildSchema } from "type-graphql"
import { Container } from "typedi"
import { JWT_AUTH } from "./lib/config"
import { ExpressContext } from "./lib/express"
import { formatResponse } from "./lib/formatResponse"
import { ErrorInterceptor } from "./lib/globalMiddleware"
import { loadPrismaHooks } from "./lib/hooks"
import { loadCurrentUser } from "./lib/loadCurrentUser"
import { loadResolvers } from "./lib/loadResolvers"
import { prisma } from "./lib/prisma"
import { Server } from "./lib/server"
class App extends Server {
constructor() {
super()
this.init().catch((error) => {
this.logger.error(error)
process.exit(1)
})
}
async init() {
await this.setUpDb()
await this.setUpAuth()
await this.setupApollo()
this.start()
}
async setUpDb() {
await prisma.$connect()
loadPrismaHooks()
this.logger.info("DB ready")
}
async setUpAuth() {
this.app
.use(jwt(JWT_AUTH))
.use((err: any, _: any, __: any, next: any) => {
if (err.name === "UnauthorizedError") next()
})
.use(loadCurrentUser)
this.logger.info("Auth ready")
}
async setupApollo() {
const schema = await buildSchema({
container: Container,
resolvers: loadResolvers(),
globalMiddlewares: [ErrorInterceptor],
})
const apolloServer = new ApolloServer({
context: ({ req, res }: ExpressContext) => ({ req, res, prisma }),
formatResponse,
plugins: [ApolloServerPluginCacheControl(), ApolloServerPluginLandingPageDisabled()],
schema,
// playground: true,
// introspection: true
})
await apolloServer.start()
apolloServer.applyMiddleware({ app: this.app })
// I deleted cors: true from the above line
this.logger.info("Apollo setup hello")
}
}
new App()
I have seen other posts describing that cors is no longer needed (not sure what the basis for that is) and also suggesting that I add the playground and introspection arguments to the new ApolloServer. I tried this (as shown in the commented lines), but the playground is not recognised as a valid argument.
Server is defined in the lib folder as:
import "reflect-metadata"
import "dotenv/config"
import * as Sentry from "#sentry/node"
import * as Tracing from "#sentry/tracing"
import chalk from "chalk"
import express from "express"
import morgan from "morgan"
import { IS_PRODUCTION, PORT, SENTRY_DSN } from "./config"
export class Server {
private readonly _app: express.Application
readonly logger: {
info: (message: string) => void
error: (message: string) => void
}
constructor() {
this._app = express()
.use(Sentry.Handlers.requestHandler())
.use(Sentry.Handlers.tracingHandler())
.enable("trust proxy")
.use(
morgan("dev", {
skip: (req) => req.method === "OPTIONS",
stream: { write: (message) => console.log(message + "\n\n") },
}),
)
if (IS_PRODUCTION) {
Sentry.init({
dsn: SENTRY_DSN,
integrations: [
new Sentry.Integrations.Http({ tracing: true }),
new Tracing.Integrations.Express({ app: this._app }),
],
enabled: IS_PRODUCTION,
tracesSampleRate: 1.0,
})
}
this.logger = {
info: this.info,
error: this.error,
}
}
protected error(message: string) {
console.log(`[${chalk.red("ERROR")}] `, message)
}
protected info(message: string) {
console.log(`[${chalk.blue("INFO")}] `, message)
}
protected get app(): express.Application {
return this._app
}
start(): void {
this._app
.use(Sentry.Handlers.errorHandler())
.listen(PORT, () => this.logger.info(`Server started at http://localhost:${PORT}/graphql 🚀` + "\n"))
}
}
The console logs in the terminal print the server started confirmation, but the browser just generates the cannot GET message. I don't know what this message means, to be able to begin to try and figure out how to get to the playground.
Can anyone recommend current instructions for how to configure the server?

Answer 1

the reason for this problem seems to be related to the move to the graphql sandbox environment. If you add localhost555 to the sandbox address bar, the page loads without an error.