💨 Nuxt.js + WP REST API で静的サイトをビルドする際の各ページへのデータ受け渡し方法

2020-12-30 /Development

この記事は最終更新日から4年以上経過しています。

Nuxt.js + WordPress で静的サイトを構築する際、パーマリンクに slug を使いたい場合と id を使いたい場合があると思うのですが、 nuxt.config.js に書く generate と各ページの asyncData 部分とでデータを受け渡しする記述をどう書き分けたらよいのかちょっと迷ってしまったのでメモ。

nuxt.config.js:

コピーしました
//...

generate: {
  interval: 1000,
  async routes() {
    const baseURL = "https://<site-url>";
    const [posts, pages] = await Promise.all([
      axios
        .get(`${baseURL}/wp-json/wp/v2/posts`)
        .then(response => {
          return response.data;
        })
        .catch(error => {
          return { error: error };
        }),
      axios
        .get(`${baseURL}/wp-json/wp/v2/pages`)
        .then(response => {
          return response.data;
        })
        .catch(error => {
          return { error: error };
        })
    ]);
    let post_routes = posts.map(page => {
      return {
        route: "/posts/" + page.id,
        payload: { page }
      };
    });
    let page_routes = pages.map(page => {
      return {
        route: "/" + encodeURI(page.slug),
        payload: { page }
      };
    });
    return [...post_routes, ...page_routes];
  }
}

//...

payload でデータを渡している部分は、動的なページ上では以下みたいな感じ記述しておくと、yarn dev で開発中の時と、yarn generate でビルドする時とでそれぞれ良いようにデータを読んでくれます。

/posts/_id.html

コピーしました
async asyncData ({ $axios, params, error, payload }) {
  if (payload) return { post: payload }
  const baseURL = "https://<site-url>";
  const endpoint = `${baseURL}/wp-json/wp/v2/posts/${params.id}`;
  return await $axios
    .get(endpoint)
    .then(response => {
      return { post: response.data };
    })
    .catch(error => {
      return { error: error };
    });
}

/_slug.html

コピーしました
async asyncData ({ $axios, params, error, payload }) {
  if (payload) return { post: payload }
  const baseURL = "https://<site-url>";
  const endpoint = `${baseURL}/wp-json/wp/v2/?slug=${encodeURI(params.slag)}`;
  return await $axios
    .get(endpoint)
    .then(response => {
      return { post: response.data };
    })
    .catch(error => {
      return { error: error };
    });
}

baseURL は上ではわかりやすいように asyncData に入れて書いたのですが、実際には /plugin/axios.js とかに以下みたいな感じで書いておきます（acf や自前の api を呼ぶ事もあると思うので　/wp-json/wp/v2/ とかまでは入れ無いのが良さそう）。

コピーしました
export default function ({ $axios }) {
  $axios.defaults.baseURL = "https://<site-url>";
}