Closed2022/04/06にクローズ4

全ページまたいでのタグ一覧表示コンポーネント

結局利用していないが、要素の属性を条件分岐させる時は値のほうで三項演算子など用いるのも有り。

activeClassName={isActive ? `bg-gray-500 text-white` : ''}

ke1ta

ゴールが先にできたので。

ke1ta

microCMS側で記事にタグを関連付けると、GraphQLのほうでもgroupを利用してそのタグに紐づく件数などを取得できる。
もしslugをそのまま表示させるだけでいいのであればfieldの値をslugのものに変えるだけでOK。
今回はslugと表示名とで分けており、groupの指定だけで表示名を取得しつつslugを取得する術が思いつかず...

allMicrocmsPosts {
        group(field: tags___id) {
          totalCount
          fieldValue
        }
      }

ke1ta

悔しいが効率の良い方法も分からずなので、タグの一覧も同時に取得し、2つのオブジェクト同士でidが合致した場合にオブジェクトをマージするという方法にした。
あとはjsxで出力する。

allMicrocmsPosts {
  group(field: tags___id) {
    totalCount
    fieldValue
  }
}
allMicrocmsTags {
  nodes {
    tagsId
    title
    slug
  }
}

const relatedTags = allMicrocmsArticles.group;
let allTags = allMicrocmsTags.nodes;
relatedTags.forEach((relatedTag) => {
 allTags.forEach((tag) => {
   if (tag.tagsId === relatedTag.fieldValue) {
     Object.assign(relatedTag, tag);
   }
 });
});

純粋にjs力が低くて悲しみを抱えてしまったが、とりあえず残していく😢

このスクラップは2022/04/06にクローズされました