Qandar

Q GridsomeのGraphQLのidはどうやって決まる?

公開日:2021年4月2日

Answer

idは、nodeのpathからハッシュ値を出して決定しています

Gridsomeのドキュメントでは、どのようにidを発行しているか説明されていませんが、@gridsome/source-filesystemでも、@gridsome/vue-remarkでも、オリジナルファイルのpathを元にidを決定しています。

ですので、タイトルやデータの中身が変更されても、ファイル名さえ同じであれば、idは不変です。逆に、ファイル名も1文字(1バイト)でも変えてしまうと、idが変わってしまうため、GraphQLのidをURLに使っている場合は、URLが変わってしまうので注意が必要です。

ソースコードをみてみる

この辺りの仕組みは、プラグインのソースコードを見ると仕組みが理解できます。

async createNodeOptions (file, actions) {
  const relPath = path.relative(this.context, file)
  const origin = path.join(this.context, file)
  const content = await fs.readFile(origin, 'utf8')
  const { dir, name, ext = '' } = path.parse(file)
  const mimeType = mime.lookup(file) || `application/x-${ext.replace('.', '')}`

  return {
    id: this.createUid(relPath),
    path: this.createPath({ dir, name }, actions),
    fileInfo: {
      extension: ext,
      directory: dir,
      path: file,
      name
    },
    internal: {
      mimeType,
      content,
      origin
    }
  }
}

idは、fileのrelPathを元にcreateUid関数で変換して決定しています。

createUidは何をしているかというと、

createUid (orgId) {
  return crypto.createHash('md5').update(orgId).digest('hex')
}

なので、ファイルのパスを元に、md5でハッシュを生成しているということになります。

gridsome/packages/source-filesystem/index.js | Github

Gridsomeで、GraphQLにデータを取り込むのは、@gridsome/source-filesystemと@gridsome/vue-remarkの2種類がありますが、@gridsome/vue-remarkは内部的には@gridsome/source-filesystemを使ってマークダウンファイルをインスタンス化しているようなので、仕組みは同じでしょう。

新着Q&A