2 min read

GridsomeのContributorsになりたいだけの人生だった

nabeen

まだ初期設定をしていない状態だったので、Getting started | Bledaに沿って Google Analytics や URL、サイト名の修正などをした。

修正中に、src/pages/Index.vue内でサイト名を表示したい部分が直打ちされていたので、これも合わせて修正対応を行おうと思い、対応を試みた。

<h1 class="text-4xl sm:text-5xl md:text-6xl font-sans font-bold mb-1">
  <g-link to="/" class="text-black">Bleda</g-link>
</h1>

同 Component 内で、this.config.hogehogeみたいな記述で設定値を読み出していたので、多分ここにプロパティが生えてるだろうなーという目論見でthis.configの中身を見ると、表示したいプロパティ(siteName)が存在していない...。

バグか?!バグなのか?!

ではこの config が何者かというと、Gridsome が build 時に生成してくれるファイルキャッシュ?のようなもので、~/.temp/config.jsにオブジェクトとして吐き出されている。

で、その中身はというとこうなっていた。

export default {
  trailingSlash: true,
  pathPrefix: '',
  titleTemplate: '%s | nabeen.me',
  siteUrl: 'https://www.nabeen.me',
  version: '0.7.8',
};

うん、なんか結構プロパティ少ないね。siteUrlとか吐くんだったらsiteNameも当然吐くんじゃないの?

バグか?!バグなのか?!

ここの対応方法としては、以下のような形でstatic-queryを叩いてやれば$static.metadata.siteNameが生えるようなので、<template></template>内で使用するのであれば、これで対応出来る。

<static-query>
query {
  metadata {
    siteName
    siteDescription
  }
}
</static-query>

この、<template></template>内で使用するのであれば、というのが今回の重要な部分で、実は今回はここだけではなく、metaInfo()内でも参照していた。

export default {
  metaInfo() {
    return {
      title: this.config.siteName,
      meta: [
        { property: 'og:title', content: this.config.siteName },
        { property: 'og:description', content: this.config.siteDescription },
        { name: 'twitter:title', content: this.config.siteName },
        { name: 'twitter:description', content: this.config.siteDescription },
      ],
    };
  },
};

言うまでもないが、これの戻り値は当然undefinedなので、こっちは完全にバグ。まぁ昔は生えてたのかもしれないけど、今は亡きプロパティなのだ。

metaInfo()Vue Metaの機能。少なくとも、metaInfo()が呼ばれた時点ではthis.$staticは生えてなかったので、ライフサイクルまで調べてわざわざハックする気にもなれず、ここらで諦め。

せめてもの共通化ってことで、data()でプロパティ生やして直打ちした。

モヤりだけが残った。

どこで生成しているのか

せっかく面白い?ものを踏んだので、この~/.temp/config.jsのプロパティを作っている部分を追ってみた。

gridsome/config.js at master · gridsome/gridsome

function genConfig({ config }) {
  const { version } = require('../../../package.json');
  const { permalinks, titleTemplate, _pathPrefix, siteUrl } = config;

  return `export default ${JSON.stringify(
    {
      trailingSlash: permalinks.trailingSlash,
      pathPrefix: _pathPrefix,
      titleTemplate,
      siteUrl,
      version,
    },
    null,
    2
  )}`;
}

module.exports = genConfig;

なるほどなるほど、これを見る限りは強い意志を持ってこのプロパティだけを選んでいるように見えるな。

プロパティ生やしちゃダメなのか?

もうちょっと追ってみると、僕と同じことを言っている issues に遭遇。

Add store metaData to .temp/config by jojobyte · Pull Request #503 · gridsome/gridsome

This solves an issue with overriding the siteName and siteDescription defined in gridsome.config.js with data from the Ghost source plugin. Hopefully it should function with any of the source plugins.

The ghost plugin overrides the titleTemplate if siteName is changed, but may be nice if that was optional. Might also make sense to add that to codgen/config.js so that it is automatic for all sources.

まぁ雑に言うと僕と同じく「もっとプロパティ生やそうぜ!」って言ってるんだけど、下の方でstatic-queryでやってくれい!って言われて、終わってた(モノによってプロパティがない場合もあってうんぬんって話をされてて、そこは納得している)。

いや、そりゃわかってるわ!

まぁそのあとで色々いい感じに検討してみるよーって感じで締めてあるんだけど、現状まだ変わりなし。

追加自体は簡単なので、サクッと PR チャンスだぜー!とか思ってたんだけど、完全に設計思想の違いってオチでした。

めでたしめでたし。

P.S.

metaInfo()内で使うときもいい感じにライフサイクルを変えて、this.$static使えるようになるよーとかあったら教えてください 🙏

そもそも他にもっといいやり方あるやでってツッコミもお待ちしています 🙏