Q. GridsomeのGraphQLのidはどうやって決まる?
公開日:2021年4月2日
A.nswer
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を使ってマークダウンファイルをインスタンス化しているようなので、仕組みは同じでしょう。