@gridsome/source-wordpress
Version:
WordPress source for Gridsome
102 lines (82 loc) • 2.48 kB
Markdown
> WordPress source for Gridsome. This package is under development and
API might change before v1 is released.
- `yarn add @gridsome/source-wordpress`
- `npm install @gridsome/source-wordpress`
```js
module.exports = {
plugins: [
{
use: '@gridsome/source-wordpress',
options: {
baseUrl: 'WEBSITE_URL', // required
apiBase: 'wp-json',
typeName: 'WordPress',
perPage: 100,
concurrent: 10
}
}
],
templates: {
WordPressPost: '/:year/:month/:day/:slug'
}
}
```
Install the [ACF to REST API](https://github.com/airesvsg/acf-to-rest-api) plugin to make ACF fields available in the GraphQL schema.
**Exclude unnecessary data from ACF fields**
Gridsome needs the `Return format` set to `Post Object` for `Post Object` relations in order to resolve references automatically. But Gridsome only need the `post_type` and `id` to set up a working GraphQL reference. Use the filter below to exclude all other fields.
```php
add_filter( 'acf/format_value', function ( $value ) {
if ( $value instanceof WP_Post ) {
return [
'post_type' => $value->post_type,
'id' => $value->ID,
];
}
return $value;
}, 100 );
```
To use REST endpoints from plugins or defined in your theme add a `customEndpoints` array to source-wordpress options.
```js
use: '@gridsome/source-wordpress',
options: {
... // other source-wordpress options
customEndpoints: [
{
typeName: "WPMenu",
route: 'myApi/v1/menus',
}
]
}
```
If you are trying to query posts, you will need to add the `normalize: true` option to make sure the data is properly added:
```js
customEndpoints: [
{
typeName: "Posts",
route: "/wp/v2/posts",
normalize: true,
},
]
```
`customEndpoints` allow you to neatly create separate [Collections](https://gridsome.org/docs/collections/#collections) by querying different REST endpoints.
```js
customEndpoints: [
{
typeName: "Collection1",
route: "/wp/v2/posts?categories=<category_id>",
normalize: true,
},
{
typeName: "Collection2",
route: "/wp/v2/posts?tags=<tag_id>",
normalize: true,
},
]
```