Skip to content

Commit

Permalink
Update sourcing-from-graphcms.md
Browse files Browse the repository at this point in the history
  • Loading branch information
Bamblehorse committed Oct 9, 2019
1 parent 53473cc commit e098692
Showing 1 changed file with 8 additions and 8 deletions.
16 changes: 8 additions & 8 deletions docs/docs/sourcing-from-graphcms.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ title: Sourcing from GraphCMS

[GraphCMS](https://graphcms.com?ref="gatsby-headless-docs-top") is a headless CMS that is optimized for working with GraphQL. Content structures like posts, authors, products and more are broken down into content types called "models." These models can then be queried with the familiar GraphQL syntax.

One of the benefits of GraphCMS when working with Gatsby is that we support GraphQL natively which allows you to test your content queries before even starting your Gatsby project.
One of the benefits of GraphCMS when working with Gatsby is that it supports GraphQL natively which allows you to test your content queries before even starting your Gatsby project.

## Getting Started
## Getting started

In this guide we'll walk you through creating a complete project capable of querying data from GraphCMS.
In this guide you'll create a complete project capable of querying data from GraphCMS.

### Install the Boilerplate
### Install the boilerplate

To begin, let's create a Gatsby starter site.

Expand All @@ -24,7 +24,7 @@ Navigate inside of the project with `cd gatsby-site`.

### Add the Source Plugin

Additionally, you need the the `gatsby-source-graphql` library. Because GraphCMS uses GraphQL natively, we will take advantage of Gatsby's ability to simply stitch two GraphQL APIs together, reducing the time required to transform content. There is no need to use a special gatsby-source-x-cms plugin, the GraphQL source plugin is all you need.
Additionally, you need the the `gatsby-source-graphql` library. Because GraphCMS uses GraphQL natively, you will take advantage of Gatsby's ability to simply stitch two GraphQL APIs together, reducing the time required to transform content. There is no need to use a special gatsby-source-x-cms plugin, the GraphQL source plugin is all you need.

You can install this component with:

Expand All @@ -33,7 +33,7 @@ You can install this component with:
npm install --save gatsby-source-graphql
```

### Configure the Plugin
### Configure the plugin

The last step required before you can query your data is to configure the `gatsby-source-graphql` plugin. Open `gatsby-config.js` and add the following object to the plugins array. This example uses an open API from GraphCMS but you will most likely want to replace this with your own API and provide a fieldName that makes the most sense to your project. [Here's more information on working with GraphCMS APIs.](https://docs.graphcms.com/developers/api)

Expand All @@ -54,7 +54,7 @@ The last step required before you can query your data is to configure the `gatsb

If everything works correctly, you should now have your GraphCMS data added to the Gatsby source API!

### Querying for Content
### Querying for content

From the root of your project, run the development environment with `npm run development`. Once the server has started and is error free, you should be able to open the following URL in your browser:

Expand Down Expand Up @@ -106,7 +106,7 @@ Again, if everything is working properly, you should see a successful response i
}
```

### Getting Content on the Page
### Getting content on the page

For the purpose of this tutorial I've removed all the layout, SEO, link or other components that comprise a page in the Gatsby starter. The components are still there and 99% of users will likely want to put them back in once they understand what's happening in the code. You are just looking at the nails for right now, but the hammers, saws and other tools are still in the toolbox. Open the index file located at `src/pages/index.js` and replace the content with this code:

Expand Down

0 comments on commit e098692

Please sign in to comment.