Gridsomeをアップデートする

なにはともあれGridsomeをアップデートします。 npm outdated でpackage.jsonの記述をもとに更新があるライブラリを確認できるようです。Currentが現在のバージョン、Wantedがnpm updateを適用して更新されるバージョン、Latestが公開されている最新のバージョンということらしいです（参考）。

いくつかWantedとLatestが違うものがありましたがろくに確認せずすべて最新に上げました。今のところ問題なさそうなのでよかったです。

アップデート後にしたこと その1

アップデート後に開発サーバを起動したところ、コンソールに以下のような警告が出ました。

WARNING  Deprecation notices

The field Query.metaData is deprecated. Use Query.metadata instead. #1
The $id variable should be of type ID instead of String. #2

#1に関して、どうやらGrahpQLのフィールド名に変更が入る予定のようです。 公式ブログの記事のOther changesのあたりに以下の記述があったので、metaDataを使用していた箇所をmetadataに置換しました。

• Use addMetadata() instead of addMetaData().
• Use addCollection() instead of addContentType().
• Use metadata instead of metaData in the GraphQL schema and project config.

また#2に関しては、idの型はStringではなくID型を指定してくれとのことなので言われた通りに変更しました。 それぞれ修正したあと、開発サーバを再起動すると警告は消えるはずです。

現在はまだ警告が出るだけでmetaDataの記述のままでも動くようですが、そのうち切り替えがあると思うのでアップデートしたら早めに対応しておきましょう。

アップデート後にしたこと その2

先の公式ブログの記事を見たところ、どうやらvue-remarkというプラグインが追加されたらしいです。source-filesystem + transformaer-remarkと比較して優れている点は、MarkDown中にコンポーネントをインポートして使用できるというところではないでしょうか。これがないためにVuePressを使用されている方もいるかと思います。

今の所CodeSandboxやYouTube等のiframeを埋め込むコンポーネントを作るくらいしか使いみちは考えられていませんが、これらを別途プラグインを導入しなくても簡単に記事に挿入できるようになるのはかなりお手軽だと思います。

小物ですがDartのオンライン実行環境であるDartPadとYouTubeを埋め込むコンポーネントを作成してみたので別途紹介したいと思います。

source-filesystemからvue-remarkへの乗り換えにあたっての変更点

まず、gridsome.config.jsを以下のように書き換えました。

変更前

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/posts/*.md',
        typeName: 'Post',
        route: 'posts/:slug',
        refs: {
          tags: 'Tag',
        },
        remark: {
          plugins: ['@gridsome/remark-prismjs'],
        },
      },
    },
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'content/tags/*.md',
        typeName: 'Tag',
        route: 'tags/:id',
      },
    },
  ]
  transformers: {
    remark: {
      externalLinksTarget: '_blank',
      externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
      plugins: [],
    },
  },
}

変更後

module.exports = {
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'Tag',
        baseDir: './content/tags',
        pathPrefix: '/tags',
        template: './src/templates/Tag.vue',
      },
    },
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'Post',
        baseDir: './content/posts',
        pathPrefix: '/posts',
        template: './src/templates/Post.vue',
        refs: {
          tags: 'Tag',
        },
        remark: {
          externalLinksTarget: '_blank',
          externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
        },
        plugins: ['@gridsome/remark-prismjs'],
      },
    },
  ]
}

あとはPost.vueを以下のように変更しました。

-      <div v-html="post.content"></div>
+      <VueRemarkContent />

MarkDownのBody部分(というのでしょうか？FrontMatterではない部分)が自動的にVueRemarkContentに乗るようなので、他に使用していないならGraphQLのクエリからcontentのフィールドを削除しても大丈夫だと思います。

Tag.vueの方はFrontmatterのみのコンテンツのため、そちらのテンプレートは変更不要でした。

prism.jsが効かないとき

変更前のgridsome.config.jsではPostの設定が上になっていましたが変更後はTagのほうが上になっています。 詳細はGitHubのissuesでやり取りされていたのですが、不具合で最後のブロックに記述されたプラグインのみが有効になるらしい？とのことなので、暫定対応としてこのような順番になっています。

アップデート後にできるようになったこと

vue-remarkを使えるようになったほか、同じネットワーク内の他の端末(スマホ等)から開発サーバにアクセスできるようになりました。

開発サーバを起動するとコンソールに以下のように表示されます。

 DONE  Compiled successfully in 718ms


  Site running at:                                         
  - Local:                 http://localhost:8080/          
  - Network:               http://192.168.x.x:8080/        
                                                           
  Explore GraphQL data at: http://localhost:8080/___explore

Networkの方のアドレスにアクセスすると、他の端末からフロントの表示を確認できます。 スマホでの表示を手軽に実機で確認できるのは非常に便利ですね。