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

> 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 .