GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui…
GraphQL実践ノウハウ/graphql-knowhow
GraphQL実践ノウハウv2 https://speakerdeck.com/sonatard/graphql-knowhow-v2 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui…
Rails+Next.jsでGraphQLを導入する時に考えたこと - Timee Product Team Blog
こんにちは、タイミー開発プラットフォームチームで業務委託として働いている宮城です。 タイミーはリリースから4年が経過したプロダクトで、2022年の前半から一部領域でGraphQLを利用し始め現在導入を進めています。 本記事では、GraphQLをプロダクトに導入する上で判断に迷った箇所や課題に対して、タイミーでの意思決定とその理由を紹介します。参考にしていただければ幸いです。 GraphQLの選定理由についてはこの記事では触れませんが、CTOの@kameike が以下のイベントで詳しく紹介する予定です。まだ参加申し込みは可能ですので、興味がある方はぜひ合わせてご覧ください。 timeedev.connpass.com なお、本記事のタイトルはソウゾウさんの以下の記事にインスパイアされています。 engineering.mercari.com GraphQLの「Getting Startedの
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
2022年10月1日に開催された #postdev での発表です
GraphQLは90%のウェブサービス開発者にはまだ時期尚早ではないか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? PySpa統合思念体です。チャットで話をしたことのまとめです。何人かで雑に話をしたことのまとめで、特定の誰かの発言というわけではなく、一種の怪文書です。 さて、GraphQLが世間を賑わせ始めています。Facebookが開発し、GitHubも機能提供をし始めました。GraphQLはRESTの未来か？みたいな論調もありますが、新しいものが出てくると既存のものをサンドバックにして「まだそんな古いの使ってやがるのかよwwwww」みたいな煽りをするのはもはやウェブ界隈の風物詩になっていますが、そういう信者発言をして「ああ、あいつまた踊らされてる
Reactの状態管理の変遷に関する自分史 From 2014 To 2022
はじめに 2014年にReactを触りはじめて以降、2022年現在まで集中の度合いにバラツキはあるものの、ずっとReactでなんらかのアプリケーションを書いてきました。 その中で様々なアーキテクチャや設計に関する議論がありましたが、特に状態管理についての変遷を自身の体験をもとにまとめてみたいと思います。 多分に昔話的な内容なものの、適度に読み飛ばしてもらいつつ、Reactの状態管理のやや偏った歴史と現在地点の認識の共有になればと思います。 2014- | Reactの導入 - Flux SPA iPhone 4Sが出てスマートフォンを持つ人も多くなり、エンジニアでなくても多くの人が日常的にGmailやMapアプリケーションに触れるようになった時期だったと記憶します。 Webアプリケーションの構築でもフロントエンドへの要求レベルが高くなっていた感覚があり、JavaScriptで動的なView
RESTful API との比較で GraphQL API を作ることの難しさ｜qsona
上の資料でも書いてるんですが、要点を言うと以下のようなことを主張している。 API の設計手法として、以下の2つのパターンが考えられる ・Resource-based API ・Usecase-based API Usecase-based というのは要はクライアントの要求にそのまま沿った形で API を作るということだ。しかし、UI やその他クライアントの要求というのは変わりやすいものなので、そのたびにいちいち API を変更しないといけないとか、API に一貫性がなくて使いにくいとか、1つの endpoint で多数の要求に対処する "神API" が作られてパフォーマンスが悪化する、というような問題が起こる。 したがって、注意深く RESTful API を設計すると Resource-based になる。ここで言っている Resource というのはテーブル設計にやや近いが、そのまま
Production Ready GraphQLはGraphQLを採用するなら必ず読んでおきたい良書
タイトルのとおりです。この本を読まずにGraphQLについての記事を書いたりしツイートしてたのが恥ずかしいくらいに良質なプラクティスが記載されています。GraphQLを採用して悩むことのほとんどはこの本に書いてあるくらいな印象で、この本を読むと効率よくGraphQLを使った開発の品質を向上できると思います。 どんな人が書いた本なのか 著者はMarc-André Girouxという方で、GitHubとShopifyに勤務しGraphQL APIを開発する仕事をしていたと書籍に書いてあります。GraphQLをやってる人ならこの時点でもう刺さったかもしれませんが、どちらの企業もGraphQLを採用していることで有名です。GraphQLスキーマを設計する上でGitHubやShopifyのスキーマや記事を参考にする方も多いのではないでしょうか。その両方で働いてたという時点で納得の説得力です。Grap
GraphQLとPersisted Query - Qiita
最近、GraphQL APIをインターネット上に晒す上で何を考慮したらいいのだろうか、的なことを考える機会が多く、空いた時間でチマチマと素振りしています。 今日はGraphQLのクライアント - サーバー間に挟むリバプロ的な機能について書いてみようと思います。 やりたいこと 1. 想定しないクエリの排除 例えばECやメディアサイトのような、未ログインでも情報の閲覧が可能なサービスのWeb API層をGrahpQLで実装したとします。ECにしろメディアにしろ、詳細ページでの回遊率を上げるため、詳細同士を関連付けるようなスキーマ設計となるのは自然なことでしょう。 GrahpQLのスキーマ定義で書くと、下記のようなイメージです。
GraphQL クライアント周りで知っておくと良さそうなこと
GraphQL クライアントの選び方について 現状大きく次のような選択肢があります。 Apollo Client Relay Urql 他に react-query や SWR などの GraphQL に特化していないものを使うこともできるらしいがあまりメリットがピンときていない GraphQL クライアントにやってもらいたいこと 上記は Web の GraphQL クライアントの比較しか書いておらず、他のプラットフォーム(Flutter とか)でも選定軸が持てるように、もう少し "GraphQL クライアント" と呼ばれるものに何を期待しているのかを書き出してみる。 graphql リクエストを送れる 最低限の機能です。 エンドポイント、認証トークン は共通のものとして準備して、あとはクエリをのっけたらリクエストが作れたらいいでしょう。 キャッシュを保ってくれる キャッシュの正規化ってな
メルカリ Shops での NestJS を使った GraphQL Server の実装 | メルカリエンジニアリング
ソウゾウの Software Engineer をやっています、@mookjp です。 8/10 の記事「メルカリShopsの技術スタックと、その選定理由」では、メルカリ Shops のアーキテクチャについて、その全体像を紹介しました。 この記事では、そのうちの BFF（Backend for Frontend） レイヤとして用意した GraphQL サーバについて、NestJS を使った実装例を交えて紹介します。 GraphQL とは GraphQL サーバ周辺の構成 NestJS とは GraphQL Module NestJS で Code First なスキーマ定義をする Object types の定義 Query と Mutation の定義 GraphQL スキーマの生成 スキーマの Breaking Change （破壊的変更）を防ぐ DataLoader を使って Bat
Home (GraphQL-Codegen)
Generate Code InstantlyGenerate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format. Customize EasilyGenerate code from your GraphQL schema and GraphQL operations with a single function call regardless of your environment or code format
graphql-codegen を用いた GraphQL, TypeScript, React-Hooks の連携
graphql-codegen を用いた GraphQL, TypeScript, React-Hooks の連携Tweet 実際のコード https://github.com/superyusuke/react-typescript-apollo-bff-codegen youtube へのリンク https://youtu.be/XJSTqUQQ9GQ GraphQL Codegen を用いて GraphQL のコードから型安全な TypeScript 開発に必要なコードを生成できる Sever 側 Schema に対応した TypeScript の型を生成する Resovler の型を Schema から生成する Server の Context の型を生成する（Apollo Server を立てるときに外から注入した DB や、Apollo Sever への request に含ま
GraphQLのN+1問題を解決する DataLoaderの使い方 - 一休.com Developers Blog
こんにちは。宿泊事業本部の宇都宮です。この記事では、GraphQLサーバ実装時に遭遇するN+1問題と、その解決のために使えるライブラリを紹介します。 フィールド単位でresolverを用意する N+1問題 GoのDataLoaderライブラリ DataLoaderの仕組み DataLoaderのサンプルコード DataLoaderとDataDog APM むすび 採用情報 フィールド単位でresolverを用意する GraphQLでは、クライアントのクエリに応じてオンデマンドに結果を取得できます。 たとえば、以下のクエリを投げると… { accommodation(accommodationId: "00001050") { name } } 以下のようなレスポンスが取得できます。 { "data": { "accommodation": { "name": "マンダリン オリエンタル 東
Go + gqlgenを使ったGraphQLアプリケーションサーバーの実装 | Money Forward Kessai TECH BLOG
MF KESSAIでバックエンドのエンジニアをやっている@garsueです。 先日、社内向けサービスの新規開発でGraphQLを採用することになりました。 今回はその経緯や実装方法についていくつか参考記事を交えながら紹介していきます。 なぜGraphQLか 今回新規で開発するサービスは以下のような特徴があります。 MF KESSAIの内部は複数のサービスに分かれていて、それらをふんだんに利用する 社内向けなので直近でそこまで高負荷になる見込みはない フロントエンドとバックエンドのすり合わせにあまり時間をかけたくない（そんなに時間はない） まず複数サービスとの協調という点について、マイクロサービスをベースとしたGraphQLとGoによる開発を紹介した記事Using GraphQL with Microservices in Goにある内容をそのまま適用できそうだなというところからGraphQ
未知の道に突入せず、まずは半分知ってるくらいの状態になる - hitode909の日記
Perl製アプリケーションからGraphQLを喋ってみたい、ということがあって昨年末に2週間くらいでプロトタイピングしていた。 CPANにGraphQLというライブラリが公開されていて、社内の利用実績もあるので、これをいきなり使ってみても良かったのだけど、自分はGraphQLについては、耳では知っていて、GitHubのAPIを呼び出したことがある、くらいで、実際に実装したことはなかった。 このような状態で突き進むと、問題に遭遇したときに2パターンの怪しさが出てきて、切り分けていくことになる。未知のものが多すぎて、プロジェクトXの、トンネルを掘るだけで難しいのに現地の言葉はわからない、みたいな回をイメージしてください。 GraphQL自体への理解が間違っているパターン スキーマ、クエリの書き方が悪い、概念を勘違いしている、など PerlでのGraphQLライブラリの使い方が間違っているパター
Incremental Data Delivery with GraphQL defer and stream
これは GraphQL Advent Calendar 2020 16 日目の記事です（しかも 12 日目の記事と結構内容が被ってしまって切ない…） このエントリでは、GraphQL の @defer と @stream というディレクティブについて書いていく。色々書いていたら割と長くなってしまったが、内容は下記のとおり。 このディレクティブの登場背景ディレクティブの Specgraphql-js を用いた利用サンプル@defer / @stream とは何か@defer と @stream は共にデータの取得方法を制御するためのディレクティブだ。名前が示すとおり、クエリ全体から特定の箇所の読み込みを遅延させたり、ストリーミングさせることができる。2020 年末現在、GraphQL spec としては Stage 2（草案段階）であり、参照実装である graphql-js にも実装が存在し
レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ
技術部の外村（@hokaccha）です。今回はクックパッドのウェブサイトのフロントエンドを Next.js などを使って作り直している話を書きます。 この記事で紹介する新システムは、スマートフォン向けのレシピページで確認することができます。もし興味があるかたはレシピページをスマートフォンのユーザーエージェントで開いて DevTools などで確認してみてください。 Next.js と GraphQL で動いているのがわかると思います。 ご存じの方も多いかもしれませんが、クックパッドのウェブサイトはモノリシックな Rails で作られていて、10年以上 Rails で開発を続けてきました。10 年以上同じシステムで開発を重ねれば当然レガシーな部分が大量に生まれてきますが、特にフロントエンドはその影響が顕著でした。 どこから使われているかわからない CSS が大量にある、JS のコードは昔なが
Apollo なら爆速で GraphQL サーバーと GraphQL クライアントアプリが作れる - Qiita
はじめに 最近気になっていた Apollo について、1 から調べてみました。Apollo 入門記事の位置付けを目指しています。 よって、本記事は以下のような読者を対象にしています。 Apollo って聞いたことはあるけど、何ができるのかよくわからない 気にはなってたけど、日本語の情報が少なくて調べる気になれない バックエンドのツールなのかフロントエンドのツールなのか、話はそれからだ 本記事の内容 Apollo の簡単な概要 Apollo を使って GraphQL サーバーを建ててみる Apollo を使って GraphQL サーバーを利用する React アプリを作ってみる Apollo の簡単な概要 公式ページはここです。 以下の画像が思想の全てを語っていると思います。 すべてが A(pollo)になる。 Apollo を利用することで、あらゆるデータが GraphQL サーバーとして
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQLとの向き合い方2022年版
GraphQL を利用したアーキテクチャの勘所 / Architecture practices with GraphQL
