Made in Builder

Made in Builder.io

How to Build: Localization webinar on March 23rd @ 10am PST. Register Now

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Log in

Product

Features

Integrations

Talk to an Expert

Pricing

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

With the Content API, you can make requests to retrieve data about any of your models within Builder. The Content API supports advanced query filtering with URL parameters to help you get exactly the data you need.

Use cases for querying data could include searches, populating content for a collection, or getting all links that meet certain criteria.

To access this data, write queries with dot notation and, optionally, MongoDB style operators.

For more details on querying, see the Querying Cheatsheet.

NameDescription

Using the JavaScript SDK:

builder.init(YOUR_API_KEY);

Using the REST API:

https://cdn.builder.io/api/V2/MODEL?apiKey=API_KEY

Optionally use to send targeting attributes.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  userAttributes: {
    urlPath: '/about',
    device: 'desktop',
    userLoggedIn: true
  },
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  userAttributes: {
    urlPath: '/about',
    device: 'desktop',
    userLoggedIn: true
  },
}

Using the REST API:

&userAttributes.device=desktop
&userAttributes.urlPath=/about
&userAttributes.userLoggedIn=true

MongoDB style query of your data.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  query: {
    id: 'abc123'
    data: {
      myCustomField: 'someValue',
      someNumber: { $ne: 2 }
    }
  }
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:


// replace model with your model name
getContent({
  model: 'model',
  query: {
    id: 'abc123'
    data: {
      myCustomField: 'someValue',
      someNumber: { $ne: 2 }
    }
  }
}

Using the REST API:

&query.id=abc123
&query.data.myCustomField=someValue
&query.data.someNumber.$ne=20

Builder supports the following operators: $eq $gt$in $lt $lte $ne $nin$and $not $or $nor$exists $type $elemMatch$gte $regex $options. For more information, including examples, see the Builder Querying Cheatsheet.

Only include these fields.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  fields: 'id, name, data.customField'
}

Using the REST API:

&fields=id,name,data.customField

Omit only these fields.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  omit: 'data, bigField, data.blocks'
}

Using the REST API:

&omit=data.bigField,data.blocks

Max number of results to return. The default is 30 and the maximum is 100.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  limit: 10
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  limit: 10
}

Using the REST API:

&limit=10

Use to specify an offset for pagination of results. The default is 0.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  offset: 10
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  offset: 10
}

Using the REST API:

&offset=10

For more detail, see this forum post and this forum post.

Include content of references in response.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  includeRefs: true
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  includeRefs: true
}

Using the REST API:

&includeRefs=true

Seconds to cache content. This sets the maximum age of the cache-control header response header. Set value higher for better performance, and lower for content that changes frequently.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  cacheSeconds: 10
}

Using the REST API:

&cacheSeconds=1230

Builder.io uses stale-while-revalidate caching at the CDN level. This means Builder always serves from edge cache and updates caches in the background for maximum possible performance. In this way, the more frequently content is requested, the fresher it is. The longest Builder holds something in stale cache is one day by default, but you can set this to be shorter if needed. We suggest keeping this high unless you have content that must change rapidly and gets very little traffic.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  staleCacheSeconds: 86400
}

Using the REST API:

&staleCacheSeconds=86400

Property to order results by. Use 1 for ascending and -1 for descending.

The key is what you're sorting on, so the following example sorts by createdDate. and because the value is 1, the sort is ascending.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  sort: {
    createdDate: 1
  }
}

Using the REST API:

&sort.createdDate=-1

Include unpublished content in the response, rather than the default, which only includes published content.

Using the React or Angular SDK:

// replace model with your model name
builder.get ('model', {
  includeUnpublished: true
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  options: {
    includeUnpublished: true
  },
}

Using the REST API:

&includeUnpublished=true

Though the default is true, you can pass false to include Symbol JSON in the response. This is helpful if you want to render your page all at once such as in server-side rendering.

Using the React or Angular SDK:

// replace model with your model name
builder.get('model', {
  noTraverse: false
}

Using the Qwik, Vue, Solid, Svelte, or React-Native SDK:

// replace model with your model name
getContent({
  model: 'model',
  noTraverse: true
}

Using the REST API:

&noTraverse=false

To experiment with the Content API, you can use the Builder API Explorer, which offers a way for you to compose queries in your own Builder Space. This way, you can confirm that your queries are correct before editing your code base.

Text that reads, "Try the API Explorer". Under the text is a curved arrow pointing to a tile to the right

Builder API Explorer


Looking to hire a 3rd 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.

Connect with us

Was this article helpful?