はじめに

中野区在住の中野です。

gatsby-theme-blogのクエリを変更したいと思いハマったのでメモを残しておきます。

gatsby-theme-blogのQueryを変更する方法

  • やりたいこと
  • やったこと

やりたいこと

日付のフォーマットを YYYY/MM/DD に変更したかっただけです。

やったこと

シャドーイングする

  • 以下2つのクエリが書いてあるコアのファイルをシャドーイングする
src/gatsby-theme-blog-core/templates/post-query.js
src/gatsby-theme-blog-core/templates/posts-query.js
  • シャドーイングするとディレクトリ構造は以下のようになる
一部抜粋
├── gatsby-plugin-theme-ui
│   └── index.js
├── gatsby-theme-blog
│   └── components
│   ├── bio-content.js
│   ├── bio.js
│   ├── header.js
│   ├── home-footer.js
│   ├── layout.js
│   ├── post-date.js
│   ├── post-footer.js
│   ├── post-hero.js
│   ├── post-link.js
│   ├── post-list.js
│   ├── post-title.js
│   ├── post.js
│   ├── posts.js
│   └── seo.js
├── gatsby-theme-blog-core(new)
│   └── templates(new)
│   ├── post-query.js(new)
│   └── posts-query.js(new)

シャドーイングしたファイルのクエリ名を変更

  • 同じクエリ名だと怒られるのでそれぞれのクエリに CustomPrefix をつけて回避
query CustomPostPageQuery
query CustomPostsPageQuery

import先を変更する

  • 最後にimportするファイルを以下の2つに指定する
node_modules/gatsby-theme-blog/src/gatsby-theme-blog-core/components/post
node_modules/gatsby-theme-blog/src/gatsby-theme-blog-core/components/posts
  • 実際に対応したPR Queryを上書きできる
    • importのパスは alias を使っているので注意

さいごに

gatsby-theme-blog-core のクエリファイルをシャドーイングして gatsby-theme-blog の内部でシャドーイングしている gatsby-theme-blog-core のcomponentをimportする必要があったのがハマリポイントでした。

\ Share /

全人類同時接続数No.1!バトルロイヤルゲームを生き残れ!

中野区在住の中野です。大阪生まれ大阪育ちですが就職のタイミングで上京しました。食いっぱぐれないようにすることをモットーに生存戦略を常に考えている元ネトゲ廃人現フルリモートwebエンジニア。Twitterでメンターとして駆け出しエンジニアたちをサポートしています。最近の関心事はDDDとScrum。いずれ起業することを考えてプロダクトを作成中。このブログでは生存戦略を考える上で試行錯誤した内容を記録していきます。