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.
apollo-serverincludes everything needed to run a GraphQL servermoesif-expressconnects 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.
expressis the underlying HTTP server frameworkexpress-graphqlis express middleware that uses the reference GraphQL implementation for Node.jsmoesif-expressis 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
/graphqlroute, 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?
Related Articles
API Strategy
Announcing General Availability of the Moesif Developer Portal
We’re thrilled to announce the General Availability of the Moesif Developer Portal, a major leap forward enabling you to deploy a seamless experience for dev...
API Analytics and Monitoring
Introducing AI Explain
We are thrilled to introduce our newest feature to Moesif - AI Explain - a powerful conversational tool that lets you interact with your API analytics data l...
API Analytics and Monitoring
Monitoring Cost and Consumption of AI APIs and Apps
Discover how Moesif can help manage and optimize your AI-driven APIs with powerful observability tools that track costs and usage efficiently.
API Development
Unlock Deep API Insights with Moesif’s HTTP Body Analytics
Learn how to use Moesif to analyze HTTP bodies.