NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出ハイクラスエンジニア向け転職・求人サイト。自社開発のWeb企業の求人多数！GitHub登録をすると、IT/Web企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
Reactの状態管理の変遷に関する自分史 From 2014 To 2022
はじめに 2014年にReactを触りはじめて以降、2022年現在まで集中の度合いにバラツキはあるものの、ずっとReactでなんらかのアプリケーションを書いてきました。 その中で様々なアーキテクチャや設計に関する議論がありましたが、特に状態管理についての変遷を自身の体験をもとにまとめてみたいと思います。 多分に昔話的な内容なものの、適度に読み飛ばしてもらいつつ、Reactの状態管理のやや偏った歴史と現在地点の認識の共有になればと思います。 2014- | Reactの導入 - Flux SPA iPhone 4Sが出てスマートフォンを持つ人も多くなり、エンジニアでなくても多くの人が日常的にGmailやMapアプリケーションに触れるようになった時期だったと記憶します。 Webアプリケーションの構築でもフロントエンドへの要求レベルが高くなっていた感覚があり、JavaScriptで動的なView
GraphQLの誤解/rethinking-graphql
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアー…
GraphQLを導入する時に考えておいたほうが良いこと | メルカリエンジニアリング
はじめに こんにちは、ソウゾウSoftware Engineerの@sue71です。連載：メルカリShops 開発の裏側 Vol.2の13日目を担当させていただきます。 以前メルカリメルカリShopsの技術スタックと、その選定理由でBFFの実装にGraphQLを採用していることをお伝えしました。メルカリShopsをリリースしてから約半年たった今、これまでを振り返ってGraphQLサーバーを実装する上での課題やあらかじめ考えておくと良い項目をまとめてみました。また、本記事ではメルカリShopsでGraphQLの実装としてApolloを採用しているため、Apolloの利用が前提の話もいくつか混在しています。予めご容赦ください。 GraphQLの説明や、メルカリShopsの実装方法に関しては以前こちらの記事で紹介しています。こちらも是非ご覧ください。 パフォーマンス課題 GraphQLは、アプリ
Production Ready GraphQLはGraphQLを採用するなら必ず読んでおきたい良書
タイトルのとおりです。この本を読まずにGraphQLについての記事を書いたりしツイートしてたのが恥ずかしいくらいに良質なプラクティスが記載されています。GraphQLを採用して悩むことのほとんどはこの本に書いてあるくらいな印象で、この本を読むと効率よくGraphQLを使った開発の品質を向上できると思います。 どんな人が書いた本なのか 著者はMarc-André Girouxという方で、GitHubとShopifyに勤務しGraphQL APIを開発する仕事をしていたと書籍に書いてあります。GraphQLをやってる人ならこの時点でもう刺さったかもしれませんが、どちらの企業もGraphQLを採用していることで有名です。GraphQLスキーマを設計する上でGitHubやShopifyのスキーマや記事を参考にする方も多いのではないでしょうか。その両方で働いてたという時点で納得の説得力です。Grap
バックエンドエンジニアが個人開発した話 (Go+Flutter+React with GraphQL)
はじめに この記事は、バックエンドエンジニアとして仕事をしている著者が、個人でサービスを作った記録です。 使用している技術は以下になります。 Go (gqlgen) - バックエンド TypeScript (React) - フロントエンド Dart (Flutter) - モバイル(ios, Android) GraphQL - API Firebase - 認証 MySQL - DB ConoHa - サーバー GCS - ストレージ CLIP STUDIO - 画像編集 土日を中心に、気が向いたら平日の夜も書く、という時間の使い方をして、ブラウザで動くようになるまでに1ヶ月、アプリを作るのに２週間 (Appleとのやり取りで更に2週間)程度かけて作りました。 iosの審査が終わって公開されたので、今は「これから何をしようかな」と考えているところです。 作ったもの Rabbytという、
GraphQLにおけるエラーハンドリングの実践 - Gaudiy Tech Blog
こんにちは。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでエンジニアをしている高島（@takashima_katsu）です。 Gaudiyでは現在、BFFレイヤとしてGraphQLサーバを利用しています。導入してから1年以上が経ちますが、スキーマ駆動開発はDXの向上につながっていると実感しています。（以下のブログが詳しいです。） techblog.gaudiy.com 今回は、GraphQLの利点を活かしたエラーハンドリングの方法について、Gaudiyでの実践をもとに書いてみたいと思います。エラーハンドリングの実装について課題感のある人や、現在GraphQL Errorsを使っている人に、ぜひ読んでいただけると嬉しいです。 1. エラーハンドリングとGraphQL 2. GraphQL Errorsにおける課題 3. GraphQLエラーハンドリングの実践 3-
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう
GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう 「GraphQLの仕様はなんとなく知っているけど、それを使ってどうアプリを作るのかいまいちイメージがわかない」 この本はそんなスキマを埋めるべく書きました。 近年ではReactをはじめフロントエンドの選択肢が豊富になっており、フロントエンドとバックエンド間のやりとりにはより汎用的かつ効率的な方法が求められます。 GraphQLはその選択肢のひとつです。本書では NestJS で GraphQLバックエンドを実装し、それをNext.jsから利用して、個人ブログサイトを構築してみます。 GraphQL開発の流れを体験し、ご自身のアプリ開発に役立ててください。 v1.10 refactor github deploy
ぼくのかんがえたさいきょうのデータフェッチ 2021Summer🏄♂️【Next.js / Hasura】
フロントエンドアプリケーションの開発を行う上で避けては通れないデータフェッチの実装。 REST APIを使うか、GraphQLを使うか、クライアントでキャッシュするか、APIレスポンスにどのようにして型を付けるか、状態管理はどうするのかなど、開発者の悩みが尽きないけれども、それに関しての設計を考えたり議論を行うのはフロントエンド開発の楽しいポイントだと僕は思っています。 この記事では、バックエンドにHasura、フロントエンドにNext.jsを使用する場合に僕が最強だと感じたツールの組み合わせ・使い方を紹介します。 モチベーション APIからのレスポンスにはTypeScriptの型が勝手についてきてほしい。asで型アサーションするのはやりたくない。 クライアントでもサーバー（SSR）でもデータフェッチの方法が同じインターフェースで提供されてほしい。 クライアントでAPIレスポンスをキャッシ
なぜGraphQLを採用するべきなのか、あるいはなぜ採用するべきではないのか 2021冬
この記事はGraphQL Advent Calendar 2021の22日目の記事です。 またこれは書籍、出来る100%TypeScript 作って学ぶNext.js + GraphQL + Prismaに掲載していたコラムに加筆修正を行ったものです。 GraphQLは一言でまとめてしまえばDSL(GraphQL query language)による宣言的な記述を介してGraphQLサーバーから柔軟にデータを取得/提供する事が出来る仕組みです。文法は全く異なりますが動作モデルとしてはSQLとRDBの関係に近いかもしれません。なおHTTP上で利用される事がほとんどですが特に決まりがあるわけではありません。 元々はFacebook社(現Meta社)で開発され2012年からfacebook.comで利用されている技術で、その後2015年にはオープンソース化されFacebook以外でも徐々に利用さ
GraphQL APIを作るときにテストをどう書いていくか - kymmt
こういうのはどうかという最近の考えを書いておきます。とはいっても、だいたいはgraphql-rubyのドキュメントに書いてあります。Rails + graphql-ruby + RSpecが前提です。 各フィールドのテスト フィールドから正しく値を取得できるか、つまりRailsのモデルとgraphql-rubyとの連携が正しいかという点をテストします。次のようにスキーマのオブジェクトから型情報を取得して、resolveを実行します。 # たとえば spec/graphql/types/user_type_spec.rb に書く user_type = MySchema.types['User'] user = FactoryBot.create(:user, name: 'Foo') expect(user_type.fields['name'].resolve(user, nil, ni
GraphQL でファイルをアップロードしたい - ESM アジャイル事業部 開発者ブログ
こんにちは、hibariya です。さいきん GraphQL でのファイルアップロード方法について知りたいなと思いちょっと検索してみたところ、すぐにはこれといった方法に辿りつけなかったので気になって調べました。手元で試した感じだと GraphQL multipart request specification という仕様が良さそうでしたので、今日はそのことについて紹介したいと思います。 GraphQL でのファイルアップロードはめんどう 現在のところ、GraphQL の仕様ではファイルアップロード方法については特に規定されていないため、自分たちで方法を決めて実装する必要があります。が、これは少し面倒です。HTTP で GraphQL を使う場合、サーバに渡す値はたいてい JSON のようなフォーマットでシリアライズしますが、FileオブジェクトはそのままJSONにはエンコードできません。
graphql-rubyのN+1を遅延ロードで解決する | VISITS TechBlog
技術開発部で主にバックエンド開発をしている浜田(@hamchance0215)です。 現在開発中のプロダクトのバックエンドはRails + graphql-rubyを使っています。 GraphQLを使った際のデメリットとしてN+1が発生しやすいということがよく言われます。 弊社でも例外ではなく、随所でN+1が発生していました。 今まではフロントエンドからの使われ方を考慮して、サクッと実装できる先読み(preload等)でN+1を回避していたのですが、クエリー数が増加したことでクエリーごとに使われ方を把握するのは難しくなってきたのと、同じクエリーであったとしても使われ方が多様化して先読みでは非効率になることが懸念されました(先読みが非効率になる件は後述します)。 そこで重い腰をあげて、遅延ロードを導入するために調査を行うことにしました。 ※この記事は執筆時点(2021/06)の情報で記載され
GraphQL Rubyと実際の開発 - Qiita
この記事はGLOBIS Advent Calendar 2020の19日目の記事です。 新規サービスの開発にバックエンドはRuby on Rails + GraphQL、クライアントサイドはReactを使っています。バックエンド側ではGraphQL Rubyをライブラリとして使用しています。実際にGraphQL Rubyを開発に盛り込んでしてきたことを書いていきます。 なぜ GraphQL + React を採用したのか 我々が現在開発中の新規サービスではサーバーサイドに GraphQL、フロントエンドに React.js を採用しました。 グロービスでサービス側はフロントエンドに React.js を主に採用しており知見・リソース共にサービス立ち上げの開発速度を担保するために十分でした。サーバーサイドについては Ruby on Rails を利用しており、APIについては Swagger
How to GraphQL with Ruby, Rails, Active Record, and no N+1—Martian Chronicles, Evil Martians’ team blog
You work on a mature web application that cleanly separates backend and frontend. The server-side code, written in Ruby, is mostly responsible for translating HTTP requests into SQL statements (with the help of an ORM) through rich and well-documented API. You choose GraphQL over REST to streamline your endpoints, but your database is not happy with all the extra queries. After much searching, you
Apollo Clientのキャッシュの仕組みとローカルの状態管理について
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
API設計が楽でコア業務に集中できるように。GraphQLで開発がどう変わったか？タクシーアプリGOの中の人に聞きました【技術選定の裏側：GraphQL編 vol.1】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出
GraphQLのあまり知られていない魅力 （スキーマの表現力編） / domain modeling with GraphQL Schema
GraphQLとの向き合い方2022年版
GraphQLは内部API向きか外部API向きか - Notes on GraphQL for Ruby