USER GUIDES
Creating Content
Learning the visual editor
Responsive design tricks
Saving layers as templates
Importing your site pages
Connecting custom data
Interactive pages with state and actions
Creating reusable components with Symbols
Targeting and scheduling content
Building custom forms
How To
Platforms
DEVELOPER GUIDES
Guides
Quick start
SEO optimizing Builder.io content
Creating custom models
Using custom fields
Enable on-site previewing and editing
Dynamic URLs and advanced data fetching
Adding Custom Code
Using 3rd party libraries
Import HTML
Extending Builder.io with plugins
REST API
React
Getting started
Using Next.js
Using Gatsby
Using your React components in Builder
Triggering custom actions
Angular
Ruby on rails
Webcomponents
Github
Builder GraphQL Content API
Usage
With the GraphQL Content API you can query your data by targeting attributes and/or custom fields and use your data as you choose!
The format is
https://cdn.builder.io/api/v1/graphql/YOUR_API_KEY?query=QUERYYou 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:
Examples
You can see real world examples of using our GraphQL API in our open source examples, such as our Gatsby examle
Basic usage
query {
page(limit: 1) {
content
}
}With targeting
See our content API docs for more info on custom targeting
query {
page(target: { urlPath: "/foobar" }, limit: 1) {
content
}
}With query
See our content API docs for more info on custom querying
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
content
}
}For React
See our gatsby example for more info about querying and rendering to React
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
content
}
}
# Render with
# <BuilderComponent name="page" content={data.page[0].content} />Get HTML
query {
page(prerender: true, limit: 1, target: { urlPath: "/" }) {
data { html }
}
}
# Render {{data.page[0].html}} in your site or appData model fields
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
data {
someProperty
}
}
}Questions or comments?
