apollo-q-prof

Apollo query profiler

Usage no npm install needed!

<script type="module">
  import apolloQProf from 'https://cdn.skypack.dev/apollo-q-prof';
</script>

README

Query profiler for Apollo Server 2

Dependencies

Apollo Server is a community-maintained open-source GraphQL server. This Query Profiler project try to make super easy to control how many and which requests are called when a query is executed.

Getting started

  1. npm i -D apollo-q-prof
  2. Replace app = new ApolloServer({configData}) by app = ApolloQProf({configData})
  3. Run your application and that's all!

Configuration (Experimental)

There is a second [optional] argument to provide a configuration. The current version only accept an ApolloServer object. So if you are using apollo-server-express you can provide you object and version and use it.

{
  apolloInstance: ApolloServer,
  enabled: Boolean
}

Example:

// Just an example
import ApolloServer from 'apollo-server-express';

const server = ApolloQProf({
  schema,
  debug: true,
  dataSources: () => dataSources,
  context: (): AppContextWithoutDataSources => {
    return {
      locale: "",
      authHeaders: {},
      cookies: {}
    };
  }
}, {
  apolloInstance: ApolloServer,
  enabled: true
});

The service is enabled by default

Running the UI

Apollo-Q-Prof provide an UI to be able to see the generated json file with the information about the request/responses. To be able to use it you need to do the following:

  1. In your project, open you package.json and update the scripts section with a new command like:
{
  ...,
  scripts: {
    ...,
    "ui-prof": "apollo-q-prof-ui"
  }
}
  1. Ejecute the command: npm run ui-prof
  2. Open a browser and go to the url: http://localhost:9000 (or a different port - check the console)
  3. Now you can open the file apollo-q-prof.json located in the root folder of your project (the one generated by the profiler).
  4. Refresh it when you want to see new data.

Structure of JSON file

[
  {
    "outgoingRequests": [
      {
        "startTimestamp": "0",
        "endsTimestamp": "1",
        "params": "[ 'parameter1',... ,'paramenterN' ]",
        "executionTime": "time in ms",
        "method": "",
        "dataSource": ""
      },
      ...
    ],
    "request": {
      "operationName": "",
      "variables": {},
      "query": "{...}"
    },
    "response": {
      "startTimestamp": "0",
      "endsTimestamp": "1",
      "executionTime": "time in ms"
    }
  },
]

Upcoming versions

There are some improvements that we are going to include in upcoming versions like:

  • Timeline for each request
  • Real-time monitoring
  • Statitics and Graphs