WP APIで記事の全権取得を行う場合は、response headerを使う

WordPressの記事情報をWP APIで取得する場合、「101件以上のデータをどう取得するか」が実装時のポイントとなります。WP APIは一度に100件まで記事情報を取得できます。そのため、長期的に運用するサイトや、大規模なサイトを構築する場合には、101件目より後の情報をどのように取得するかを知る必要があります。

もっとも簡単な方法は、アプリケーション側で「何ページ目か」の状態を持つことです。しかし実は、APIレスポンスを利用することで、よりシンプルかつ柔軟に再帰処理がつくれます。

レスポンスヘッダーのLinkからURLを取得する

レスポンスから処理を作る場合、Linkヘッダーを利用します。Linkヘッダー内に、次の100件を取得するためのAPI URLが含まれていますので、次のようなコードで取得することができます。

const response = await fetch(‘https://example.com/wp-json/wp/v2/posts?per_page=100’)
const data = await response.json()
const nextPageUrl = response.headers.get(‘Link’)?.match(/<([^>]+)>; rel=”next”/)?.[1];

この処理を利用することで、次のような再帰的な記事取得関数が作れます。ここでは、次の100件を取得するためのAPI URLがレスポンスヘッダーから送られ続けている限り、APIを再帰的に呼びだす処理を実装しています。

const fetchAllPost = async (apiUrl: string, posts: WPPost[] = []): Promise<WPPost[]> => {
    console.log(apiUrl)
    const response = await fetch(apiUrl)
    if (!response.ok) {
        console.log("Failed to fetch: %s", apiUrl)
        console.log(response)
        return posts
    }
    const data = await response.json()
    const newPosts = [...posts, ...data as WPPost[]]
    const nextPageUrl = response.headers.get('Link')?.match(/<([^>]+)>; rel="next"/)?.[1];
    if (!nextPageUrl) {
        return newPosts
    }
    return fetchAllPost(nextPageUrl, newPosts)
}

レスポンスヘッダーを利用すると、送信したクエリ文字列も維持できる

レスポンスヘッダーを使うもう1つのメリットは、「クエリ文字列の維持」です。検索クエリや、取得するデータフィールドを指定している場合、クエリ文字列についても、通常アプリケーション側で状態として保持する必要があります。しかし今回の方法では、レスポンスヘッダーに含まれるURLを使うだけで解決します。WP APIは、送信されたクエリ文字列を維持した形で、APIをヘッダーに含めてくれるからです。

const posts = await fetchAllPost('https://example.com/wp-json/wp/v2/posts?per_page=100&_fields=title,meta,link,content,id')

WP APIの知られていない機能を活用して、バッチ処理やHeadless化を効率化しよう

このようにWP APIには、さまざまな開発を効率化するための追加情報がレスポンスに含まれています。これらを知り・活用することで、アプリケーションコードをよりシンプルかつメンテしやすい形で作ることができます。