Skip to content
Skip to main contentWhere does your team stand on AI adoption?
CONTACT SALESSTART BUILDING

GraphQL Content API

To query your data using the GraphQL Content API, you can make requests to the endpoint with the following format:

https://cdn.builder.io/api/v3/graphql/YOUR_API_KEY?query=QUERY

You can also use POST requests with { "query": QUERY } as the body, though GET is preferred when possible for performance and caching purposes.

Explorer

The best way to explore the GraphQL API for your data is to use the GraphQL Explorer:

Querying models

When using the GraphQL Content API, your models are represented as fields defined on the root query type. For each model, there are two corresponding fields:

  1. myCoolModel(...) to fetch paginated results
  2. oneMyCoolModel(...) to fetch a single record

For example, if your space had models named page, header, and footer, the root query type in your GraphQL schema would have fields such as page, onePage, footer, oneFooter, header, and oneHeader.

Examples

All of the following examples assume that your space has a model named page defined, but you could swap it out for any other model you have defined.

Tip: Explore real world examples of using the GraphQL API in Builder's open source examples, such as the Gatsby example.

Basic

Write a basic query to fetch the content of a page:

query { page(limit: 1) { content } }

With targeting

Query with targeting to fetch a page with a specific URL path:

query { page(target: { urlPath: "/foobar" }, limit: 1) { content } }

See the Content API for more detail on custom targeting.

With query

Query with custom conditions to fetch a page based on certain properties:

query { page(query: { data: { someProperty: "someValue" }}, limit: 1) { content } }

See the Content API documentation for more info on custom querying.

For React

For rendering the queried data in a React application, use BuilderComponent:

query { page(query: { data: { someProperty: "someValue" }}, limit: 1) { content } } # Render with # <BuilderComponent name="page" content={data.page[0].content} />

See Builder's Gatsby example for more info about querying and rendering to React.

Get HTML

Query to retrieve HTML content for a page:

query { page(prerender: true, limit: 1, target: { urlPath: "/" }) { data { html } } } # Render {{data.page[0].html}} in your site or app

Data model fields

Fetch data from the page model requesting a single record limit: 1 where the value of the someProperty field is someValue. The response will include the value of the someProperty field from the retrieved record:

query { page(query: { data: { someProperty: "someValue" }}, limit: 1) { data { someProperty } } }

What's next

For more information, visit the GraphQL Schema documentation.

Was this article helpful?