GraphQL のレスポンスのモックデータの作成を補助する TypeScript ライブラリを作った - mizdra's blog
GraphQL を使って Web アプリケーションを実装していると、GraphQL API のリクエストをモックしたいことがあると思います。 ユニットテストのために、ダミーレスポンスに差し替えたい ビジュアルリグレッションテストのために、ダミーレスポンスに差し替えたい Storybook で story を書くために、ダミーレスポンスに差し替えたい バックエンドの resolver 実装を待たずにフロントエンド側の開発を始めるために、ダミーレスポンスに差し替えたい 一般には GraphQL Client にモックするための機能が実装されてるので、そうしたものを使うことが多いと思います。 zenn.dev また最近は Client よりも外側のレイヤーでリクエストを interrupt してモックする「msw」を使うケースも増えてきてます *1。 blog.engineer.adways.n
GraphQLで極力GET Requestを使いつつRequest-URI Too Largeを回避したい - スタディサプリ Product Team Blog
こんにちは、 Web フロントエンドエンジニアの @progfay です。 今回はプロジェクトで遭遇した URL 長による GraphQL Request の失敗と Apollo Link による解決方法を紹介します。 引数に配列を受け取る GraphQL field 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信に GraphQL を採用しています。 その中で、以下のような field を実装しています。 type Query { entities(ids: [ID!]!): [Entity!]! } これに対して、以下のような Query を叩きます。 query specificEntities($ids: [ID!]!) { entities(ids: $ids) { name } } Request-URI Too Large ある日、この
はじめに ここ1,2週間くらいで GraphQL を Rails プロジェクトに導入したので、知見を共有できたらと思い書いていきます。 ハマったことを、解決したことと未だに困っていることに分けて書いていきます。 解決したこと graphql-ruby の ドキュメントが古く、最新の書き方がわからなかった graphql-rubyの commit 履歴を見て、ドキュメント、モジュールが古い場合は気をつけて使うようにしましょう。 重要! 5月頃リリースされたv1.8.0から大きく変わり、 class-based API になりました。 class-based APIの実装はこちらを参照してください。 http://graphql-ruby.org/schema/class_based_api 例えば、 Get Started の中で 以下のように genarate してくださいとありますが、こ
2018/03/03 YAPC::Okinawa 2018 ONNASON
REST APIs are REST-in-Peace APIs. Long Live GraphQL.
Update: This article is now part of my “Complete Introduction to GraphQL”.Read the updated version of this content and more about GraphQL at jscomplete.com/why-graphql.After years of dealing with REST APIs, when I first learned about GraphQL and the problems it’s attempting to solve, I could not resist tweeting the exact title of this article. Of course, back then, it was just an attempt by me at
GitHub - graphql-nexus/nexus: Code-First, Type-Safe, GraphQL Schema Construction
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Facebook’s GraphQL gets its own open-source foundation – TechCrunch
GraphQL, the Facebook-incubated data query language, is moving into its own open-source foundation. Like so many other similar open-source foundations, the aptly named GraphQL Foundation will be hosted by the Linux Foundation. Facebook announced GraphQL back in 2012 and open sourced it in 2015. Today, it’s being used by companies that range from Airbnb to Audi, GitHub, Netflix, Shopify, Twitter an
この記事はSmartDrive Advent Calendar 2017の4日目の記事です。 こんにちは、SmartDriveでバックエンドエンジニアをしている@ryota-koganezawa です。これからローンチ予定のプロダクトに導入したGraphQL(ruby）と各種プラグインついてお話しします。 また、できるだけ簡潔に記述することを目的にしています。詳しいことを知りたい方は他の記事を参考にしてください。 主に下記について触れていきたいと思います。 GraphQLとは？ GraphQLを採用した理由 GraphQL-rubyのCacheにおけるTips GraphQL-rubyのN+1対応 GraphQLのAPIドキュメント インターフェイス 感想 おわりに GraphQLとは？ 2012年にFacebookが開発、2015年7月にRFCドラフト案を公開 クライアント・サーバアプリ
GraphQL Scalars便利だなぁ🚀
こんにちは、yunbooです。 今回はThe Guildという組織が開発しているGraphQLエコシステムのGraphQL Scalarsについての記事です。 余談なんですが、The Guildは今回紹介するGraphQL Scalars以外にも様々なエコシステムを提供しており、その代表格としてはGraphQL Code Generatorがあると思います。 他にも、たくさん便利なものを提供しているので、もろもろ見てみると役に立つ情報が得られたり、面白いと思います。 さて、本題ですがGraphQL Scalarsについて説明する前の前提知識として、GraphQLのScalar型について軽く説明します。 Scalar型とは GraphQLにはスキーマを定義する際に型が存在しますが、Scalar型とは プリミティブな値を表すもの フィールドが最終的に変換される、それ以上に分割出来ない型 Gra
To create integrations, retrieve data, and automate your workflows, use the GitHub GraphQL API. The GitHub GraphQL API offers more precise and flexible queries than the GitHub REST API.
この記事は LayerX のエンジニアブログがたくさん出る #ベッテク月間 の8記事目になります。こちらのカレンダーに、これまでの記事と今後出る予定がまとまっています。 LayerX のバクラク事業部には GraphQL Gateway というバクラク全プロダクトから参照される GraphQL スキーマが存在します[1]。今回の記事は、その GraphQL Gateway のスキーマをより良い状態にしていくためにぶつかった課題を強引に突破したときの話です。 モチベーション GraphQL スキーマの破壊的変更によって GraphQL Document がスキーマに適合しなくなる場合、そのリクエストはエラーになります。例えば以下のようなケースが考えられます： 使わなくなったフィールドを削除したい 削除されたフィールド（存在しないフィールド）を含む Document を処理することはできない
この記事ではハイパフォーマンスな GraphQL サーバを実装するのに避けて通れない N+1 SQL 問題について解説します。 TL;DR GraphQL は resolver を個別にかつ再帰的に実行していくため、 RDB のリレーションを効率的に先読みすることができません。そのため一般的に遅延読み込みを行います。 Facebook 社は GraphQL で遅延読み込みするために dataloader という npm パッケージを公開しており、各種言語にその移植版のライブラリが存在しているので、それを使って N+1 SQL 問題を抑制しましょう。 （復習）N+1 SQL 問題とは N+1 問題は「1 つの SQL で N 件のレコードをフェッチしたあと、それぞれ対して関連するレコードを個別にフェッチするのに N つの SQL を発行している」状態を指す言葉です。言葉で書いてもよく分からな
Workers Teck Tolks #1
Prisma2 with Graphql
GraphqlTokyo #10 LT 資料
はじめに こんにちは！プロダクト開発部 ユーザープラットフォームグループの川根です。現在、React Native + React Native for Webで新規プロダクトを開発しています。 当グループでは、新規プロダクトの他にも React Native 製の Pep Up というアプリを開発・運用しており、React Native エンジニアはモバイルアプリチームとしてプロダクト間を横断して知見を共有し合っています。私はチームに 2022 年の 4 月から参加しまだ 1 年弱ですが、短い中で感じたチームの強みの1つが、タスクの粒度を適切なサイズまで分解できていることでした。 本記事では、モバイルアプリチームが開発のバッチサイズを小さくするために行っているタスク分解の方法について、紹介したいと思います。 そもそもなぜタスクが大きいといけないのか タスクが大きい弊害は色々ありますが、代
Our learnings from adopting GraphQL – Netflix TechBlog – Medium
by Artem Shtatnov and Ravi Srinivas Ranganathan In an earlier blog post, we provided a high-level overview of some of the applications in the Marketing Technology team that we build to enable scale and intelligence in driving our global advertising, which reaches users on sites like The New York Times, Youtube, and thousands of others. In this post, we’ll share our journey in updating our front-en
GitHub - glideapps/quicktype: Generate types and converters from JSON, Schema, and GraphQL
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは。久しぶりに趣味でタイピングゲームに関するライブラリを開発している typer です。 テラーノベルでも遅まきながらバックエンド API を GraphQL に移行することになったので、GraphQL の表現力を活かしてドメインの関心事をスキーマに落とし込むことに四苦八苦している毎日です。今回は、こんな directive 作ってみたら解決したい問題にジャストフィットしたよ、というのを紹介していきます。 GraphQL 移行開始 2023年春現在、テラーノベルではバックエンド API を protocol buffer (protobuf) で定義しています。protobuf = gRPC みたいなイメージがありますが、Google App Engine(GAE) が gRPC 通信に非対応だったことやランタイムの Go のバージョンが低かったこともあって、twirp というフレ
Privacy | Site Terms | © 2021, Amazon Web Services, Inc. or its affiliates. All rights reserved. navigation Amplify SNS Workshop へようこそ！本ワークショップでは Twitter ライクなソーシャルメディアアプリケーションの開発を通して、実践的に AWS Amplify について学ぶことが出来ます。 対象者 爆速で開発したいアプリ開発者 フロントエンド開発に入門したいサーバーサイドエンジニア ワークショップ全体像 本ワークショップは、スタートアップの調達ステージ別(シード/アーリー/ミドル/レイターなど)のシチュエーションを想定し進めていきます。 本ハンズオンでは以下イメージのようなアプリケーションが出来上がります。 Stage 1 - シードステージ(第1章 ~
Victor Savkin is a co-founder of Nrwl. We help companies develop like Google since 2016. We provide consulting, engineering and tools. Managing state is a hard problem. We need to coordinate multiple backends, web workers, and UI components, all of which update the state concurrently. Patterns like Redux make some of this coordination explicit, but they don’t solve the problem completely. It is mu
この記事はNikkei Advent Calendar 2021の6日目の記事です。 こんにちは、長期インターン生の林(Shinyaigeek)です。 fastly の提供する Compute@Edge という Edge Computing 基盤があります。 まだベータという形でですが、このランタイムで JavaScript の対応が始まったことをうけ、 Compute@Edge で何ができるのか、そのために何が必要なのか、というのを実際に Compute@Edge で Apollo Server を用いて GraphQL Server を建てることを通して考察します。 Compute@Edge とは 本題に入る前に Compute@Edge とはどのような技術なのか、何ができるのか、という説明から入りたいと思います。 Compute@Edge とは fastly が提供している Edge
GitHub - hasura/graphql-engine: Blazing fast, instant realtime GraphQL APIs on your DB with fine grained access control, also trigger webhooks on database events.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
TypeScript + Apollo ClientでGraphQLのデータに型を付ける - $shibayu36->blog;
TypeScript + Apollo Clientで、useQueryなどを用いてGraphQLのクエリを発行する際に、クエリのvariablesやレスポンスのデータに型を付けたい。やり方が少々分かりづらかったのでメモを残す。 型をつけるためにやることは以下の通り。 apollo.config.jsを定義する graphql-tagでGraphQLのクエリを書く apollo client:codegenで型情報を生成する クエリを書いた場所で型をimportし、useQueryの型パラメータに指定する shibayu36/go-Intern-Diaryのレポジトリで試している。 apollo.config.jsを定義する まずApolloのコードジェネレータが適切に動作するために、apollo.config.jsを作る。Configuring Apollo projects - Apo
As another lover of physics, astronomy and rockets, when I found the SpaceX Public API (thanks to Full Stack Apollo tutorial 👏), I was really intrigued for looking into the available data. I immediately accessed to the SpaceX API GitHub and … * 🐵s would be the future Animoji’s Hand Tracking UX tests REST? External docs? Postman?? 😅 The SpaceX API journey didn’t start well but I was still excite
トレンドに乗るためにはトレンドを自分の方に捻じ曲げるのが一番いい、ということで、Twitter で日夜 GraphQL, GraphQL と騒いでいる日々であります。 GraphQL の話、スライド上げました https://t.co/hTUvA9Fajt ハンズオンに良さそうなコードや解説記事などもそのうち公開します #tng23— KOBA789 (@KOBA789) 2016年10月22日 先日、tng23 で「GraphQLの話」をしてきました。解説記事とか書くみたいなことをノリで口走ったので、これは伏線回収です。 GraphQL は公式のドキュメントが充実しています。とはいえ、全部英語なので日本にはあまりリーチしてないですね。みなさん英語読んで……。 母語でない言語で書かれた文章を自分のペースで読みながら、そこに書かれている新しい概念を獲得するってのは結構な重労働です。そこで、お
vue.jsとapollo、graphQLの学習用に、CRUD機能(create、read、update、delete）を持つ名簿アプリを作りました。 実装をチュートリアル形式でまとめます。 バックエンドはgraphQLのAPIサーバーであるGraphCMSというヘッドレスCMSを使っています。 概要 CRUD機能を持つ名簿アプリを作成します。 右上のボタンから名簿の追加。 各レコード右側のボタンで更新、削除が行えます。 さらにvuetifyのdata-tableの機能ですが、並び替えやページングも行えます。 デモサイトはこちら（追加更新削除やってみて大丈夫です。） https://vue-sample-crud.firebaseapp.com/ 全コードはこちら https://github.com/kawamataryo/vue-apollo-crud バージョン情報 vue-cli
GraphQL SubscriptionsとRedis PubSubを使ってリアルタイムチャットサーバーを作る - Qiita
はじめに 今まで触ってみたいと思っていたGraphQLとRedisを使って、リアルタイムチャットサーバーを作ってみました。 この記事では、主にGraphQLに重点を置いて実装を紹介していきます。 ソースコードはGitHubに上がっているので、そちらも合わせてご覧ください。 README.mdを見ればすぐにサーバーを建てることができるので、先に試してみるのも良いかもしれません。 アーキテクチャ 今回は以下のような構成になっています。 フロントエンドとサーバー間はGraphQLを用いた通信を行っています。 メッセージの送信やユーザーの作成は通常のGraphQLのMutationを、メッセージの受信は Websocket上で動作するGraphQL Subscriptionsを使用しています。 また、メッセージの配信にはRedisのPubSub機能を使っています。 これは、GraphQLサーバーが
こんにちは どうも、僕です。 みなさん、Rust 書いていますか。自分は最近入門しました。 今回は、元々 Go で書いていた個人ブログのサーバサイドを Rust で書いてみたのでそれについて書きます。 ソースコードはこちら。 ※ 筆者がこのコードを書き始めた段階での Rust 力は Tour of Rust を１周流し読みしたくらいの力量です。 どうして Rust なのか 個人的に入門してみたかったから。これに尽きます。 自分はフロントエンドの技術が好きで、普段からブラウザに近い部分のコードを書く機会が多いです。 そこでどうして Rust かというと、最近のフロントエンドはアプリケーションのランタイムの部分は従来通り JavaScript で動作している状態ではありますが、ビルド周りであったりのツールチェイン周りは他言語に置き換わるケースをしばしば見かけます。具体的な例で言うと、esbui
この記事について この記事は、DroidKaigi2018の以下の発表に刺激を受けて書いた記事です。 まだAPI定義管理で消耗してるの？〜Swaggerを用いた大規模アプリ時代のAPI定義管理とコードジェネレート〜 すばらしきGraphQLのSEKAIへようこそ gRPCとProtocol Buffersで一味違うAndroid通信 上記の発表では、Swagger、GraphQL、gRPCとProtocol Buffersという言葉が出てきました。これらはサーバー/クライアント間のAPI通信を実現するために役立つものです。しかし、Swaggerはツール、GraphQLはクエリ言語、gRPCとProtocol Buffersは設計指針（を実装したライブラリ）とデータフォーマットというように同格に扱えるものではないので、ちょっと混乱してしまいます。 そこで、この記事ではサーバー/クライアント間
チームのWeb API開発を最適化するSchema Driven Developmentの解説＆実装例 - Qiita
チームでのWeb API開発において、進行を妨げる要因は様々な形で噴出します。 「フロントはバックエンドのAPI実装待ちなので動けません...」「ドキュメンテーションのコストが重い...」「ドキュメントと実装が全然違うので参考にならない...」 また、APIスキーマ設定が不十分だと、ビジネスドメインの最低原則やクライアント側のニーズを理解せずに、バックエンド都合のAPIがそのまま実装される危険性もあります。 そうした問題を解決すべくSchema Driven Developmentと呼ばれる開発手法が生まれました。 Schema Driven Developmentとは？ Schema Driven Development(以下SDD)とはチームにおけるWeb API開発フローを改善する開発手法の一つです。スキーマ駆動開発やSchema First Developmentとも呼ばれています
GitHub - graphql/graphql-js: A reference implementation of GraphQL for JavaScript
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GraphQLをNodeJSとExpressで試してみました。10分くらいでできますので、実際に動かして雰囲気をつかんでみたいって方にオススメします。 はじめに 最近GraphQLに興味が湧いています。ちょっと試してみたくなったので、チュートリアルをやってみました。思いのほか簡単に試せたので紹介したいと思います。10分くらいでできますので、ぜひやってみてください。 参照したのはこちらのチュートリアルです。 Creating A GraphQL Server With Node.js And Express GraphQLとは GraphQLは、一言で言えば「必要なデータを過不足なく、一度に取りだす」ことのできるクエリ言語です。 http://graphql.org/ GitHubをはじめ多くのサービスでサポートが表明されています。流行っているようでいて、でもそれほどでもないような。しかし微
フロントエンドに型の秩序を与えるGraphQLとTypeScript | Wantedly Engineer Blog
こんにちは。Wantedly Visit の Product Squad で Frontend Engineer をしている原 (chloe463)です。 Product Squad では主に Wantedly Visit の Web 版の新規機能開発やリニューアルを行っています。 本記事では、つい先日リリースされた募集作成画面の開発で導入したGraphQLサーバーの開発について紹介します。 ・より集中して作成しやすく：作成ステップを分割・より完成形をイメージしながら作成しやすく：ステップごとにモバイル版プレビュー画面が表示・カバー画像設定をより手軽に：アップロード後にガイドラインに合うようにトリミング可能に。また、モバイルアプリ、デスクトップ、ソーシャルで表示された際のプレビューが可能に・募集作成のTipsが閲覧可能に：一部作成ステップに対応したサポートコンテンツへのリンクが表示 TL;
GitHub - graphql-kit/graphql-apis: 📜 A collective list of public GraphQL APIs
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Apollo Clientについて学ぼうと思い、Introduction - Apollo Basics - Apollo GraphQL Docsをやっていた。しかし、これをやる中でGraphQLのクエリ言語についてあまり分かってないことに気づいたので、Queries and Mutations | GraphQLを見て、クエリについて学習した。 Fragment、queryの命名、変数を使ってRDBのプレースホルダー的なことをする方法、ifの利用などが分かってよかった。以下メモ書き。 Fragmentを用いてクエリの再利用ができる 引数名を用いてFragmentに変数を引き継ぐこともできる query HeroComparison($first: Int = 3) { leftComparison: hero(episode: EMPIRE) { ...comparisonFields
Hasura と共に歩んだ一年と半年を振り返りつつ、どういったプロダクト・組織において Hasura を採用するべきか、採用すると何が起きるかについて説明します。
GraphQL入門
はじめに 対象読者 GraphQLについてざっくり学びたい人 公式ドキュメント読むのがしんどい人 Apollo/Relayどっちを使うか迷っている人 GraphQL概論編 RESTful API 代表的なWeb APIである、REST APIについて、簡単にまとめつつ、 GraphQLでできることについて、書いていこうと思います。 RESTful API(REST API)とは、Webシステムを外部から利用するためのプログラムの呼び出し規約(API)の種類の一つで、RESTと呼ばれる設計原則に従って策定されたものです。RESTそのものは適用範囲の広い抽象的なモデルだが、一般的にはRESTの考え方をWeb APIに適用したものをRESTful APIと呼んでいます。 RESTful APIでは、URL/URIですべてのリソースを一意に識別し、クライアントがHTTP（あるいはHTTPS）で要求
Have you written JSON APIs in Rails a few times? Even if you’re escaped implementing a “render: :json” call, some day soon you’ll need to get JSON data out to a native client or your front-end framework. Your Rails apps might change, but the pitfalls for JSON APIs stay the same: They’re hard to discover, difficult to change from the client side, and documenting them is a pain. For your next app, o
The channel with which financial information can be carried from a source to its recipients has always been of concern to financial experts.
The channel with which financial information can be carried from a source to its recipients has always been of concern to financial experts. In the late 8’80sfinancial information was transmitted with telegraph and transatlantic cables. The term Fintech originated in the early 1990s when Citigroup launched the project termed “Financial Services Technology Consortium”. Fintech however became a hous
GitHub - fbsamples/f8app: Source code of the official F8 app of 2017, powered by React Native and other Facebook open source projects.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQL Ruby(class-based API)の導入でハマったこと - Qiita
GraphQL in production
GraphQLのススメ - Qiita
GitHub GraphQL API documentation - GitHub Docs
GraphQL 界の Babel こと Envelop を使ってスキーマの破壊的変更をごまかす
GraphQL と N+1 SQL 問題と dataloader - Qiita
GraphQL Server on Edge
クライアントサイド開発のバッチサイズを小さくして幸せになる方法 - JMDC TECH BLOG
GraphQL(gqlgen) の directive で事前条件、事後条件を実装する
Amplify SNS Workshop
Managing State in Angular Applications
Compute@Edge は GraphQL Server の夢を見るか — HACK The Nikkei
Migrating SpaceX API to GraphQL 🚀
GraphQLのはじめかた - Write and Run
vue.js, Apollo, graphQLで名簿アプリを作成する（CRUD機能の実装サンプル）
Rust で GraphQL server を書いてみた
Swagger、GraphQL、gRPC+Protocol Buffersの概観 - Qiita
GraphQLをNode.jsとexpressでためしてみる | DevelopersIO
GraphQLのクエリについて学んだ - $shibayu36->blog;
ダイニーにおける本番 Hasura 運用
The GraphQL Way: A new path for JSON APIs