gatsby-source-cosmicjs

    1.0.7-next.2 • Public • Published

    Gatsby Source for Cosmic JS

    Source plugin for fetching data into Gatsby from Cosmic JS. Cosmic JS offers a Headless CMS for your Gatsby website.

    Install

    npm install --save gatsby-source-cosmicjs
    

    How to use

    Log into your Cosmic JS account to get your bucketSlug and apiAcecss keys.

    // In your gatsby-config.js
    plugins: [
      {
        resolve: `gatsby-source-cosmicjs`,
        options: {
          bucketSlug: ``, // Get this value in Bucket > Settings
          objectTypes: [`posts`],
          // If you have enabled read_key to fetch data (optional).
          apiAccess: {
            read_key: ``, // Get this value in Bucket > Settings
          },
          localMedia: true // Download media locally for gatsby image (optional)
        }
      },
    ]

    How to query and filter (Not Localized)

    You can query the nodes created from Cosmic JS with the following:

    {
      allCosmicjsPosts {
        edges {
          node {
            id
            slug
            title
          }
        }
      }
    }

    and you can filter specific node using this:

    {
      cosmicjsPosts(slug: {eq: ''}) {
        id
        slug
        title
      }
    }

    How to use Gatsby Image

    if localMedia=true in plugin config, you can use Gatsby Image.

    Note: gatsby-image and gatsby-source-filesystem plugins are required.

    {
      allCosmicjsPosts {
        edges {
          node {
            slug
            metadata{
              hero {
                local {
                  childImageSharp {
                    fluid(quality: 90, maxWidth: 1920) {
                      ...GatsbyImageSharpFluid_withWebp
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    Read gatsby-image documentation here here.

    How to query (Localized)

    {
      allCosmicjsPosts(filter: {locale: {eq: "en"}}, sort: {fields: [published_at], order: DESC}) {
        edges {
          node {
            id
            slug
            title
            locale
          }
        }
      }
    }

    Starters

    Install the Cosmic JS Gatsby starter:

    npm i cosmicjs -g
    cosmic init gatsby-starter
    cd gatsby-starter
    cosmic start
    

    Install the Cosmic JS Gatsby localization starter:

    npm i cosmicjs -g
    cosmic init gatsby-starter
    cd gatsby-localization-starter
    cosmic start
    

    Install

    npm i gatsby-source-cosmicjs@1.0.7-next.2

    Homepage

    cosmicjs.com

    Version

    1.0.7-next.2

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • tonyspiro
    • jazibsawar