Getting started

    If you are new to the world of static site generators, NodeJS, React or GraphQL we highly recommend the excellent Gatsby tutorial that introduces all the tools and concepts that you'll need.

    Once you are all comfortable with Gatsby you can add our source plugin.

    Source plugin

    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">
    <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.

    Example project

    We have also prepared for you an example project that you can see live here.

    If you want to try it out yourself, please sign up for a free account and click on the following button:

    Deploy with DatoCMS