@wordpress/api-fetchつかってみた

WordPressのGutenbergの話題です。
RestAPIを実行するためのライブラリである@wordpress/api-fetchを使ってみました。

@wordpress/apiでも代用可能だと思いますが、TypeScriptで開発するとワーニングが表示されます。

GutenbergのRestAPI実行は@wordpress/apiでも代用できるようなのですが、読みにくいと思いました。
@wordpress/apiに比べると、@wordpress/api-fetchはaxiosに似た書き方にできるのでReactに慣れている人だと直感的に理解できそうです。

環境

WordPressは古いバージョンだと動かなかったです。
また、RestAPIを無効にする設定は入れないようにしてください。

• WordPress: 6.2.2
• PHP: 7.4
• @wordpress/api-fetch: 6.40.0

今回利用するエンドポイント

wp_optionsテーブルを更新するためのRest APIのエンドポイントを利用します。

サンプルとして作ってみるプラグイン

テキストを入力してSaveすると、入力内容がwp_optionsテーブルに保存される機能を作りました。

解説

大体の作り方は以下の記事を読めばわかるはずなので、本記事ではapi-fetch部分だけに絞って解説します。

Getの使い方（@wordpress/api-fetch）

@wordpress/api-fetchを読み込みます。

import apiFetch from "@wordpress/api-fetch"

Interfaceを宣言します。

interface ISettings {
  waf_settings: {
    waf_text: string
  }
}

apiFetchを実行します。
戻り値を格納する変数の型を指定するところがポイントです。
型指定をしない場合、unknownになるので扱いにくくなります。

 const response: ISettings = await apiFetch({
   path: "/index.php?rest_route=/wp/v2/settings/",
})

Postの使い方（@wordpress/api-fetch）

methodにPOSTを指定し、dataのところにリクエストのBody部分を記述することができます。

await apiFetch({
  path: "/index.php?rest_route=/wp/v2/settings/",
  method: "POST",
  data: {
    waf_settings: {
      waf_text: wafText,
    },
  },
})

コード

Gutenberg側のコードを貼ります。

GitHub

また、全体的なコードも公開しています。

GitHub – taako-502/wp-api-fetch: @word…

GitHub – taako-502/wp-api-fetch: @word…

@wordpress/api-fetchを使ったサンプルプログラム. Contribute to taako-502/wp-api-fetch development by creating an account on GitHub.

@wordpress/api-fetchを使ったサンプルプログラム. Contribute to taako-502/wp-api-fetch development by creating an account on GitHub.

まとめ

@wordpress/api-fetchの日本語記事を見つけることができなかったので書きました。
TypeScriptで開発するなら@wordpress/api-fetchを利用するのが便利だと思います。