> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/_mcp/server.

# Use Contentful as an Apollo Subgraph

> Learn how to use Contentful as an Apollo Subgraph.

## Use Contentful as an Apollo Subgraph

You can use the Contentful GraphQL API as a subgraph in [Apollo Federation](https://www.apollographql.com/docs/federation/).

> **Info**
>
> This feature is only available for customers on our Premium plans and above.

## Setup

To use the Contentful GraphQL API, you must configure your Supergraph to pull from the Contentful schema.

Here is an example configuration:

```javascript
const gateway = new ApolloGateway({
    buildService({ url }) {
        return new (class extends RemoteGraphQLDataSource {
            fetcher = makeFetchHappen.defaults({
                headers: {
                    Authorization: `Bearer ${YOUR_TOKEN}`,
                },
            });
        })({ url });
    },
    serviceList: [
        { name: "contentful", url: contentfulUrl },
        ...otherServices,
    ],
});
```

Now, when you start your Apollo Gateway server you should be able to access all Contentful queries through your Supergraph.

## References

To resolve references from other subgraphs, you must add the `Sys` type to the subgraphs from where you want to make references. This is only supported on `Published` entities, and you will need access to both the locale you want and the ID of the entity in Contentful. For example, if you had a `BlogPost` type from Contentful that you wanted to reference in your `BlogPage` type, your types may look like this:

```javascript
type Sys {
    id: String!
    locale: String
}

type BlogPage {
    id: ID!
    title: String
    blogPost: BlogPost
    author: Author
}
// You, 1 second ago + Uncommited changes
type BlogPost @key(fields: "sys { id locale }", resolvable: true) {
    sys: Sys!
}
```

Then, your `BlogPage` `blogPost` resolver in your subgraph needs to return an object containing the key and the locale. Here is an example:

```javascript
{
    id: `1`,
    title: `My English American Blog Page`,
    author: {
        name: `Bob`,
    },
    blogPost: { sys: { id: `blog-post-id`, locale: `en-US`} },
}
```

This will allow your gateway to talk to the Contentful Subgraph and look up the correct entry you are referencing.

## Extend Types

You can extend Contentful Types following the Apollo specification. For example:

```javascript
type Sys {
    id: String!
    locale: String
}

type BlogPost @key(fields: "sys { id locale }", resolvable: true) {
    sys: Sys!
    fieldFromSubgraph: String
}
```

Then, in your subgraph you can add a resolver to your resolver map that is responsible for returning that data to the gateway. Here is a very basic example:

```javascript
BlogPost: {
    fieldFromSubgraph() {
        return `Some text from the other subgraph (not Contentful)`
    },
}
```

> Learn how to use Contentful as an Apollo Subgraph.