GraphQL API

ContentBoot will publish GraphQL API with specified domain.

Access

Authentication

GraphQL API supports authentication.

Follow these steps to enable it:

1. Select Settings > Publish Settings and select publish profile which need to enable authentication.
2. Click the edit button in GraphQL API serve to config the GraphQL API settings.
3. Enable the Authentication option, keep or generate a new token. Then save.
4. Wait the service to be deployed.

There are 2 ways to authenticate:

• Add authorization: Bearer {token} to request header.
• Add token={token} to query string.

Call API

The API URL is {protocol}://{domain}. Let's take the demo website as example, the GraphQL API URL of demo website is http://demo-gql.contentboot.com/

You can use POST to fetch data:

Request URL: http://demo-gql.contentboot.com/
Request Method: POST
Accept: application/json
Request Payload: {"query":"{aboutPage {introduction}}"}
Response:
{
    "data": {
        "aboutPage": {
            "introduction": "A demo project using ContentBoot as CMS.\nDemo url: http://demo.contentboot.com"
        }
    }
}

or GET:

Request URL: http://demo-gql.contentboot.com/?query=%7BaboutPage%20%7Bintroduction%7D%7D
Request Method: GET
Accept: application/json
Response:
{
    "data": {
        "aboutPage": {
            "introduction": "A demo project using ContentBoot as CMS.\nDemo url: http://demo.contentboot.com"
        }
    }
}

GraphiQL

ContentBoot supports a GraphQL IDE GraphiQL.

Follow these steps to enable it:

1. Select Settings > Publish Settings and select publish profile which need to enable GraphiQL.
2. Click the edit button in GraphQL API serve to config the GraphQL API settings.
3. Enable the GraphiQL option then save.
4. Wait the service to be deployed.
5. Visit the GraphiQL via entering {protocol}://{domain} in browser. For example, http://demo-gql.contentboot.com

TIP

You should add token={token} to query string if authentication is enabled. For example, http://demo-gql.contentboot.com/?token={token}

Schema

ContentBoot will generate schema based on the document groups and documents in project. Let's take the demo website as example.

Document Group - Group Mode

If we put homePage and aboutPage to pages group in demo website, we can use following query to query pages:

{
    pages {
        _id
        homePage {
            _id
        }
        aboutPage {
            introduction
        }
    }
}

Document Group - Single Document Mode

We can use following query to query aboutPage:

{
    aboutPage {
        introduction
    }
}

Document Group - Multiple Documents Mode

We can use following query to query project by _id:

{
    projects(_id: "d_7z0pu0kgr8") {
        title
    }
}

We can use following query to query multiple project:

{
    queryProjects(filter: {tag: {ieq: "website"}}, order: {title: desc}) {
        totalCount
        results {
            title
            tag
        }
    }
}

Queries

ContentBoot supports multiple GraphQL API queries. Let's take the demo website as example.

Filtering

Query projects whose tag is Website:

{
    queryProjects(filter: {tag: {eq: "Website"}}) {
        totalCount
        results {
            title
            tag
        }
    }
}

Query projects whose title contains seo ignoring case:

{
    queryProjects(filter: {title: {ilike: "%seo%"}}) {
        totalCount
        results {
            title
            tag
        }
    }
}

Query projects whose publishDate is after 2022-08-15T15:59:59Z:

{
    queryProjects(filter: {publishDate: {after: "2022-08-15T15:59:59Z"}}) {
        totalCount
        results {
            title
            publishDate
        }
    }
}

And, Or

Query projects whose tag is Website and title contains Website:

{
    queryProjects(filter: {_and: [{tag: {eq: "Website"}}, {title: {like: "%Website%"}}]}) {
        totalCount
        results {
            title
            tag
        }
    }
}

Query projects whose tag is Website or title contains Website:

{
    queryProjects(filter: {_or: [{tag: {eq: "Website"}}, {title: {like: "%Website%"}}]}) {
        totalCount
        results {
            title
            tag
        }
    }
}

Order and Pagination

Query the most recent 2 projects:

{
    queryProjects(order: {publishDate: desc}, first: 2) {
        totalCount
        results {
            title
            publishDate
        }
    }
}

Skip the first 1 recent project and then get the next 2:

{
    queryProjects(order: {publishDate: desc}, first: 2, offset: 1) {
        totalCount
        results {
            title
            publishDate
        }
    }
}

Query all projects order by tag, then by title:

{
    queryProjects(order: [{tag: asc}, {title: asc}]) {
        totalCount
        results {
            title
            tag
        }
  }
}

WARNING

Don't write query as following, you will get unexpected results:

{
    queryProjects(order: {tag: asc, title: asc}) {
        totalCount
        results {
            title
            tag
        }
  }
}