2023年2月にWordCamp Asia 2023で聞いた話をようやく試せたので、覚書です。

WP APIのレスポンスは情報が豊富

WordPressの記事やカテゴリなどのデータを取得・操作できるWP APIは、多くの情報をレスポンスに含めます。

% curl http://localhost:8881/wp-json/wp/v2/posts/1 | jq keys
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:-100  1811    0  1811    0     0   4793      0 --:--:-- --:--:-- --:--:--  4868
[
  "_links",
  "author",
  "categories",
  "comment_status",
  "content",
  "date",
  "date_gmt",
  "excerpt",
  "featured_media",
  "format",
  "guid",
  "id",
  "link",
  "meta",
  "modified",
  "modified_gmt",
  "ping_status",
  "slug",
  "status",
  "sticky",
  "tags",
  "template",
  "title",
  "type"
]

しかしAPIレスポンスを高速化したり、不要な情報をフロントエンドに露出させないために、レスポンスの内容を絞る必要が出てくることがあります。

_fieldsを利用して任意のフィールドのみ取得する

任意のフィールドだけ取得したい場合、APIリクエストのクエリパラメータとして_fieldsを渡しましょう。例えば次のリクエストでは、タイトルのみがレスポンスに含まれます。

% curl "http://localhost:8881/wp-json/wp/v2/posts/1?_fields=title" | jq .
{
  "title": {
    "rendered": "Hello world!"
  }
}

複数のフィールドを取得する場合は、カンマ区切りでフィールド名を指定します。

% curl "http://localhost:8881/wp-json/wp/v2/posts/1?_fields=title,guid" | jq .
{
  "guid": {
    "rendered": "http://localhost:8881/?p=1"
  },
  "title": {
    "rendered": "Hello world!"
  }
}

もしくは_fields[]で配列のように扱うこともできます。

% curl "http://localhost:8881/wp-json/wp/v2/posts/1?_fields[]=title&_fields[]=guid" | jq .

JavaScriptのfetchで_fieldsを指定する

JavaScriptでAPIを利用する場合、URLSearchParamsを利用して値が設定できます。

    const params = new URLSearchParams('')
    params.set('_fields', 'title, guid')
    const result = await fetch(`http://localhost:8881/wp-json/wp/v2/posts/1?${params.toString()}`)
    const response = await result.json()
    return c.json(response)

配列形式を取りたい場合は、appendを利用しましょう。

    const params = new URLSearchParams('')
    params.append('_fields[]', 'title')
    params.append('_fields[]', 'guid')
   const result = await fetch(`http://localhost:8881/wp-json/wp/v2/posts/1?${params.toString()}`)
    const response = await result.json()

参考記事

Global Parameters