うさぎのメモ帳

Nuxtで動的にサイトマップ (sitemap.xml) を作成する (use: ApolloClient)

2019年09月24日 - 2019年09月24日

nuxt-community/sitemap-module を使いました。
nuxt.config.js でApolloClientを利用するために、apollo-link も必要そうです。

apollo-link の使い方はこちら
このパッケージに、後に利用する apollo-client apollo-cache-inmemory apollo-link-http も含まれているようです。

はじめにパッケージをインストールします。

yarn add @nuxtjs/sitemap apollo-link 

次に nuxt.config.js の設定変更です。
sitemap.routes() にて、記事の一覧を取得して配列 (Promise) で返却すれば完了です。

nuxt.config.js

+import { ApolloClient } from 'apollo-client'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { createHttpLink } from 'apollo-link-http'
+import gql from 'graphql-tag'
...
  modules: [
    ...
+    '@nuxtjs/sitemap'
  ],
  ...
  sitemap: {
    gzip: true,
    defaults: {
      changefreq: 'weekly',
      priority: 0.2
    },
    async routes () {
      const client = new ApolloClient({
        link: createHttpLink({ uri: 'https://example.com:1337/graphql' }),
        cache: new InMemoryCache()
      })

      const { data: { allMemos } } = await client.query({
        query: gql`query {
          allMemos: memos {
            id
            updated_at
          }
        }`
      })

      return allMemos.map(memo => ({
        url: `/memo/${memo.id}`,
        lastmodISO: memo.updated_at
      }))
    }
  }