GraphQLのダイエット術 TypeScript Language Service Pluginで未使用フィールドをなくす

2024/11/16 5 users クエリ フィールド 記述 悪化 パフォーマンス低下

はじめに GraphQLは、API開発において柔軟性と効率性を提供する強力なツールです。しかし、クエリの記述が自由な分、クライアント側で不用意に多くのフィールドを要求してしまうと、パフォーマンス低下や保守性の悪化につながる可能性があります🥲 本記事では、TypeScript Language Service Pluginの1つであるGraphQLSPを... 続きを読む

GraphQL BatchでクライアントN+1を無理矢理倒す (事例紹介:株式会社ハウテレビジョン様)

2024/10/28 83 users LCP 事例紹介 内訳 計測 リクエスト

株式会社ハウテレビジョン様で、 質問箱サービスMondのパフォーマンス分析と改善を行いました。 内容としてはLCPの内訳の計測、その解決方法の提案、そして一番大きな問題だった GraphQL リクエストの最適化という話になります。 現時点で全ての問題の修正には至っていませんが、開発的には全ての問題の内訳が認識可能に... 続きを読む

GraphQL あるいは React における自律的なデータ取得について

2024/09/10 13 users React データ取得

From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE 続きを読む

TypeScriptとGraphQLを活用した変化に強いプロダクト作り

2024/09/06 7 users テック TypeScript Portfolio プロダクト

このデックは仮のものです。2024年9月9日(月) に更新します。 このデックでは、エラーレスポンス設計から考える、プロダクトの0→1開発におけるGraphQLへの向き合い方について紹介します。 Portfolio: bicsto… 続きを読む

GraphQL 界の Babel こと Envelop を使ってスキーマの破壊的変更をごまかす

2024/07/10 5 users gra LayerX Babel スキーマ バクラク事業部

この記事は LayerX のエンジニアブログがたくさん出る #ベッテク月間 の8記事目になります。こちらのカレンダーに、これまでの記事と今後出る予定がまとまっています。 LayerX のバクラク事業部には GraphQL Gateway というバクラク全プロダクトから参照される GraphQL スキーマが存在します[1]。今回の記事は、その Gra... 続きを読む

バックエンド視点で振り返るGraphQLを採用したプロダクト開発 - enechain Tech Blog

2024/06/25 21 users エラーハンドリング ソフトウェアエ enechain 展望

はじめに 技術スタック eScanチームにおけるGraphQLの使い方 開発フローの工夫 N+1問題の対応と注意点 エラーハンドリングの工夫 モニタリングの工夫 ドキュメンテーションを必須化するための工夫 その他の取り組み 振り返り 良かった点 難しかった点 今後の展望 最後に はじめに こんにちは、enechainでソフトウェアエ... 続きを読む

Why, after 6 years, I’m over GraphQL

2024/05/30 115 users why

GraphQL is an incredible piece of technology that has captured a lot of mindshare since I first started slinging it in production in 2018. You won’t have to look far back on this (rather inactive) blog to see I have previously championed this technology. After building many a React SPA on top of ... 続きを読む

TypeScriptとGraphQLで実現する型安全なAPI実装

2024/05/11 69 users TypeScript API実装

この記事はTSKaigi2024での以下の私の発表内容を書き下ろしたものです。 なぜAPIに型をつけたいのか 現代のWebのシステム開発において、クライアント・サーバーともに型のある言語で開発されることが増えてきました。静的な型検査はコードの堅牢性やよりよいメンテナンス性の向上をもたらします。 プログラミング内部だ... 続きを読む

GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model

2024/04/19 18 users articles Event Speaker Deck 事例

2024/04/19 「tsukiji.graphql」で発表したスライドです。 https://tsukiji-graphql.connpass.com/event/314173/ 参照したURL - https://mh4gf.dev/articles/tags/graphql - GraphQL 成熟度モデル - とろろこんぶろぐ - GraphQL を Server Components で使いたい - Speaker Deck 続きを読む

ネットスーパーアプリ GraphQL から REST へ移行始めました - every Tech Blog

2024/03/29 103 users REST 移行

はじめに こんにちは、retail HUBで Software Engineer をしているほんだです。 今回は私が現在着手している事業譲渡されたアプリを社内で持続的なプロダクト開発を行える状態にするリプレイスプロジェクトをどのように行っているか紹介しようと思います。 この記事ではリプレイスを行うにあたってどのようなことを課題... 続きを読む

Apollo Server 4へのアップデート手順

2024/03/15 7 users Apollo Server アップデート手順 EOL 現時点

はじめに こんにちは。 GMOソリューションパートナーのzakisanbaimanです。 GraphQLのOSSフレームワークであるApollo Serverのバージョン3が2024年10月22をもってEOLを迎えます。 それに伴って現時点（2024年3月）で最新バージョンである Apollo Server 4 へのアップデートが必要となるため、本記事で変更点および注意点... 続きを読む

TypeScript x GraphQLで2年開発してみて

2024/02/29 72 users

