[B! next.js][graphql] ko-ya-maのブックマーク

ko-ya-ma id:ko-ya-ma

next.jsとgraphqlに関するko-ya-maのブックマーク (2)

next.jsでのファイルチャンク最適化の一例 - hiroppy's site
今回は graphql-codegen を使い説明します。今回の例は、graphql-codegen 以外でも発生する可能性がありますが自動生成系が一番顕著に影響がわかりやすいです。 graphql-codegen はよく、graphql のスキーマから typescript の型定義/react の hooks 等を自動生成するのに使われますが、これは next.js と組み合わせた場合、少しトリッキーな部分があります。 graphql-codegen はデフォルトでは 1 ファイルにすべて出力されますが、それに対し next.js は各ページを chunks として吐くため何も考えずに実装すると、バンドルされるファイル量が膨大になる可能性があります。next.config.js から webpack の設定を上書きできますが、optimization はかなり上書きしづらくそもそも上書
ko-ya-ma 2021/08/13
dev

graphql

next.js

performance

tips
リンク
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スキー
ko-ya-ma 2020/12/17
割り切りや工夫が実践的

dev

graphql

TypeScript

next.js

microservices
リンク
1