> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Apollo Gateway

export const VersionRequirements = ({versions = []}) => {
  if (!Array.isArray(versions) || versions.length === 0) {
    return null;
  }
  const boundaries = {
    upper: " or lower",
    exact: "",
    lower: " or higher"
  };
  const containerStyle = {
    marginTop: "0.5rem",
    marginBottom: "1.5rem"
  };
  const lineStyle = {
    display: "block",
    margin: "0 0 0.35rem 0",
    fontSize: "0.875rem",
    lineHeight: "1.4"
  };
  const pillBaseStyle = {
    display: "inline-block",
    padding: "0.1em 0.4em",
    borderRadius: "0.25rem",
    border: "1px solid",
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
    fontSize: "0.85em",
    fontWeight: 500
  };
  const pillColors = {
    "AppSignal for Elixir": {
      background: "#f3e8ff",
      borderColor: "#e9d5ff",
      color: "#9333ea"
    },
    "AppSignal for Front-end": {
      background: "#fef9c3",
      borderColor: "#fde68a",
      color: "#ca8a04"
    },
    "AppSignal for Go": {
      background: "#ccfbf1",
      borderColor: "#99f6e4",
      color: "#0d9488"
    },
    "AppSignal for JavaScript": {
      background: "#fef9c3",
      borderColor: "#fde68a",
      color: "#ca8a04"
    },
    "AppSignal for Node.js": {
      background: "#dcfce7",
      borderColor: "#bbf7d0",
      color: "#16a34a"
    },
    "AppSignal for Python": {
      background: "#dbeafe",
      borderColor: "#bfdbfe",
      color: "#2563eb"
    },
    "AppSignal for Ruby": {
      background: "#fee2e2",
      borderColor: "#fecaca",
      color: "#dc2626"
    },
    "AppSignal for Rust": {
      background: "#ffedd5",
      borderColor: "#fed7aa",
      color: "#ea580c"
    }
  };
  const defaultPillColor = {
    background: "#f4f4f5",
    borderColor: "#e4e4e7",
    color: "#52525b"
  };
  const getPillStyle = name => ({
    ...pillBaseStyle,
    ...pillColors[name] || defaultPillColor
  });
  const getBoundText = bound => {
    return boundaries[bound] || boundaries.lower;
  };
  return <div style={containerStyle}>
      {versions.map((v, i) => <p key={`${v.name}-${v.version}-${v.bound || "lower"}-${i}`} style={lineStyle}>
          This feature requires{" "}
          <code style={getPillStyle(v.name)}>{v.name}</code> version {v.version}
          {getBoundText(v.bound)}.
        </p>)}
    </div>;
};

<VersionRequirements
  versions={[
{ name: "AppSignal for Node.js", version: "3.3.0" },
{ name: "@apollo/gateway", version: "2.6.0" }
]}
/>

## Installation and usage

To use the Apollo Gateway instrumentation, you need to disable the GraphQL instrumentation in the service that acts as the gateway. This is because the gateway will send its own spans using the `@apollo/gateway` OpenTelemetry instrumentation for the queries it proxies to the services that implements in the supergraph.

To do so, you can use the `disableInstrumentations` option in the `appsignal` configuration.

<CodeGroup>
  ```javascript Node.js theme={null}
  const { Appsignal } = require("@appsignal/nodejs");

  new Appsignal({
    active: true,
    name: "your-app-name",
    pushApiKey: "your-push-api-key",
    disableDefaultInstrumentations: ["@opentelemetry/instrumentation-graphql"],
  });
  ```
</CodeGroup>

You also need to enable the OpenTelemetry instrumentation in your Apollo Gateway config:

<CodeGroup>
  ```javascript Node.js theme={null}
  const config = {
    telemetry: {
      includeDocument: true,
      reportExceptions: 1,
    },
  };
  ```
</CodeGroup>

## Features

The Apollo Gateway instrumentation will send root spans to AppSignal based on the queries it receives and routes to the subgraphs.

You will be able to inspect this data in the Event timeline of performance issues:

<img src="https://mintcdn.com/appsignal-715f5a51/4TRZP0Sq9Zq7PAPW/assets/images/screenshots/node/instrumentations/apollo-gateway/even-timeline.png?fit=max&auto=format&n=4TRZP0Sq9Zq7PAPW&q=85&s=290983db8ccb4930894eeec2fe6de9ee" alt="Screenshot of Event timeline showing gateway.request events" width="2616" height="1572" data-path="assets/images/screenshots/node/instrumentations/apollo-gateway/even-timeline.png" />

If your federated services are also instrumented with AppSignal, you'll get the usual GraphQL spans for them as well.