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:

``js
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.

$3

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

`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 = ({ data }) => {
return (


      {JSON.stringify(data.page.bcms, null, '  ')}
    

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
}
}
}
}
}
}
;
`

$3

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

`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) => {
const ctx = props.pageContext;
return (


      {JSON.stringify(ctx.page, null, '  ')}
    

export default Example;
`

> gatsby-node.ts

`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,
},
});
};
``