We use cookies to help our site work and to understand how it is used. By continuing to browse the site you're agreeing to our use of cookies.
Menu
Something is missing in this page?
Chat with us, submit an issue or propose a change on Github!

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:

foo

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">
    <h1>{data.datoCmsAboutPage.title}</h1>
    <p>{data.datoCmsAboutPage.subtitle}</p>
    <img src={data.datoCmsAboutPage.photo.url} />
    <div dangerouslySetInnerHTML={{ __html: data.datoCmsAboutPage.bio }} />
  </article>
);

export const query = graphql`
  query AboutQuery {
    datoCmsAboutPage {
      title
      subtitle
      photo { url }
      bio
    }
  }
`;

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