GraphQLが解決する問題とその先のユースケース
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
GraphQLの全体像とWebApp開発のこれから - Qiita
TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く信頼できる唯一のリソースとして振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアントファーストなAPI, GraphQLはWeb APIのベストプラクティスになり得る クラシックアプリケーションを改修することなくGraphQLとモダンフロントエンドで今どきのアプリを作れる はじめに GraphQLは非常に良く出来たソフトウェア(の仕様)ですが、複数の側面を持つことからすぐに理解することが難しくまだ日本ではあまり受け入れられていない印象があります。GraphQLを端的に何と言われると "全てのフロントエンドのためのAPI BFF" なのですが、それだけで理解出来る人はなかなか居ないように思います
ProtoGraphQL - GraphQLをビジュアル的に設計
GraphQLはRESTful APIの代替になりえる仕組みです。データ取得に対して自由度が高く、入力と出力両方に対して型指定できるのも良いです。多くはフレームワークと組み合わせて使えますが、自分で一から設計する場合もあるでしょう。 そんな時に使ってみたいのがProtoGraphQLです。GraphQLのスキーマをビジュアル設計できます。 ProtoGraphQLの使い方 メイン画面です。 テーブルを設計します。 その設計を使うためのコードとGraphQLスキーマ、SQLが生成されます。 モデルのビジュアル化もできます。 ProtoGraphQLはクエリ（取得）側の設計が可能で、ミューテーション（更新など）はできないようです。とは言え、型などをビジュアルで設計したり、リレーションも指定できるのは便利です。それこそデータベース設計と同時にできそうです。 ProtoGraphQLはJavaSc
GraphQL Visual Editor - ビジュアルでGraphQLを設計
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました GraphQLはRESTfulに代わる、または補助する存在として注目を集めています。しかし、まだ出始めの技術だけに最適な設計手法が確立されていません。スキーマを作る作業する手作業、またはフレームワークを導入していることでしょう。 今回紹介するGraphQL Visual Editorはそんなスキーマの作成をWebブラウザ上で行い、さらにバックエンドまで作れるソフトウェアです。 GraphQL Visual Editorの使い方 設計画面です。ノードが並んでおり、それらを繋ぐことでスキーマを設計します。 追加、削除、変更できます。 例えばこれはGitHubのGraphQLのスキーマ。とても細かく定義されています。 スキーマを確認できます。 GraphQL Visual Editorは
「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ｜ハイクラス転職・求人情報サイト AMBI（アンビ）
scalar型を新しく定義するためにはscalarキーワードを使います。例えば、Date型を新しく定義するには次のようにします。 scalar Date スキーマではこれだけですが、実際に使う際はGraphQL処理系に対してさらにシリアライズとデシリアライズを定義することになります。 GraphQL組み込みのscalar型は先にあげたものだけなので、例えばバイナリ、日付と時刻、HTML/XML、BigIntなどを必要に応じて追加することになるでしょう。ただしその場合、サーバーサイドとクライアントサイドでシリアライズ・デシリアライズの実装を一致させる必要があります。 Enum enum（イナム）はscalar型の一種で、特定の値のみを持つ型です。例えば、組み込みscalar型であるBooleanをenumで宣言すると次のようになるでしょう。 enum Boolean { true false
【GraphQL入門】GraphCMS + React（react-apollo） ｜ DevelopersIO
どうも、こんにちは、白石です。 Reactを使い始めて、４ヶ月が経ちました。 直近では、 react-apollo 周りの実装をさせていただく機会も増えました。 それらに伴い、GraphQL周りの理解も深めたいと考えている次第、同じ境遇の方の助けになれば幸いです。 GraphCMS GraphCMSは、Introduction1 にもあるように、 GraphQLの仕様、API設計をUIベースかつ数分で作成できるサービスです。 今回はこちらを使用して、GraphQLをキャッチアップしてみようと思います。 サービスの登録は、GitHub認証で行うことが出来ます。 Beginners Guide with React Beginners Guide with React2 の章を進めると、予め用意されているAPIからデータを取得し、画面に表示することが出来ます。こちらを一通り終えた前提で話を進め
GraphQL入門 - React.js & Express.js & Apollo の簡単チュートリアル - エムスリーテックブログ
M3 ではグローバル CTO の Brian が、サービスの海外展開や技術基盤の共通化などを積極的に進めています。その中のプロジェクトの１つとして、アメリカで提供している医療ニュースのリニューアルにチャレンジしています。2018 年 5 月には日本オフィス所属のイギリス人エンジニア @christophrowley と日本人のエンジニア (筆者)が 1 ヶ月ほどニューヨークに出張してリニューアルの検討をしてきました。 ( ↑ Chrisが撮影してくれた NY の写真 ) 今回の記事は、リニューアルで採用を検討している GraphQL を Apollo + JavaScript で作るチュートリアルです。 TL;DR Apollo を使って、クライアントサイド、バックエンドを作るチュートリアルを紹介 英語・海外での開発に挑戦したいエンジニアを絶賛募集中です。もし興味があればランチ行きましょう
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
ArangoDB ってのが面白いと思うんだ - 偏見プログラマの語り！
最近 Graph database が盛り上がってるように感じる。 さて ArangoDB という DB を知っているだろうか。 MySQL とか MongoDB とかと比べると知名度は低いものの、NoSQL、とりわけ Graph database 界隈では名が知られている。Graph database 界隈と書いたが、さしずめこの領域では Neo4j が幅を利かせている。Neo4j なら聞いたことあるって人はたくさんいると思う。 Graph databases ・Neo4j Neo4j の強みとしては、そのクエリ言語である Cypher の読みやすさが一つ挙げられる。Cypher の紹介ページ に書かれている最初のサンプルを引用すると、こうだ。 MATCH(:Person{ name:"Ann"})-[:MARRIED_TO]->(spouse) このクエリは「name が "Ann"
Graphdoc - GraphQLスキーマからドキュメントを生成
Web APIとしてGraphQLを提供するサービスが増えています。従来のREST APIでは限界のあった、データ構造の自由さに対応するにはGraphQLがベストな選択でしょう。しかしREST APIとは異なるために、求められる情報も変わってきます。 そこで使ってみたいのがGraphdocです。GraphQLのスキーマを使ってWeb APIドキュメントを生成します。 Graphdocの使い方 トップページです。 スキーマの定義を確認できます。 ミューテーション。 型について。 enumについて。 オブジェクトについて。 Graphdocを使うことで構造が明確になり、指定する条件が分かりやすくなります。GraphQLの場合はREST APIとは異なり、エンドポイントが一つです。そのため構造さえ分かってしまえば、後は自由にクエリを記述できるでしょう。 GraphdocはTypeScript製の
Sangria + Akka HTTPでGraphQL Connection編 | DevelopersIO
こんにちは、かたいなかです。 前回に引き続き、GraphQLのScalaでの実装であるSangriaについて解説していきます。 今回はページネーションを行うAPIを作成する方法について解説します。 Connection 今回はRelayのCursor Connectionという仕様に従ってページネーションを実装します。 まずは今回実装していくAPIを例にConnectionがどのようなものかを見ていきましょう。 クエリおよびレスポンスは以下のような形式です。 edgesやnode,cursorといった見慣れない名前がありますね。 順番に解説します。 クエリの引数 articlesのようなConnection型を返すフィールドはページネーションに関連した引数を取れるようにします。 前方にページを読み進めるための属性 after この引数で指定されたカーソルより後ろの要素を返す。 first
GraphQLをNode.jsとexpressでためしてみる | DevelopersIO
GraphQLをNodeJSとExpressで試してみました。10分くらいでできますので、実際に動かして雰囲気をつかんでみたいって方にオススメします。 はじめに 最近GraphQLに興味が湧いています。ちょっと試してみたくなったので、チュートリアルをやってみました。思いのほか簡単に試せたので紹介したいと思います。10分くらいでできますので、ぜひやってみてください。 参照したのはこちらのチュートリアルです。 Creating A GraphQL Server With Node.js And Express GraphQLとは GraphQLは、一言で言えば「必要なデータを過不足なく、一度に取りだす」ことのできるクエリ言語です。 http://graphql.org/ GitHubをはじめ多くのサービスでサポートが表明されています。流行っているようでいて、でもそれほどでもないような。しかし微
Exploring different GraphQL Clients
, this picture is cool.Over the past few weeks a lot of new GraphQL clients were released aiming to give Relay and Apollo a run for their money! It’s true, there are still plenty of areas to explore when it comes to GraphQL clients and I hope the result of all this is a “melting pot” of advances in developer experience. Click here to share this article on LinkedIn » I wanted to study how these cli
GraphQLを導入してみて得た知見と雑感。GraphQLはタイタニックの救命ボードになりえるかも - Qiita
GraphQLは実装内容に合えばタイタニックの救命ボードのように混沌から救い出してくれる。だからと言って全てのプロジェクトがタイタニックな訳ではないので、使い所が合わなければそんな救命ボードにもあまり意味は無い、という話。 先日、個人開発して公開したプロジェクト「node-node-node」のバックエンドはRails APIにGraphQLを使っていて、このプロジェクト内容に対しては最高の親和性を発揮してくれた。 GraphQLのメリットを一言で言えば「クライアント＝サーバー間での複雑なトランザクション処理の全てをGraphQLが吸収してくれる」ということに尽きる。ややこしい技術の詳細を書いたところでメリットはこれ以外に無い。 /usersや/postsというそれぞれのエンドポイントにリクエストを投げていたのがRESTful。 GraphQLにするとエンドポイントを気にすることなく「これ
Prisma - 既存のデータベースをGraphQL化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はAPIの公開が当たり前に行われています。しかしすでに既存のシステムがある中で、APIを開発するのは工数がかかるでしょう。データベースをそのまま公開できると便利だと感じる方も多いはずです。 そこで使ってみたいのがPrismaです。既存のデータベースをラップする形でGraphQL APIを追加するソフトウェアです。 Prismaの使い方 ジェネレータがあるので設定ファイルの生成も簡単です。 プレイグラウンドも立ち上げられます。 Prismaを使うと既存のデータベースに接続しつつ（スキーマは自分で記述する必要があります）、GraphQL APIを簡単に提供できます。さらにReactやAngular向けのコードも生成できるので開発工数が大幅に低減できるはずです。 PrismaはSca
graphqlviz - GraphQLのスキーマを可視化 MOONGIFT
GraphQLはデータ構造がスキーマとして定義されています。それらを読み解くことで、あらかじめデータ構造を把握してクエリを投げられるようになっています。しかしJSONから内容を正しく見極めるのはなかなか難しいでしょう。 そこで使ってみたいのがgraphqlvizです。GraphQLの構造を画像などで可視化してくれます。 graphqlvizの使い方 とあるサーバの例。 これはかなり複雑な例ですが、モデル同士のつながりがビジュアル化されており、全体の構造が把握できます。また、モデル自体の構造も分かるのでどういったフィールドからデータを取り出せば良いかも分かりやすいでしょう。GraphQLへのクエリを書く際に用意しておくと便利そうです。 graphqlvizはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 sheerun/graphqlviz:
GraphQL Ruby の使い方 (基礎編) - Qiita
注意 現在の graphql-ruby （ver: 1.8.x） は Ruby のクラスベースによる定義がメインで、この記事に書いてある DSL を使った定義は 非推奨 です。 ロードマップ には DSL を使った .define-style は、graphql-ruby 2.0 で廃止するとあります。 新しいクラスベースでの書き方は 公式ドキュメント を御覧ください。 日本語の記事だと @gfx さんの 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ が非常によくまとまってて分かりやすいです。 はじめに 私が携わっているプロダクトでは、フロントエンド用のAPIとしてGraphQLを採用しました。 実際に使ってみてかなり良い感じなのですが、最初はいざ実装しようにもよく分からずに苦労しました。 そこで、GraphQL の実装方法についてサーバーサイドに焦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はじめてのGraphQLスキーマ設計
REST API に疲れたあなたへ贈る GraphQL 入門
Testing GraphQL Server in Node.js - DZone