コンポーネントとGraphQLクエリの管理にFragment Colocactionを導入したら素晴らしかった件 - Uzabase for Engineers

はじめまして、NewsPicks Web Product Unitのじゆんきち(@junkisai)です。 弊チームでは、ここ1年間くらいWeb 版のNewsPicksを新しい基盤に置き換えるプロジェクト（以降、リアーキプロジェクト）を進めています。 新 Web 基盤のフロントエンドはReact (Next.js)+TypeScriptを採用しており、バックエンドとの通信にはGraphQL(Apollo) を採用しています。 今回はFragment Colocationという考え方を導入したら、これまで抱えていた技術的な課題が解消され、開発スピードが向上したお話をしようと思います。 導入前の課題 課題1. BFFとの通信回数が多い 課題2. クエリを書く際に必要な項目が漏れていたり、不要な項目が残ったままになる 課題3. ドメイン知識をもったコンポーネントの振り分けルールが曖昧 そこでFr