WP REST APIでURLSearchParams使用時に

WP REST APIを使用するときに、今まではリクエストURLにパラメーターを書いてました。

こんな感じで。

//localhost/wp-json/wp-/v2/posts/?per_page=10&_embed

ただ、上記だとあまりにも流用性に欠けるので、
パラメーターの部分にURLSearchParamsを使用することにしました。

ですが、_embedを指定しているにも関わらず_embeddedが取得されませんでした。

おそらくこの状況になっている方は、
パラメーターに_fieldsを指定しているのではないかと思われます。

そして、_fieldsの値はおそらくこんな状況かと。。。

title, excerpt, link, _embedded

そうなんです。これだと_embeddedが取得されません。

もちろん上記以外の状況で取得できていない場合もありますが、
そういった方でも参考になるかもしれませんので、ぜひご参考に。

# この記事で解決できること

WP REST APIのパラメーター設定時にURLSearchParamsを使用した際、
_embeddedのkeyがjsonに含まれない現象を解決できます。

前提

今回はaxiosを使用しますが、
リクエストの根本は同じですのでfetchでもなんでもござれです。

WP REST APIの仕様上、asyncawaitを使用していますので、コンパイルは必要です。

成功するコード例

成功するコード例は下記のとおりです。

成功するためのポイントは、8, 18, 19行目です。

失敗するコード: js

import axios from 'axios'

const fetchClient = axios.create({
  baseURL: `//localhost/wp-json/wp/v2/`,
})

const fetchDatas = async (type = 'posts', params = []) => {
  const setParam = new URLSearchParams(params)
  const datas = fetchClient.get(type, {params: setParam})
  .then( res => (res.data) )
  const result = await datas
  return result
}

const getPosts = async (param = []) => {
  const baseParam = {
    per_page: 3,
    '_embed': '',
    '_fields': 'title, excerpt, link, _embedded, _links',
  }
  const params = {...baseParam, ...param}
  const datas = await fetchDatas('posts', params)
  return datas
}

3～5行目

axiosの初期設定です。

今回はこのURLをベースに情報を取得すると仮定します。

7～13行目

データを取得するためのベースになる関数です。

8行目

引数のparamsをURLSearchParamsに変換しています。

そのまま配列を渡しても反映されませんので、必ずURLSearchParamsを使用するようにしましょう。

9行目

3行目で設定したaxiosの初期設定をベースにデータを取得します。

7行目fetchDatasの引数がtype='posts'params={'per_page: 3'}と仮定すると、
プレーンに書いた場合の状況は下記と同じです。

fetchClient.get('posts', {params: {'per_page: 3'}})