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=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:
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 app
Data model fields
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
data {
someProperty
}
}
}
Questions or comments?
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=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:
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 app
Data model fields
query {
page(query: { data: { someProperty: "someValue" }}, limit: 1) {
data {
someProperty
}
}
}