概要

GridsomeでWP REST APIをソースとして使おうとしたら躓いたので備忘録

起こったこと

ビルド時に401が返ってきてしまいコンテンツが取得できない

gridsome.config.js

module.exports = {
  siteName: "Gridsome",
  plugins: [
    {
      use: "@gridsome/source-wordpress",
      options: {
        baseUrl: "https://*****.com", // required
        typeName: "blog",
        apiBase: "wp-json",
        perPage: 10,
        concurrent: 1,
      },
    },
  ],
  templates: {
    BlogPost: "/:year/:month/:day",
  },
};

$gridsome develop
Gridsome v0.7.18

Initializing plugins...
Loading data from https://*****.com
Error: Status 401 - wp/v2/types
Error: Status 401 - wp/v2/users
Error: Status 401 - wp/v2/taxonomies
Load sources - 1.66s
︙

原因

WordPress側でREST APIのアクセスに制限がかかっていた

解決策

REST APIへのアクセス設定をデフォルトアクセスに設定する

WordPressのダッシュボードからセキュリティに移動

WordPressの微調整の項目の設定からREST APIをデフォルトアクセスに変更

再度ビルド

$gridsome develop
Gridsome v0.7.18

Initializing plugins...
Loading data from https://*****.com
︙
Load sources - 295.88s
Create GraphQL schema - 1.01s
Create pages and templates - 0.15s
Generate temporary code - 0.08s
Bootstrap finish - 298.35s


 DONE  Compiled successfully in 4009ms              18:42:34


  Site running at:                                         
  - Local:                 http://localhost:8080/          
  - Network:               http://192.168.10.8:8080/       
                                                           
  Explore GraphQL data at: http://localhost:8080/___explore

今度はエラーを吐かずにビルドができました
これでWP REST APIからコンテンツを取得することができるようになりました

終わりに

本来であれば認証が通るようにするのが正しいのですが、今回は取得の確認を行いたかったのでWordPress側の設定を変更しました
おそらくgridsome.config.jsにheaderとしてBearerを設定するのがセキュリティ的に正解……のハズ

参考

WP REST API 認証このページ崩れてるのって僕だけですかね？
Rest API restriction
Restrict WordPress REST API Access