Apollo comes with a handy playground. The playground is
For the third post on the series on
In the previous post, we had a very limited Apollo and Express configuration like the following code.
import express, { Request, Response } from "express"; const app = express(); app.get("/healthcheck", (req: Request, res: Response) => { res.status(200).send("ok"); }); const server = new ApolloServer(await apolloServerConfig()); server.applyMiddleware({ app, path: endpoint, cors: true }); app.listen(endpoints.graphQlServerPort, () => { console.log("Up-and-running"); });
To keep the code tidy, the portion that
import express, { Request, Response } from "express"; const app = express(); app.get("/healthcheck", (req: Request, res: Response) => { res.status(200).send("ok"); }); installGraph("/api/graph", app).then(() => { app.listen(endpoints.graphQlServerPort, () => { console.log("Up-and-running"); }); });
The installGraph function takes two parameters. The first one is the path under the GraphQL is reachable. The string can be to any URL you want. The second one is the Express server. The function contains the two lines that we had before with a small modification concerning the parameter passed to the server.
const server = new ApolloServer(await apolloServerConfig()); server.applyMiddleware({ app, path: endpoint, cors: true });
The configuration function is
import { gql } from "apollo-server-core"; // Type Definition export const typeDefs = gql` type Book { title: String author: String } type Query { books: [Book] } `; // Fake data source export const books = [ { title: "Harry Potter and the Chamber of Secrets", author: "J.K. Rowling" }, { title: "Jurassic Park", author: "Michael Crichton" } ]; // Resolver export const resolvers = { Query: { books: (obj: null, args: {}, context: {}) => { return books; } } };
When the resolver and the type definition are coded, you can insert them in the Apollo Server.
const serverConfig: ApolloServerConfig = { typeDefs, resolvers, playground: true };
There are few caveats with the code above. The first one is that it has a single type definition and a single resolver. The second is the lack of authentication. We also do not pass any parameter that would give the possibility to fetch a single entity instead of a full list. Finally, the context is not set hence we do not know who is making the request and cannot resolve the information for a particular user. Nevertheless, the playground is activated. By running the code and going to the endpoint passed by parameter, in my case “/

Summary
This article is a little bit deceiving. Not that I lied, but that I know that few things
My Other GraphQL Articles
- Getting Started with GraphQL for Netflix Open Connect
- Install Apollo Server to host a GraphQL service
- Apollo Server and Secured Playground
- GraphQL Context
- GraphQL Query with Argument
- Apollo GraphQL Resolvers and Data Source separation
- How to setup a TypeScript, NodeJS, Express Apollo Server to easy debugging with VsCode
- GraphQL Resolvers with Apollo
- Configuring Apollo Playground and API on two different URL
- How to automatically generate TypeScript for consumers of your GraphQL