Presentation slides for the JapanTaxi x MedPeer Ruby/Rails meetup https://medpeer.connpass.com/event/82327/
GraphQL Q&A
Presentation slides for the JapanTaxi x MedPeer Ruby/Rails meetup https://medpeer.connpass.com/event/82327/
In this post, I’m going to answer one simple question: How does a GraphQL server turn a query into a response? If you’re new to GraphQL, get the three minute intro in How do I GraphQL? before reading on. That way you’ll get more out of reading this post. Here’s the ground we’ll cover in this post: GraphQL queriesSchema and resolve functionsGraphQL execution — step by step Ready? Let’s jump right i
Today I’m happy to announce the beta release of The GraphQL Guide, a book that I’ve been working on with Loren Sands-Ramshaw! The Guide shows you why GraphQL APIs are the true successor to REST APIs. You can purchase the beta at https://GraphQL.guide. We’ll be looking at the core fundamentals of GraphQL along with strategies for how to implement it (client-side with Apollo and server-side in Node.
Amplify for Androidでより直感的になったGraphQLを試した - 怠惰を求めて勤勉に行き着く
TL;DR 本エントリはAWS Amplify Advent Calendar 2019の24日目です！ 今回は新しくリリースされたAmplify for Androidを使って、前回と同じく下のようなチャットアプリを作るので、興味のある方は前口上を飛ばして後半をお読みください🎄 Amplifyとは 本題に入る前に、Amplifyを最近よく耳にするようになったけど何かよく分かっていないという人向けの説明をします。 Amplifyはモバイルバックエンドを爆速で作るためのサービスです。 https://aws.amazon.com/jp/amplify/ 他のいわゆるモバイルバックエンドとの際立った違いのうち、個人的に強調したいのは以下2点です。 バックエンドはAWSのサービスであり、真の意味でスケールする GraphQLのマネージドサービスを利用できる本日時点で唯一のプラットフォームである
graphql-codegen は validation 用の schema も自動で生成できる (yup と zod)
GraphQL Code Generator (a.k.a. graphql-codegen) のプラグインとして graphql-codegen-typescript-validation-schema (Star ください！) を利用すると yup や zod といったフロントエンド validation 用の schema も自動で生成できます。 例えばこのような GraphQL Schema を与えます。ここで記述している constraint directive は confuser/graphql-constraint-directive で提供されているものを想定してます。 input ExampleInput { email: String! @required(msg: "Hello, World!") @constraint(minLength: 50, format:
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 | スペースマーケットブログ
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 こんにちは バックエンドエンジニアの西尾です。 スペースマーケットではバックエンド側は長らく単一のアプリケーションで構成されていましたが、去年くらいからマイクロサービスアーキテクチャーへの移行を進め始めました。 すでに本体(Main)と検索機能(Search)(※1)は分離されていますが、現在は本体から予約部分を切り出すことを行なっています。 （※１： 元の本体のバックエンドAPIのことをMainまたはv2, Mainから部屋の検索などを担う部分だけを切り出したサービスをSearchと記載しています。) 切り出すにあたり、考えなければならないことはたくさんあるのですが、今回はその中で 複数サービスに分離されているデータを合成し、クライアントに単一システムだった時と同じ
2018年4月21日、株式会社サイバーエージェントが主催するイベント「Battle Conference U30」が開催されました。30歳以下のエンジニアによる30歳以下のエンジニアのための技術カンファレンスである本イベントには、さまざまな領域で活躍する若手が登壇。企業の枠を超えて、自身の技術・事業・キャリアに関する知見を発表しました。「Nuxt.jsとGraphQLから見えたWeb開発の未来」に登壇したのは、株式会社スマートドライブの大木尊紀氏。Nuxt.jsとGraphQLを開発に用いるメリットと、今後のフロントエンドエンジニアの価値について語りました。 Nuxt.jsとGraphQLに見る、Web開発の未来 大木尊紀氏（以下、大木）：よろしくお願いします。「Nuxt.jsとGraphQLから見えたWeb開発の未来」とけっこう大層なこと言ってますけど、最後までお聞きください。 大木尊紀
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.
この記事は Angular Advent Calendar 2018 の 22 日目の記事です。 概要 AWS AppSyncを使って画面にデータを表示してみたい方 フロントエンドエンジニアでも簡単にGraphQLを触ってみたい方 GraphQLを導入するか迷っている方向けの記事 RESTがつらい （例）AWS構成図 上の図のようにAngular + AWSを使い REST APIから返ってきた情報を表示するサービスを運用しています。 ただ、サービスの要件が増えるにつれて画面で取得したい情報など多くなるもので 複数のAPIを呼び出さないと欲しい情報が取れない レスポンス内の一部のデータしか利用しないのに、余分なデータも返される APIのリクエスト数やRTTの増加 など色々つらい部分が多くなってきました…。 なぜGraphQL？ じゃあこの問題をどう解決するか？ 欲しい情報だけ返す新しいAP
この記事ではハイパフォーマンスな 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 資料
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 というフレ
この記事は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 - relax/relax: New generation CMS on top of React, Redux 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
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
こんにちは どうも、僕です。 みなさん、Rust 書いていますか。自分は最近入門しました。 今回は、元々 Go で書いていた個人ブログのサーバサイドを Rust で書いてみたのでそれについて書きます。 ソースコードはこちら。 ※ 筆者がこのコードを書き始めた段階での Rust 力は Tour of Rust を１周流し読みしたくらいの力量です。 どうして Rust なのか 個人的に入門してみたかったから。これに尽きます。 自分はフロントエンドの技術が好きで、普段からブラウザに近い部分のコードを書く機会が多いです。 そこでどうして Rust かというと、最近のフロントエンドはアプリケーションのランタイムの部分は従来通り JavaScript で動作している状態ではありますが、ビルド周りであったりのツールチェイン周りは他言語に置き換わるケースをしばしば見かけます。具体的な例で言うと、esbui
GraphQL SubscriptionsとRedis PubSubを使ってリアルタイムチャットサーバーを作る - Qiita
はじめに 今まで触ってみたいと思っていたGraphQLとRedisを使って、リアルタイムチャットサーバーを作ってみました。 この記事では、主にGraphQLに重点を置いて実装を紹介していきます。 ソースコードはGitHubに上がっているので、そちらも合わせてご覧ください。 README.mdを見ればすぐにサーバーを建てることができるので、先に試してみるのも良いかもしれません。 アーキテクチャ 今回は以下のような構成になっています。 フロントエンドとサーバー間はGraphQLを用いた通信を行っています。 メッセージの送信やユーザーの作成は通常のGraphQLのMutationを、メッセージの受信は Websocket上で動作するGraphQL Subscriptionsを使用しています。 また、メッセージの配信にはRedisのPubSub機能を使っています。 これは、GraphQLサーバーが
この記事について この記事は、DroidKaigi2018の以下の発表に刺激を受けて書いた記事です。 まだAPI定義管理で消耗してるの？〜Swaggerを用いた大規模アプリ時代のAPI定義管理とコードジェネレート〜 すばらしきGraphQLのSEKAIへようこそ gRPCとProtocol Buffersで一味違うAndroid通信 上記の発表では、Swagger、GraphQL、gRPCとProtocol Buffersという言葉が出てきました。これらはサーバー/クライアント間のAPI通信を実現するために役立つものです。しかし、Swaggerはツール、GraphQLはクエリ言語、gRPCとProtocol Buffersは設計指針（を実装したライブラリ）とデータフォーマットというように同格に扱えるものではないので、ちょっと混乱してしまいます。 そこで、この記事ではサーバー/クライアント間
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をはじめ多くのサービスでサポートが表明されています。流行っているようでいて、でもそれほどでもないような。しかし微
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
フロントエンドに型の秩序を与えるGraphQLとTypeScript | Wantedly Engineer Blog
こんにちは。Wantedly Visit の Product Squad で Frontend Engineer をしている原 (chloe463)です。 Product Squad では主に Wantedly Visit の Web 版の新規機能開発やリニューアルを行っています。 本記事では、つい先日リリースされた募集作成画面の開発で導入したGraphQLサーバーの開発について紹介します。 ・より集中して作成しやすく：作成ステップを分割・より完成形をイメージしながら作成しやすく：ステップごとにモバイル版プレビュー画面が表示・カバー画像設定をより手軽に：アップロード後にガイドラインに合うようにトリミング可能に。また、モバイルアプリ、デスクトップ、ソーシャルで表示された際のプレビューが可能に・募集作成のTipsが閲覧可能に：一部作成ステップに対応したサポートコンテンツへのリンクが表示 TL;
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
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）で要求
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQL explained | Apollo GraphQL Blog
Introducing the GraphQL Guide
Nuxt.js＋GraphQLを導入してみて感じた、フロントエンドエンジニアのこれから
GraphQL Ruby(class-based API)の導入でハマったこと - Qiita
GraphQL in production
GraphQLのススメ - Qiita
GitHub GraphQL API documentation - GitHub Docs
AWS AppSync + ApolloではじめるGraphQL - Qiita
GraphQL と N+1 SQL 問題と dataloader - Qiita
GraphQL Server on Edge
GraphQL(gqlgen) の directive で事前条件、事後条件を実装する
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;