Installing Gatsby

Gatsby 2.0 has landed after hundreds of iterations based on the community feedback and the break neck release of industry standards like Webpack and Babel. The series of new features is quite exciting and positions Gatsby as a "must-know" static site tool for the modern web developer.

The most exciting feature for us at GraphCMS is the inclusion of GraphQL stitching! Now you can merge multiple GraphQL schemas without the need for extensive transform plugins. Take advantage of our native GraphQL API and simply stitch it into Gatsby's content API.

To begin, we will use the base starter project from Gatsby which you can install using:

gatsby new gatsby-site https://github.com/gatsbyjs/gatsby-starter-default

You can also use npx gatsby new https://github.com/gatsbyjs/gatsby-starter-default if you prefer.

The only other requirement is the gatsby-source-graphql plugin since stitching is current in an experimental phase. You can find it here and install it with yarn add gatsby-source-graphql in the terminal.

To help with some styling, we will be including the Tailwind CSS library. A lot of this is purely boilerplate code, feel free to simply fork this project and make it your own!

There are two critical components for us to look at in this boilerplate. We need to look at the gatsby-config.js file and the new StaticQuery component in Gatsby.

To connect to your GraphCMS API, you will need to provide the endpoint to the plugin we've just added.

{
    resolve: "gatsby-source-graphql",
        options: {
        // The top level query type, can be anything you want!
        typeName: "GCMS",
        // The field you'll query against, can also be anything you want.
        fieldName: "gcms",
        // Your API endpoint, available from the dashboard and settings window.
        url: "https://api-euwest.graphcms.com/v1/cjm7tab4c04ro019omujh708u/master",
    },
}

Once we've connected our plugin, you'll need to write a query. The new StaticQuery component takes in a query prop as well as a render prop. The query prop executes a query against the newly stitched schema. The render prop takes a function which passes the data response to the body of the function. Here's what our query looks like:

query {
  gcms {
    mountains {
      title
      elevation
      image {
        url
      }
    }
  }
}

And here's what our render prop looks like:

data => {
    if (!data.gcms) {
        return <p>Loading…</p>
    }
    return data.gcms.mountains.map(d => (
        <Card
            title={d.title}
            elevation={d.elevation}
            src={d.image ? d.image.url : undefined}
        />
    ))
}

And that's all you need to know! It's a rather simple set of primitives to work with, but they balance expressive data requests and powerful presentation features in a way that just makes sense. Thanks for reading!