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

2020-12-30 /Development
この記事は最終更新日から2年以上経過しています。

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>";
}
Comment
comments powered by Disqus
Profile

石原 悠 / Yu Ishihara

デザインとプログラミングと編み物とヨーグルトが好きです。