イベント「【タイミー/Voicy/令和トラベル】Backend LT〜技術選定における“見極める力”とは〜」での登壇資料 https://reiwatravel.connpass.com/event/306794/ 続きを読む

GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL

2024/02/08 134 users LayerX she スタディサプリ 実例 現場

2024/02/28 に「LayerX、スタディサプリ、SHEと考える　GraphQLが向いている現場とは？運用実践LT」で、内山高広( @highwide )が発表した資料です。 #Offers_GraphQL実践LT 続きを読む

Backend エンジニア視点からの GraphQL / GraphQL from a perspective of backend engineer

2024/02/08 103 users companies Rails Wantedly she 現場

"LayerX、スタディサプリ、SHEと考える　GraphQLが向いている現場とは？運用実践LT" で登壇した資料です。 引用した資料 [Rails アプリに RESTful API のレールを敷いて生産性が大きく上がった話 | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/85098) [React Server Components... 続きを読む

GraphQLのスカラーとTypeScriptの考察

2024/01/07 5 users スカラー TypeScript 知見 筆者 直近

皆さんこんにちは。筆者は最近、TypeScriptからGraphQLを使用するためのコード生成ツールnitrogqlを開発しています（初手宣伝）。 直近は、GraphQLのスカラーに関する機能拡張を行っていました。この記事では、そこで得た知見と考察について共有します。 GraphQLのスカラーとは GraphQLにおけるスカラーとは、それ以上分... 続きを読む

2023 年の Prettier 振り返り

2023/12/27 18 users TypeScript Prettier コードフォーマッタ

2023 年の Prettier の活動を振り返ります。 Prettier とは Prettier は JavaScript で書かれたコードフォーマッタです。設定可能な項目が少ないいわゆる opinionated なコードフォーマッタです。JavaScript や TypeScript だけではなく、HTML や CSS、GraphQL などもサポートしています。 リリース 2023 年は、メジャー... 続きを読む

React Server Components と GraphQL のアナロジー

2023/12/25 65 users アナロジー RSC App Router 案件 Next.js

Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を... 続きを読む

GraphQLをServer Componentsで使いたい

2023/10/31 10 users Server Components

BARフロントえんどう #1 「フロントエンドリアーキテクト」で使用した資料です！ https://cybozu.connpass.com/event/297123/ 続きを読む

GraphQLはいつ使うか、RESTとの比較

2023/10/04 169 users REST 観点 用途 ヒント 設計

さぼです、沖縄でWebと設計について考えてます。2023/09/23 に沖縄で行われたTechBaseOkinawa2023 にて上記のタイトルで登壇しました。 今回の内容は GraphQLを設計の観点から考えてみる GraphQLの目的や用途を整理する GraphQLを使う時、または使わない時のヒントを持ち帰ってもらう 最近、GraphQLじゃなくてRESTで良く... 続きを読む

クックパッドのフロントエンド CSS in JS をゼロランタイムに切り替えました - クックパッド開発者ブログ

2023/10/03 11 users クックパッド フロントエンド CSS in JS 我々 とおり

こんにちは。レシピサービス開発部クックパッドサービス基盤グループのkaorun343です。我々のチームではレシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログにて紹介したとおり、レシピサービスを Next.js ベースの新システムへと移行しています。今回は、こ... 続きを読む

GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog

2023/09/28 8 users レスポンス リグレッションテスト ユニットテスト story

GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し... 続きを読む

GraphQLはどんな時に使うか

2023/09/23 137 users

@saboyutaka 合同会社春秋 Tech Base Okinawa 2023 続きを読む

Relay-style GraphQL

2023/08/05 11 users

”The future Relay-style GraphQL is already here – it’s just not evenly distributed.” – William Gibson, probably “Relay-style GraphQL” is an opinionated way of consuming GraphQL in a React application, and probably better than whatever you’re currently doing. It follows the ideas pioneered by Meta... 続きを読む

9ヶ月かけて全ての API を REST から GraphQL にリプレースした話 - がぶちゃんの日記

2023/08/02 156 users サマリー REST API 変遷 移行

サマリー システム構成の変遷 創業フェーズ はじめての API と技術選定 GraphQL 移行直前 GraphQL への移行を決めたきっかけ GraphQL 移行方針 移行期間 ふりかえり 1つ目の方針は正解だった 2つ目の方針は微妙だったかもしれないけど、正解だったかもしれない 3つ目の方針はやはり苦戦した さいごに サマリー サービス... 続きを読む

GraphQLのFragment活用テクニック: colocationとmasking - ドワンゴ教育サービス開発者ブログ

2023/07/03 14 users colocation 知見 我々 中村 予備校

GraphQLのFragment活用テクニック: colocationとmasking こんにちは。N 予備校 Webフロントエンド開発チームの中村です。 現在開発中のZEN CompassではGraphQLを採用しました。我々のチームでは（そして私個人としても）GraphQLを採用したのは初めてだったのですが、実際に設計を進めていくうちに色々と知見を得ることが... 続きを読む