Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Builder 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/v1/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.

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

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.

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.

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

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

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.

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 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.

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

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
    }
  }
}
Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy