Skip to content
Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (50 sloc) 1.93 KB
title
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.

You can’t perform that action at this time.