You're reading "Integrating with GatsbyJS"

Integrating with GatsbyJS

DatoCMS offers an official source plugin to interact with Gatsby.

Inside your Gatsby project, you can install the gatsby-source-datocms package by running this command:

$ npm install --save gatsby-source-datocms

Add the plugin in you gatsby-config.js file, specifying the API token of your administrative area:

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-source-datocms`,
    options: {
      apiToken: `YOUR_READONLY_API_TOKEN`,
      preview: false,
      disableLiveReload: false,

You can find your API token in the Admin area > API tokens section:


Pull DatoCMS content into components

Gatsby uses GraphQL to let components declare the data it needs and then gives this data to components. Suppose your DatoCMS administrative area has a single-instance model called About page (with an about_page API identifier).

In your Gatsby project you can create an About React component in src/pages/about.js, and pull data from DatoCMS like this:

import React from 'react';

export default const About = ({ data }) => (
  <article className="sheet">
    <img src={} />
    <div dangerouslySetInnerHTML={{ __html: }} />

export const query = graphql`
  query AboutQuery {
    datoCmsAboutPage {
      photo { url }

Obviously, that's just a simple example: you can learn all the details about how to access your records in the plugin README.

Feel like something is missing in this page?
, submit an issue or propose a change on Github!