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
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 appquery {
page(query: { "data.someProperty": "someValue" }, limit: 1) {
data {
someProperty
}
}
}
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=QUERYYou 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:
myCoolModel(...)to fetch paginated resultsoneMyCoolModel(...)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 appFetch 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
}
}
}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.
