Monitoring GraphQL APIs built with Apollo & Express

Monitoring our APIs is a must when we want to stay up to date on functional and performance issues.

Keyur Doshi already wrote an article about Monitoring GraphQL APIs built with Django and Graphene, so let us dive into the JavaScript ecosystem an see what is needed to get up and running there!

There are many JavaScript GraphQL implementations out there, in this article we will talk about the two most prominent players: apollo-server & express-graphql

The first part of this article is about how to set up Moesif API Analytics for each of these GraphQL implementations.

The second part is about how to use Moesif API Analytics to stay on top of our API game!

Set up Apollo server

Apollo server comes with a standalone version and integrations for multiple frameworks. We will talk about the standalone version here.

First, we set up a project with NPM.

$ mkdir apollo-example
$ cd apollo-example
$ npm init

Second, we install the two NPM packages needed.

  1. apollo-server includes everything needed to run a GraphQL server
  2. moesif-express connects to the Moesif API Analytics service
$ npm i apollo-server moesif-express

Next, we create an index.js that holds all the setup code.

const { ApolloServer, gql } = require("apollo-server");
const moesif = require("moesif-express");

const applicationId = "<MOESIF_APPLICATION_ID>";
const typeDefs = ...;
const resolvers = ...;

new ApolloServer({ typeDefs, resolvers })
  .listen(8888)
  .then(({ server }) => {
    const moesifMiddleware = moesif({ applicationId });
    server.on("request", moesifMiddleware);
  });

The critical part of the code is at the end. The listen method of the ApolloServer object returns a promise.

This promise gives us access to the underlying HTTP-server via the server object.

This server object is an event-emitter for request events.

We can create a middleware function with the help of the moesif factory function and use it as an event listener for the request events.

Set up Express GraphQL

Apollo server also has an Express integration, but there is an alternative GraphQL server implementation that works with Express, so let’s look at how to set it up.

First, we create a project.

$ mkdir express-example
$ cd express-example
$ npm init

Second, we install the packages needed.

  • express is the underlying HTTP server framework
  • express-graphql is express middleware that uses the reference GraphQL implementation for Node.js
  • moesif-express is the library that connects us with Moesif API Analytics
const express = require('express');
const expressGraphql = require('express-graphql');
const moesif = require("moesif-express");

const applicationId = "<MOESIF_APPLICATION_ID>";
const schema = ...;

const moesifMiddleware = moesif({ applicationId });
const graphqlMiddleware = expressGraphql({ schema });

const app = express();
app.use(moesifMiddleware);
app.use("/graphql", graphqlMiddleware);

app.listen(8888);

The process here is rather simple. We use the moesif factory function to get a middleware function we can use with the Express app object.

This work is all that has to be done in terms of code. Now every request hitting the server, Express or Apollo, will be relayed to the Moesif API Analytics service and can be inspected further.

Moesif API Analytics for GraphQL

After we set up our GraphQL server with the framework of our choice, the Moesif middleware will send the request data to the Moesif service. In terms of GraphQL, this means the Moesif service now knows about our queries and mutations.

If we use the apollo-server standalone version, the GraphQL API answers on all routes. Moesif expects GraphQL queries on the /graphql route, so we have to use this route.

If we sign into our Moesif console with a browser, we find all the logged events under the API Analytics section. This includes, but is not limited to; the GraphQL requests sent to the /graphql route.

To show only GraphQL query requests without other HTTP requests, like loading HTML for the GraphiQL UI or introspection queries to get info about the GraphQL API, we have to use the Filter sidebar on the left.

In API Filters we select Request -> URI Route and set it to /graphql to get rid of the non-GraphQL request.

Now that we have only GraphQL requests, we can apply GraphQL Query Filters to focus on specific queries we want to monitor.

For example, we could get rid of IntrospectionQuery requests by selecting request.graphql.operation_name as GraphQL Query Filter and set it to ≠ IntrospectionQuery.

Conclusion

Adding Moesif API Analytics to our GraphQL API build with Node.js frameworks is a matter of minutes. We have to install moesif-express via NPM, require the middleware, configure it with our Moesif app key, and we are good to go.

After the setup, all our requests will be sent to the Moesif API Analytics service and saved for later use.

Later, when our API is up and running, we can filter, sort, and segment by the content of our GraphQL queries to get insights into our queries.

Which are

  • the most popular?
  • the slowest?
  • the most error-prone?
Learn More About Moesif Monitor Your GraphQL APIs With Moesif 14 day free trial. No credit card required. Learn More
Monitor Your GraphQL APIs With Moesif Monitor Your GraphQL APIs With Moesif

Monitor Your GraphQL APIs With Moesif

Learn More