GET query missing: Implementing GraphQL Using Apollo On an Express Server

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

> [email protected] 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

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.