Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介

今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー

[takaesu]

Yahooの事例

[vyniled]

“レイアウト”

[nunohito]

“NestJS”

[saboyutaka]

Fragmentとgraphql-anywareなるほど

[ko-ya-ma]

割り切りや工夫が実践的

[Quramy]

ちゃんとコロケーション活用しててよき

[shimono-ryo]

“GraphQL”