GET query missing: Implementing GraphQL Using Apollo On an Express Server - node.js

Question

I'm following the tutorial here: Implementing GraphQL Using Apollo On an Express Server and I'm getting the error GET query missing in the browser at http://localhost:7700/graphql.
First I typed all the code myself. When I encountered the error, I downloaded the code from GitHub: kimobrian/GraphQL-Express: An Express Server implemented using GraphQL to eliminate the possibility that I had made a mistake. However, I'm still getting the same error.
I presume it is better to provide the link to the repo rather than paste the code here because I'm using the same code from the repo. Also, I am not sure which file might contain the problem.
$ npm start
> tutorial-server#1.0.0 start kimobrian/GraphQL-Express.git
> nodemon ./server.js --exec babel-node -e js
[nodemon] 1.18.9
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `babel-node ./server.js`
GraphQL Server is now running on http://localhost:7700
The error is GET query missing in the browser at http://localhost:7700/graphql. It's the same in Firefox and Chromium.
Update: The only question I find with relevant information is here: nodejs with Graphql. The suggested solution is
server.use('/graphiql', graphiqlExpress({
endpointURL: '/graphql',
}));
However, that's exactly the code I have already (from the tutorial). Here is my entire server.js:
import express from 'express';
import cors from 'cors';
import {
graphqlExpress,
graphiqlExpress,
} from 'graphql-server-express';
import bodyParser from 'body-parser';
import { schema } from './src/schema';
const PORT = 7700;
const server = express();
server.use('*', cors({ origin: 'http://localhost:7800' }));
server.use('/graphql', bodyParser.json(), graphqlExpress({
schema
}));
server.use('/graphiql', graphiqlExpress({
endpointURL: '/graphql'
}));
server.listen(PORT, () =>
console.log(`GraphQL Server is now running on http://localhost:${PORT}`)
);

Answer 1

Both the API and the package name itself have changed since that tutorial was written (the package is now apollo-server-express). You no longer need to import cors or body-parser. The simplest way to get started is to actually just use apollo-server:
const server = new ApolloServer({ typeDefs, resolvers });
const port = 7700;
server.listen({ port });
If you still want to apply other middleware yourself, you can use apollo-server-express:
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app });
const port = 7700;
app.listen({ port });
Please check the official docs for more details.

Answer 2

I fixed it by addding two fields into Apollo Server constructor: playground: true and introspection: true:
const apolloServer = new ApolloServer({
schema,
context: (ctx: Context) => ctx,
playground: true,
introspection: true,
});
Note: Beware that cors should be set up properly for your graphql server to be able to answer requests.
Found here.