Awesome Open Source
Awesome Open Source

gatsby-source-craftcms

deprecated

Use https://www.gatsbyjs.org/packages/gatsby-source-graphql/ instead

About

Source plugin for pulling data into Gatsby from a CraftCMS endpoint
Based on gatsby-source-graphcms
Tested in Gatsby v1 and v2

Install

  1. yarn add gatsby-source-craftcms or npm i gatsby-source-craftcms
  2. Make sure plugin is referenced in your Gatsby config, as in the example below
  3. gatsby develop

Usage

In your gatsby config...

plugins: [
  {
    resolve: `gatsby-source-craftcms`,
    options: {
      endpoint: `craftcms.mydomain.com/api`,
      token: `graphql_token`,
      query: `{
          categories(site:"default",groupId:12) {
              id
              title
              slug
              uri
          },
          entries(section:[news],site:"premium") {
            id
            uri
            title
            slug
          },
          home: entries(section:[home],site:"premium") {
            id
            uri
            title
            slug
          }
      }`,
    },
  }
],

Gatsby’s data processing layer begins with “source” plugins, configured in gatsby-config.js. Here the site sources its data from the CraftCMS endpoint. Use an .env file or set environment variables directly to access the CraftCMS
endpoint and token. This avoids committing potentially sensitive data.

In your gatsby-node.js ...

const path = require("path");

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    const postPage = path.resolve("src/templates/post.js");
    resolve(
      graphql(`{
        allEntry(sort: { fields: [postDate], order: DESC}){
          edges {
            news: node{
              id
              title
              slug
              postDate
            }
          }
        }
      }`).then(result => {
        if (result.errors) {
          reject(result.errors);
        }
        result.data.allEntry.edges.forEach(edge => {
          createPage({
            path: edge.news.slug,
            component: postPage,
            context: {
              slug: edge.news.slug
            }
          });
        });
      })
    );
  });
};

Plugin options

endpoint indicates the endpoint to use for the graphql connection
token The API access token. Optional if the endpoint is public
query The GraphQL query to execute against the endpoint

How to query : GraphQL

Let’s say you have a GraphQL type called Categories. You would query all artists like so:

{
  allCategory {
    id
    title
}

entries example, to use in your template:

export const pageQuery = graphql`
query GetPost($slug: String!) {
  entry(slug: { eq: $slug }) {
    id
    slug
    title
    summary
    uri
    enableComments
    contentPost {
      block{
        content
        totalPages
      }
      quoteText
      imagem{
        url
      }
      titleH1
      subtitleH2
    }
    category {
      title
      slug
    }
    tags{
      title
      slug
    }
  }
}
`;

Testing plugin contributions

  1. cd to the Gatsby install you want to test your changes to the plugin code with, or clone @CraftCMS/gatsby-craftcms-example
  2. If you cloned the example or previously installed the plugin through yarn or npm, yarn remove gatsby-source-craftcms or npm r gatsby-source-craftcms
  3. mkdir plugins if it does not exist yet and cd into it
  4. Your path should now be something like ~/code/gusnips/myKillerGatsbySite/plugins/
  5. git clone https://github.com/gusnips/gatsby-source-craftcms.git
  6. cd gatsby-source-craftcms
  7. yarn or yarn && yarn watch in plugin’s directory for auto-rebuilding the plugin after you make changes to it—only during development
  8. Make sure plugin is referenced in your Gatsby config, as in the example below
  9. From there you can cd ../.. && yarn && yarn develop to test

Every time you rebuild the plugin, you must restart Gatsby’s development server to reflect the changes in your test environment.

Alternatives To Gatsby Source Craftcms
Select To Compare


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,060,209
Plugin (113,836
Token (29,781
Graphql (15,732
Gatsby (8,570
Craftcms (2,661