gatsby-source-microcms


Source plugin for Gatsby from microCMS.

Install

``sh


npm

$ npm install gatsby-source-microcms

or yarn

$ yarn add gatsby-source-microcms
`

How to use

$3

First, to fetch contents from microCMS, you need setting options in gatsby-config.js.

`js
module.exports = {
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
apiKey: 'MICROCMS_API_KEY',
serviceId: 'myblog',
apis: [
{
endpoint: 'posts',
},
],
},
},
],
};
`

$3

You can query like the following. Gatsby create Pages based on microCMS contents.

`js
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions;

const result = await graphql(

{
allMicrocmsPost(sort: { fields: [createdAt], order: DESC }) {
edges {
node {
id
createdAt
}
}
}
}

);

if (result.errors) {
throw result.errors;
}

result.data.allMicrocmsPost.edges.forEach((post, index) => {
createPage({
path: post.node.id,
component: path.resolve('./src/templates/blog-post.js'),
context: {
slug: post.node.id,
},
});
});
};
`

$3

`js
module.exports = {
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
/**
* The authentication key required for API requests. (Required)
*
* Type: string.
**/
apiKey: '11111111-2222-3333-4444-555555555555',

/**
* Service information. (Required)
* xxxx.microcms.io
*
* Type: string.
**/
serviceId: 'xxxx',

/**
* API information. (Required)
* Multiple APIs can be specified.
*
* Type: array.
**/
apis: [
{
/**
* API endpoint name. (Required)
* https://xxxx.microcms.io/api/v1/posts
*
* Type: string.
**/
endpoint: 'posts',

/**
* Graphql type. (Optional)
* This is used in GraphQL queries.
* If type = 'post', the GraphQL types are named 'microcmsPost' and 'allMicrocmsPost'.
*
* Type: string.
* Default: endpoint value.
**/
type: 'post',

/**
* microCMS's content type('list' or 'object'). (Optional)
* if format is 'list', read all contents by fetching multiple times.
*
* Type: string.
* Default: 'list'.
**/
format: 'object',

/**
* API request query options. (Optional)
*
* Type:
* draftKey: string.
* limit: number.
* offset: number.
* fields: string.
* filters: string.
* depth: number.
* Default: {}.
**/
query: {
draftKey: 'DRAFT_KEY',
limit: 100,
offset: 40,
fields: ['id', 'title', 'body'].join(','),
filters: 'tag[exists]',
depth: 2,
},
},
],
},
},
],
};
`

#### filters

This plugin provides filters query building helper.

`js
// gatsby-config.js
const {
and,
contains,
exists,
} = require('gatsby-source-microcms/src/query-builder');

module.exports = {
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
apis: [
{
query: {
filters: and(contains('title', 'sale'), exists('tag')),
//=> title[contains]sale[and]tag[exists]
},
},
],
},
},
],
};
`

Helper list:

- equals (alias: eq)

`js
equals('gender', 'women');
//=> gender[equals]women
`

- notEquals (alias: neq)

`js
notEquals('gender', 'women');
//=> gender[not_equals]women
`

- lessThan (alias: lg)

`js
lessThan('createdAt', '2019-11');
//=> createdAt[less_than]2019-11
`

- greaterThan (alias: gt)

`js
greaterThan('createdAt', '2019-11');
//=> createdAt[greater_than]2019-11
`

- contains

`js
contains('title', 'sale');
//=> title[contains]sale
`

- exists

`js
exists('nextLink');
//=> nextLink[exists]
`

- notExists

`js
notExists('nextLink');
//=> nextLink[not_exists]
`

- beginsWith

`js
beginsWith('publishedAt', '2019-11');
//=> publishedAt[begins_with]2019-11
`

- and

`js
and('filter1', 'filter2', ..., 'filter10')
//=> filter1[and]filter2[and]...[and]filter10
`

- or

`js
or('filter1', 'filter2', ..., 'filter10')
//=> filter1[or]filter2[or]...[or]filter10
``

Contributing

日本語歓迎 🇯🇵
Pull Request, Issue お気軽にどうぞ。