Gatsby plugin for BCMS

This is a Gatsby source plugin for the BCMS.

Getting started

Best way would be to create a new project using BCMS CLI by running bcms --website create, but if you want to add the plugin to an existing project, you will need to follow next steps.

• Install the plugin and its dependencies by running: npm i -D gatsby-source-bcms @becomes/cms-most @becomes/cms-client,
• In gatsby-config.js add the plugin:

import {createBcmsMostConfig} from '@becomes/cms-most';

...

plugins: [
  ...

  {
    resolve: 'gatsby-source-bcms',
    options: createBcmsMostConfig({
      cms: {
        origin: process.env.BCMS_API_ORIGIN || 'https://becomes-starter-projects.yourbcms.com',
        key: {
          id: process.env.BCMS_API_KEY || '629dcd4dbcf5017354af6fe8',
          secret: process.env.BCMS_API_KEY_SECRET || '7a3c5899f211c2d988770f7561330ed8b0a4b2b5481acc2855bb720729367896'
        }
      },
      media: {
        download: false
      }
    }),
  }
]

• If you do not add environment variables for your BCMS, as you can see, publicly available BCMS will be used.

Getting the BCMS data

There are 2 main way in which you can get data on Gatsby page. First is using Gatsby GraphQL and other is using Gatsby Node and BCMS Most.

GraphQL Query

Please have in mind that this is only an example and that you cannot just copy and paste it. This is because your BCMS might not contain data same as in this example.

pages/example.tsx

import { graphql } from 'gatsby';
import React, { FC } from 'react';
/**
 * This types are autogenerated by the BCMS Most. Have
 * in mind that you might not have them in your BCMS.
 */
import type { PagesEntry } from '../../bcms/types-ts';

interface Ctx {
  data: {
    page: {
      bcms: PagesEntry;
    };
  };
}

const Example: FC<Ctx> = ({ data }) => {
  return (
    <pre>
      <code>{JSON.stringify(data.page.bcms, null, '  ')}</code>
    </pre>
  );
};

export default Example;

export const query = graphql`
  query {
    page: bcmsPages(bcms: { meta: { en: { slug: { eq: "example" } } } }) {
      bcms {
        content {
          en {
            value
            type
            name
            isValueObject
            attrs {
              level
            }
          }
        }
        createdAt
        userId
        updatedAt
        templateId
        status
        meta {
          en {
            title
            slug
            cover_image {
              _id
              alt_text
              width
              src
              name
              height
              caption
            }
          }
        }
      }
    }
  }
`;

BCMS Most

Please have in mind that this is only an example and that you cannot just copy and paste it. This is because your BCMS might not contain data same as in this example.

templates/example.tsx

import React, { FC } from 'react';
/**
 * This types are autogenerated by the BCMS Most. Have
 * in mind that you might not have them in your BCMS.
 */
import { PagesEntry } from '../../bcms/types-ts';

interface Props {
  pageContext: {
    page: PagesEntry;
  };
}

const Example: FC<Props> = (props) => {
  const ctx = props.pageContext;
  return (
    <pre>
      <code>{JSON.stringify(ctx.page, null, '  ')}</code>
    </pre>
  );
};

export default Example;

gatsby-node.ts

import * as path from 'path';
import { CreatePagesArgs } from 'gatsby';
import { getBcmsMost } from 'gatsby-source-bcms';

export const createPages = async (data: CreatePagesArgs) => {
  const most = getBcmsMost();
  const {
    actions: { createPage },
  } = data;

  const examplePageData = await most.content.entry.findOne(
    'pages',
    async (item) => item.meta.en.slug === 'example',
  );
  createPage({
    component: path.resolve('src/templates/example.tsx'),
    path: '/example',
    context: {
      page: examplePageData,
    },
  });
};