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
The best way to explore the GraphQL API for your data is to use the GraphQL explorer:
You can see real world examples of using our GraphQL API in our open source examples, such as our Gatsby examle
query {
page(limit: 1) {
content
}
}
See our content API docs for more info on custom targeting
query {
page(target: { urlPath: "/foobar" }, limit: 1) {
content
}
}
See our content API docs for more info on custom querying
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
content
}
}
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} />
query {
page(prerender: true, limit: 1, target: { urlPath: "/" }) {
data { html }
}
}
# Render {{data.page[0].html}} in your site or app
query {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
data {
someProperty
}
}
}
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.
The best way to explore the GraphQL API for your data is to use the GraphQL explorer:
Your models appear as fields defined on the root query type. For each model a new field will be defined myCoolModel(...)
to fetch paginated results, and oneMyCoolModel(...)
to fetch a single record.
For example, if in my space I have the models page, header, and footer, my GraphQL schema's root query type will have the fields page
, onePage
, footer
, oneFooter
, header
, and oneHeader
.
You can see real world examples of using our GraphQL API in our open source examples, such as our Gatsby example.
All the examples below assume that your space has a model named page defined, but you could swap it out for any other model you have defined.
query {
page(limit: 1) {
content
}
}
See our content API docs for more info on custom targeting.
query {
page(target: { urlPath: "/foobar" }, limit: 1) {
content
}
}
See the Content API documentation for more info on custom querying.
query {
page(query: { data: { someProperty: "someValue" }}, limit: 1) {
content
}
}
See Builder's 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} />
query {
page(prerender: true, limit: 1, target: { urlPath: "/" }) {
data { html }
}
}
# Render {{data.page[0].html}} in your site or app
query {
page(query: { data: { someProperty: "someValue" }}, limit: 1) {
data {
someProperty
}
}
}
Looking to hire a third party to help with your project?
Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.