Gatsby > Gatsby Cloud integration

    Gatsby Cloud integration

    Gatsby Cloud is an optimized continuous integration an depolyment platform specifically built for GatsbyJS.

    DatoCMS is one of the best supported CMSs in Gatsby Cloud and here we'll document the small steps you need to take to integrate the two platforms.

    To integrate DatoCMS with a project hosted on Gatsby Cloud you have two options.

    Wizard integration

    If you start a new project on Gatsby Cloud, either from a Git repository or from a template, you'll reach a step where you are offered to integrate with a CMS:

    If you click Connect you'll get a popup where you can connect do DatoCMS:

    If it's a project starter you'll be all set by Gatsby Cloud. Otherwise you'll need to pick a project from DatoCMS, then it will set up all the necessary webhooks and confirm:

    And now you are good to go, whenever you'll create/update/delete a record a preview build will be triggered. Otherwise when you publish/unpublish a record a live build will be triggered.

    The hooks will be triggered also on assets upload and model changes.

    Manual integration

    If you go for the manual integration, you only need to create two webhooks, one for previews and one for full builds.

    Start by collecting the webhook URLs from the site settings of your Gatsby cloud project:

    Preview hook

    Create a webhook in DatoCMS using the preview URL and you should add three triggers:

    • on record create/update/delete

    • on asset create/update/delete

    • on model create/update/delete

    As a custom payload you should add this:

    {
    "event_type": "{{event_type}}",
    "entity_id": "{{#entity}}{{id}}{{/entity}}",
    "entity_type": "{{entity_type}}"
    }

    Build hook

    Create a webhook in DatoCMS using the build URL and you should add three triggers:

    • on record publish/unpublish

    • on asset create/update/delete

    • on model create/update/delete

    As a custom payload you should add this:

    {
    "event_type": "{{event_type}}",
    "entity_id": "{{#entity}}{{id}}{{/entity}}",
    "entity_type": "{{entity_type}}"
    }