Have ideas to improve npm?Join in the discussion! »

    gatsby-source-cosmicjs

    1.2.1 • Public • Published

    Gatsby Source for Cosmic

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

    Install

    npm install --save gatsby-source-cosmicjs
    

    How to use

    Log into your Cosmic 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)
          limit: 1000, // The number of Objects to fetch on each request (optional)
        }
      },
    ]

    How to query and filter (Not Localized)

    You can query the nodes created from Cosmic 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 Gatsby starter:

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

    Install the Cosmic Gatsby localization starter:

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

    Install

    npm i gatsby-source-cosmicjs

    DownloadsWeekly Downloads

    335

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    11

    Homepage

    cosmicjs.com

    Last publish

    Collaborators

    • avatar
    • avatar