https://github.com/microcmsio/gatsby-source-microcms
:memo: Source plugin for Gatsby from microCMS.
https://github.com/microcmsio/gatsby-source-microcms
Last synced: 10 months ago
JSON representation
:memo: Source plugin for Gatsby from microCMS.
- Host: GitHub
- URL: https://github.com/microcmsio/gatsby-source-microcms
- Owner: microcmsio
- Created: 2019-10-21T02:17:11.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:14:16.000Z (over 3 years ago)
- Last Synced: 2025-08-18T01:35:52.005Z (10 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-source-microcms
- Size: 570 KB
- Stars: 26
- Watchers: 3
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# gatsby-source-microcms
[](https://www.npmjs.com/package/gatsby-source-microcms)
[](https://packagephobia.now.sh/result?p=gatsby-source-microcms)
Source plugin for Gatsby from [microCMS](https://microcms.io/).
## Install
```sh
# npm
$ npm install gatsby-source-microcms
# or yarn
$ yarn add gatsby-source-microcms
```
## How to use
### gatsby-config.js
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',
},
],
},
},
],
};
```
### gatsby-node.js
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,
},
});
});
};
```
### Options
```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](https://microcms.io/blog/filters-parameter/) 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 お気軽にどうぞ。