これは元記事(GraphQL@Yelp Schema Design GuidelinesのGraphQL Styleguide)を著者の一人 Mark Larahさんから許可をいただき日本語訳したものです。 🎨 スキーマ設計 GraphQLスキーマは、Yelpのエンジニアリング全体に対してグローバルです。最終的にはユーザー向けビジネスデータ全体をGraphQLでモデル化出来るようにしたいと考えています。このページには、クリーンで使いやすくスケーラブルなスキーマを提供するために、どのように考るかについてのガイダンスが含まれています。 先に進む前に、スキーマがどのように機能するかを理解するために、そのテーマに関する公式ドキュメントをざっと読むことを強くお勧めします。 Contents 型の種類 トップレベルのクエリを最小に保つ 型の命名は具体的にする フィールドに名前空間をつけない View
Spring+GraphQLからKtor+GraphQLに移行する - shiraji’s diary
はじめに これは Ubie Advent Calendar 2019 - Qiita の7日目の記事です。 6日目は かみな/Kaito Minatoya@Ubie (@kamina_zzz) | Twitter による 地球上の Kubernetes ユーザーは絶対使うべきツールたちを紹介するよ - Qiita でした。 想定読者 Spring + Kotlin + GraphQLを使っていて、Ktorに移行したくなっちゃった人 (需要🤔) 本題 UbieでAdvent CalendarをKtor縛りで書くぞ！となりました。じゃあ自分は何を書こうかなーって考えてたらGraphQLに決まってるじゃん？と振られたので、UbieではKtor+GraphQLは使ってないのですが、もしSpringのアプリケーションである https://github.com/ubie-inc/kotlin-gr
GraphQLにはページネーションを表現する方法としてCursor Connectionsという仕様があります。 この機能を使うことでカーソルベースのページネーションを簡単に実装することができます。 仕様の詳細はGraphQLやRelayのページをご覧ください。 https://graphql.org/learn/pagination/ https://relay.dev/graphql/connections.htm この機能はとても強力な機能なのですが、私はGraphQLを使い始めたころedgeやnodeの役割を正しく理解できておらず誤った使い方をしていました。 改めて公式ドキュメントを読んだり、その他の様々な情報に触れることで正しいと思われる使い方に気づいたので記事として残しておこうと思います。 ※サンプルコードはgraphql-rubyを使ったRubyのコードで記載していますが内容
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
GraphQL/REST における Authorization, Authentication について。 https://www.prisma.io/tutorials/graphql-rest-authentication-authorization-basics-ct20/ REST API Authentication (認証) Authentication には JWT を利用する。JWT を生成するコードは、以下のようになる。読み込み権限を与えることを示す "read-post" を claim として保持させ、暗号化には HS256 を利用し、この暗号化時のシークレットキーとして "secret" という文字列を利用する。 code:js import * as jwt from "jsonwebtoken"; const token = jwt.sign({ claims:
1 はじめに CX事業本部の平内（SIN）です。 AWS AppSync（以下、AppSync）は、AWS上のGraphQLのフルマネージドサービスです。 Webや、iSO,Androidから利用する場合、Amplifyで簡単に導入できますが、今回は、Lambda（TypeScript）からアクセスする要領を確かめてみました。 2 AppSync AppSyncは、ここで、以下のような簡単なスキーマのAPIを例とします。 type Mutation { create(message: String!): MyData } type MyData { id: String! message: String } type Query { getMyAppSync(id: String!): MyData } クエリでデータの追加を確認してみます。 データソースは、DynamoDB(my_app
![[AWS AppSync] LambdaからGraphQLのクエリを送ってみる | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/b42a13c2ac69ccd96c9ae6c32c335ce31db29bfc/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Faws-appsync.png)
$ bin/rails g graphql:install Running via Spring preloader in process 50049 create app/graphql/types create app/graphql/types/.keep create app/graphql/rails_graphql_api_schema.rb create app/graphql/types/base_object.rb create app/graphql/types/base_argument.rb create app/graphql/types/base_field.rb create app/graphql/types/base_enum.rb create app/graphql/types/base_input_object.rb create app/graph
![RailsでGraphQL APIをつくるチュートリアル[graphql-ruby]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6576f236362a2e52a9a4f748a6b1e3b6c26bfe35/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--1nxwa1CW--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ARails%2525E3%252581%2525A7GraphQL%252520API%2525E3%252582%252592%2525E3%252581%2525A4%2525E3%252581%25258F%2525E3%252582%25258B%2525E3%252583%252581%2525E3%252583%2525A5%2525E3%252583%2525BC%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252582%2525A2%2525E3%252583%2525AB%25255Bgraphql-ruby%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Anecocoa%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzg5ZmE0OTIyMzIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
GraphQL Code Generator + React Queryの紹介 | HiCustomer Lab - HiCustomer Developer's Blog
こんにちは、エンジニアの尾島(@daikiojm)です。 最近は HiCustomer のオフィスがある五反田周辺の飲食店の入れ替わりが激しく、開店/閉店に一喜一憂しております。 五反田、目黒周辺でおすすめのお店があったら教えてください。 React + Vite で新規プロダクトを開発している話で紹介した新プロダクトの開発では、GraphQL を採用しています。 今回はこの記事では紹介しきれなかった GraphQL Code Generator と React Query の活用について紹介します。 この記事で紹介する内容は次のとおりです。 GraphQL Code Generator + React Query の組み合わせを採用した理由 GraphQL Code Generator を使った型/React Query のクライントコード生成 Custom Hooks の実装例 Gra
[AWS AppSync] エッジデバイスのデータを AWS IoT経由で取得してGraphQLを更新してみました。 | DevelopersIO
[AWS AppSync] エッジデバイスのデータを AWS IoT経由で取得してGraphQLを更新してみました。 1 はじめに CX事業本部の平内（SIN）です。 AWS AppSync(以下、AppSync)は、GraphQLを利用するためのマネージド型サービスです。 今回は、このGraphQLへのMutationをAWS IoT経由で取得したデータで行うものを試してみました。 最初に動作している様子です。 デバイスからのデータをiOSで表示するだけなら、MQTTのPublishとSubscribeだけで充分だと思うのですが、ここは、今後の拡張を視野に入れて、敢えてGraphQLを挟むという事にさせて下さい。 2 構成 構成は、以下のとおりです。 エッジデバイスのデータは、MQTTでPublishされています。AWS IoTでは、ルールにより、到着したデータをすべてLambdaに送っ
ジャンプTOON Flutter × GraphQL ~宣言的なアプリ開発の工夫~ | CyberAgent Developers Blog
ジャンプTOON アプリチームの吉田航己(@koki8442)です。 5 月にサービスを開始した 「ジャンプTOON」 では、モバイルアプリを Flutter で開発し、通信には GraphQL を用いています。 本記事では GraphQL の解説、Flutter アプリで GraphQL を活用する際の工夫点や開発の知見を紹介していきます。 目次 GraphQL の概要 ジャンプTOON アプリでの GraphQL の使用 Flutter で GraphQL を使うメリット Flutter × GraphQL 開発の工夫 おわりに 参考文献 GraphQL の概要 GraphQL は Meta 社が REST の問題点を解決するために開発した API クエリ言語およびランタイムです。その概念は特定の言語やデータベースなどに依存するものではなく、ビジネスドメインのデータを Node と E
【AWS グラレコ解説】GraphQL APIを簡単に作成 & 運用。AWS AppSync をグラレコで解説 - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
※ 本連載では、様々な AWS サービスをグラフィックレコーディングで紹介する awsgeek.com を、日本語に翻訳し、図の解説をしていきます。awsgeek.com は Amazon Web Services, Inc. プリンシパル・テクニカル・エバンジェリスト、ジェリー・ハーグローブが運営しているサイトです。 これまでのグラレコ解説はこちら » GraphQL は、サーバーからのデータに対して、クライアントによるフェッチ、変更、サブスクライブを可能にするデータ言語です。GraphQL クエリでは、サーバーから返されたデータをどのように構造化するかをクライアントが指定します。これによって、クライアントは必要なデータのみを必要なフォーマットでクエリできます。 Web API として有名な RESTful (REST) と比較した場合、主に以下の違いがあります。
RESTとは 以下の記事等でもまとめていますが、REpresentational State Transferの略で、分散型システムにおける複数のソフトウェアを連携させるのに適した設計原則の集合、考え方のことです。 ※詳細は以下記事を参照ください。 RESTful APIとは何なのか リソース指向アーキテクチャ(ROA)とは何なのか Web APIとは何なのか Web APIのインターフェースとしては割と一般的になりつつありますが、本記事ではそんなRESTの課題と（それに取って代わるわけではないですが）GraphQLについて書きたいと思います。 GraphQLとは GraphQLとはFacebookが2015年に公開したAPIの規格です（APIのための問い合わせ言語とも言われることがあります）。RESTはAPIの設計原則の集合、考え方なのに対して、GraphQLは言語（クエリ言語、スキーマ
自己紹介 こんにちは，ZOZOテクノロジーズの内定者さっとです。 最近FastAPIをよく利用していますが、今回紹介するGraphQLやWebSocketがサポートされており、 便利すぎでは？と感じる今日この頃です。 ※本記事はZOZOテクノロジーズ#5の17日目です． 昨日は@e_tyuboさんが「Git for Windowsでautocrlfの設定を間違えちゃった時の対応」という記事を出しました． 他にもZOZOテクノロジーズでは5つのアドベントカレンダーを毎日更新しています！ ZOZOテクノロジーズ#1 ZOZOテクノロジーズ#2 ZOZOテクノロジーズ#3 ZOZOテクノロジーズ#4 概要 FastAPIを使ってGraphQLをさくっと構築する方法を紹介したいと思います。 以下、本記事の構成です。 FastAPI？GraphQLとは? FastAPI×GraphQLで楽々ハローワ
2021年に3サービスをリリースしたSHEにラブグラフCTO横江が質問し、スミからスミまで聞き出す「【CTO対談】ラブグラフCTOが訊く！『SHEの爆速開発の裏側』」。ここでSHE株式会CTOの村下氏、株式会社ラブグラフCTOの横江氏が登壇。最後に過去の反省と、今後のSHEの爆速開発に向けてやっていこうとしていることについて話します。 消耗してしまったメンバーが増えた時期があった 横江亮佑氏（以下、横江）：組織もなにか工夫したところはあるんですか？ 村下瑛氏（以下、村下）：当時は5人のチームだったので、組織みたいな要素はほぼゼロというか。 横江：じゃあ、この開発を進めていく上でハレーションとかも特になかったんですか？ 村下：でも、それでいうとやはりあって。 横江：この人数であったんですね。 村下：5人で小規模なチームではあったんですが、僕が開発にフルコミットみたいな感じではなくなりつつある
Introducing Direct Lambda Resolvers: AWS AppSync GraphQL APIs without VTL | Amazon Web Services
Front-End Web & Mobile Introducing Direct Lambda Resolvers: AWS AppSync GraphQL APIs without VTL This article was written by Ed Lima, Sr. Product Manager, AWS September 14, 2021: Amazon Elasticsearch Service has been renamed to Amazon OpenSearch Service. See details. AWS AppSync is a managed serverless GraphQL service that simplifies application development by letting you create a flexible API to
【NestJS/Next.js/GraphQL】TypeScriptだけでバックエンドもフロントエンドも作ってみる
やったこと ほぼTypeScriptだけでバックエンドもフロントエンドも作ってみた できたもの 技術スタック Backend NestJS TypeORM GraphQL (Code first) / Apollo Frontend Next.js / React GraphQL Code Generator / Apollo Client emotion / Semantic UI Other yarn workspace ESLint / Prettier / husky Docker / Docker Compose Vercel GCP (CloudSQL / Cloud Run / Cloud Build) Backend NestJS TypeScriptでスケーラブルなサーバーサイドアプリを構築するためのNode.jsフレームワークです 型安全なので何か誤った記述があれば起動
AWS AppSyncのGraphQL Subscriptionsのクライアントを作って裏側の仕組みを学ぶ｜AWS｜開発ブログ｜株式会社Nextat（ネクスタット）
top > 開発ブログ > AWS > AWS AppSyncのGraphQL Subscriptionsのクライアントを作って裏側の仕組みを学ぶ こんにちは、ナカエです。 マネージドなGraphQLサーバを手軽に作れるAWS AppSyncがじわじわと人気を集めてきているようですね。 AppSync APIのクライアントとしては公式のSDKたるAmplifyを利用すると楽ちんです。 が、しかし今回はAppSyncのGraphQL Subscriptions実装の仕組みを確認するため、Node.jsとWebSocketクライアントを使ってリアルタイム通信のクライアントを実装しました。 GraphQLのスキーマとAppSync API の認証モード 本記事のサンプルはトピックごとにメッセージを投稿/受信する簡易なチャットルームアプリを想定しています。 Mutationはメッセージの投稿に、S
Postmanライクに使える!! GraphQL用クライアント「Altair GraphQL Client」 Altair GraphQL Client https://altair.sirmuel.design/ Altair GraphQL Clientの特徴 「Altair GraphQL Client」は、アプリ・Web・ブラウザ拡張と、すべてのプラットフォームに対応したGraphQL用クライアントです。 https://github.com/imolorhe/altair なお、こちらGitHubで1.9Kを超す人気オープンソースでもあります。 Altair GraphQL Clientの操作方法 Altair GraphQL Clientの特徴の一つが、このプラットフォームの多様さ。今回はWeb版をチョイス。 こちらがクライアント画面。シンプルなPostmanといったUIで、非
この記事はClassi developers Advent Calendar 2021の6日目の記事です。 この記事では、Next.jsをベースに、Prisma・Apollo GraphQL・GraphQL Nexusを組み合わせて簡易的なTODOアプリを実装してみたのでその手順をまとめます。 これらの組み合わせにより、バックエンドもフロントエンドもすべてTypeScriptで記述することができます。 全体構成 主に使用するフレームワーク・ライブラリ Next.js Reactフレームワーク Prisma Node.jsとTypeScriptのためのORM クエリの結果が型付けされるため、開発体験を向上させることができる特徴がある 本書ではPostgreSQLと接続してデータの取得・操作を行う Apollo GraphQL GraphQLサーバ(Apollo Server)およびGraph
GraphQLサーバのHasuraを使ってみた
背景 最近PoCをなるべく早く作る方法を考えています。 極端な話、リリース時には作り直したとしても、素早くPoCできた方が良いのではないかと思っています。 PoCでざくざく作る時にどうしてもAPIを用意するのが手間に感じてしまいます。 そんな時にHasuraを教えてもらいました。 ロゴアイコンがかわいい。 ※GraphQL自体触るのが初めてなので、他のGraphQL環境と比べてどうかは分からないです。 Hasuraとは ざっくり言うと、Postgresをデータベースとして、GraphQLサーバを簡単に建てられるものです。 ほんとに数分で環境作れてしまって驚きました。 PoC開発で辛いことの一つにAPI開発があります。 システムの作り方として、ちゃんと境界を分離して作ることはメンテナビリティを高める方法としてとても有用です。ただし、PoCの様に素早く作りたい時には、CRUDのAPIを量産する
RESTを採用して気づいた「GraphQLって結局何が良いの？」について - 猫でもわかるWeb開発・プログラミング
はじめに この記事では「メリット」のみに言及する GraphQLの一番の強みは「型」 型とは よく言われるGraphQLのメリット 本当の強みは 「型」とは なぜコミュニケーションコストが減少するか まとめ スターウォーズ はじめに この記事は GraphQL Advent Calendar 2019 - Qiita の2日目の記事です。 昨日はebikenさんの https://blog.ebiken.dev/blog/operating-graphql-server-with-gqlgen/ でした。 2年前、「新しくクライアント向けのAPIサーバーを作る」ことをしていた。 このとき、「REST」と「GraphQL」どちらを採用するか検討し、結局「REST」を採用したのだが、「RESTで保守性の高いAPIサーバーを作るぞ！」と思った時に、「なるほど、こういう点はGraphQLの方が優れ
はじめに 最近、GraphQL APIを作ることが多いです。最初の方に作ったスキーマを見ると、「なんでこんなことに...!」と自分ながら絶望することがよくあります。 今回はGraphQLの設計で「失敗したな〜」と個人的に思ったことをアンチパターンとしてまとめてみました。(随時更新) アンチパターン 大学の履修管理のシステムを考えます。学生(students)と履修科目(courses)のERDが下記です。多対多の関係の交差テーブルstudent_coursesを作ります。 露出した交差テーブル 素朴にGraphQLスキーマを定義すると以下のようになります。 type Student { name: String! studentCourses: [studentCourse] } type Course { title: String! studentCourses: [studentCo
Improving Latency with @defer and @stream Directives | GraphQL
Rob Richard and Liliana Matos are front-end engineers at 1stDibs.com. They have been working with the GraphQL Working Group as champions of the @defer and @stream directives. The @defer and @stream directives have been a much anticipated set of features ever since Lee Byron first talked about it at GraphQL Europe 2016. For most of 2020, we have been working with the GraphQL Working Group to standa
[TypeScript]GitHubにGraphQLでアクセスするServerlessプログラムを作る - Qiita
[TypeScript]GitHubにGraphQLでアクセスするServerlesssプログラムを作る ※同じ記事をこちらにも書いています 動作画面・ソースコード 動作画面 https://sorakumo001.github.io/GitHub-Manager/dist/ ソース https://github.com/SoraKumo001/GitHub-Manager 構造 . ├── README.md ├── dist [出力ディレクトリ] │ ├── index.html │ └── js │ ├── bundle.js │ └── bundle.js.map ├── front │ ├── public │ │ └── index.html [トップページ定義] │ ├── src │ │ ├── App.tsx [Application初期設定] │ │ ├── GitHu
![[TypeScript]GitHubにGraphQLでアクセスするServerlessプログラムを作る - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1cbb3d79addb454c72224d35222700a03cbdf557/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCVHlwZVNjcmlwdCU1REdpdEh1YiVFMyU4MSVBQkdyYXBoUUwlRTMlODElQTclRTMlODIlQTIlRTMlODIlQUYlRTMlODIlQkIlRTMlODIlQjklRTMlODElOTklRTMlODIlOEJTZXJ2ZXJsZXNzJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgzJUE5JUUzJTgzJUEwJUUzJTgyJTkyJUU0JUJEJTlDJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1mZDEyZDQ4MDA5MWQwYTdlNzMyMmQ4M2UzZGY4MWQzMA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBTb3JhS3VtbyZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MjgwY2NhNmJiMGM4YjZjZDNmNWZhMzI4YjY0NjVmNmE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8c8f271f97286bedf4cc2a24d4a8068d)
はじめに こんにちは！マイベストで入社してから2年目になるtkeita1024 です。現在は、Frontendのエンジニアをしています！ 今回は、新卒で入社してから1年かけてRuby on Railsで表示されているページをNext.js + GraphQLへ置き換えした話について書きたいと思います。 背景 マイベストでは、2022年~2023年にグローバル化対応というプロジェクトでRuby on Railsで表示されているページをNext.js + React + TypeScriptにし、APIをGraphQLを使用するように一部置き換えました。入社した当時は、主要なページのみしか置き換えが完了しておらず、管理画面(Admin)や新規事業（Favlist）の画面の置き換えは完了していない状況でした。そこで、新卒のタスクとして、置き換えが完了していない画面を全て置き換えるというのを取り組
☝️ GraphQL File Uploads with React Hooks, TypeScript & Amazon S3 [Tutorial]
☝️ GraphQL File Uploads with React Hooks, TypeScript & Amazon S3 [Tutorial] As time goes on, it looks like more developers are choosing to build their public-facing APIs with GraphQL instead of REST. We’re going to see a lot of the same problems people were solving with REST, solved with GraphQL, in a much cleaner and enjoyable way. A common task in a lot of web applications is performing file upl
![☝️ GraphQL File Uploads with React Hooks, TypeScript & Amazon S3 [Tutorial]](https://cdn-ak-scissors.b.st-hatena.com/image/square/40d8ea4559ac5418a4289ad27e99258086e67dc8/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fmax%2F1200%2F1%2ACwv3vzsakfVlnAbvz_f0tw.png)
「GraphQL スキーマで支えるレジアプリ開発」というタイトルで話しました - STORES Product Blog
hey で STORES（EC）や STORES レジのバックエンドエンジニアをしております、知花です。 先日“hey Talk” Engineers 新プロダクト「STORES レジ」を支えるエンジニアリングというイベントにて「GraphQL スキーマで支えるレジアプリ開発」というタイトルで、主に GraphQL スキーマを利用した開発の進め方について話しました。 今回はそのときに話した内容について書いていきます。 はじめに STORES レジではアプリ用の API として GraphQL を採用しました。API は EC（Rails）のコードベースに乗る形で実装しており、実装には graphql-ruby gem を利用しました。 そもそもなぜ GraphQL を採用したのかについてですが、プロジェクトが始まってまだ開発が始まっていないときに、アプリチームから「GraphQL 使ってみ
背景 GraphQL Code Generator を使うと GraphQL のスキーマから TypeScript のコードを生成してくれ型安全や補完の恩恵を受けて快適に開発ができるのですが、生成されたコードに対する import が VSCode 上でなかなか反映されないという問題があります。 生成したコードを開くか VSCode 自体をリロードすれば正しく認識してくれるためほんの数秒の手間なのでそこまで影響はないのですが、そのことについて README に書いたり新しく開発に関わるメンバーに「generated.ts 開いた？」という謎の初見殺しが発生してしまうことが問題でした。 （現在のプロジェクトでは monorepo で各パッケージ内の src/graphql/generated.ts にコード生成しています。） 対策 VSCode の設定の files.watcherExclu
AWS Amplify announces the new GraphQL Transformer v2. More feature-rich, flexible, and extensible. | Amazon Web Services
Front-End Web & Mobile AWS Amplify announces the new GraphQL Transformer v2. More feature-rich, flexible, and extensible. Today, AWS Amplify announces the GraphQL Transformer version 2, enabling developers to develop more feature-rich, flexible, and extensible GraphQL-based app backends even with minimal cloud expertise. The AWS Amplify CLI is a command line toolchain that helps frontend developer
技術開発部で主にバックエンド開発をしている浜田(@hamchance0215)です。 現在開発中のプロダクトのバックエンドはRails + graphql-rubyを使っています。 GraphQLを使った際のデメリットとしてN+1が発生しやすいということがよく言われます。 弊社でも例外ではなく、随所でN+1が発生していました。 今まではフロントエンドからの使われ方を考慮して、サクッと実装できる先読み(preload等)でN+1を回避していたのですが、クエリー数が増加したことでクエリーごとに使われ方を把握するのは難しくなってきたのと、同じクエリーであったとしても使われ方が多様化して先読みでは非効率になることが懸念されました(先読みが非効率になる件は後述します)。 そこで重い腰をあげて、遅延ロードを導入するために調査を行うことにしました。 ※この記事は執筆時点(2021/06)の情報で記載され
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作る - Qiita
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作るGoGraphQLapolloNuxtgqlgen お題 簡易ToDoアプリ（と言っても、この記事上では単に「ToDoの新規登録」と「登録済みの全ToDoの表示」しか出来ない）を題材として、表題の組み合わせでGraphQL通信ロジックを書くとどんな感じになるかを確認してみる。 ※今回はRDBを使った永続化などはしないで、バックエンドからは固定値を返す。 前提 Nuxt.jsやGoについては、個人ないし会社での開発経験があり、フロント->サーバの接続は（例えば）Axiosなど使ってRESTでやってたけど、GraphQLに変えてみたいという人が対象。 ただ、「そもそもGraphQLとは？」とか「RESTと比べたメリット・デメリットは？」みたいなことは書かない。（既に
GraphQLとRESTの比較─知っておきたい両者の違い
プロジェクトに使用する技術スタックの選定は、一筋縄にはいきません。多くの場合、特にGraphQLとRESTful APIのどちらを選ぶかということになると、現状や今後を見据えたAPIデザインアーキテクチャを選択することが重要になります。 APIを構築するとなると、重要な形式として次の4つが挙げられます─SOAP、GRPC、REST、そしてGraphQLです。とは言え、API構築の際にはRESTとGraphQLに絞ることが多い、というのが実情です。というのも、RESTが従来のSOAPやGRPCによるAPI構築の方法を一変させたという経緯があります。 それをさらに上回る選択肢という触れ込みでGraphQLが語られる傾向にあります。現に、多くの開発者が、GraphQLがRESTに取って代わると予想するほど。REST APIを利用した開発の際によくある問題を、GraphQLが効率的に解決してみせる
「AWS AppSync選定を悩んでいる方必見！GraphqlエキスパートがAppSync導入をいろんな角度からまとめました😎」低コストなモダナイズ開発の実践 | Ragate
AWS AppSync は Serverless Framework とどのように連携するのか？ Serverless Framework は、AWS AppSync の使用を簡単に開始できる AWS AppSync コンポーネント及びプラグインを提供しています。これらのモジュールは、利用可能なすべてのデータソースと認証方法をサポートすると同時に、AWS AppSync を使用する際に優れたコンポーネントを提供します。 また、AWS AppSync で管理される多くの API はデータソースとして AWS Lambda に依存しているケースが多いため、Serverless Framework の提供する各種機能（設計、デプロイ、モニタリング、デバッグ）を使用することで、Lambda 関数作成の複雑な点を省略し、実装コストを削減することができます。 AWS AppSync を使用する利点 フ
Integrating GraphQL Code Generator in your frontend applications (The Guild)
Integrating GraphQL Code Generator in your frontend applications In this article we’ll try to explain and demonstrate common patterns for frontend development with GraphQL and GraphQL Code Generator. Most patterns are general and can be applied to most popular frontend frameworks (React, Angular, Vue, Stencil), and to popular GraphQL client libraries (Apollo / urql), due to extended support of Gra
※この投稿は米国時間 2021 年 4 月 2 日に、Google Cloud blog に投稿されたものの抄訳です。 新しいモバイルアプリやウェブアプリを開発する際にはアプリケーション プログラミング インターフェース（API）を使用してデータや機能を組み合わせますが、API の操作については通常 REST と GraphQL という 2 つの一般的な選択肢のどちらかを選ぶことになります。 この記事では、両者のアプローチを比較し、GraphQL API の利用者にとって一貫性のあるエクスペリエンスを構築するために利用できる REST API のベスト プラクティスをご紹介します。これらはどちらかが他方よりも優れているというものではなく、同じプロジェクトでなくても同じチーム内で両方を使用できます。ただし、プロジェクトでどのような API を使用するかとは別に、一貫性のあるエクスペリエンスを
2021年にGraphQL Code Generatorを使うなら、TypedDocumentNodeを使おう - Qiita
2021年にGraphQL Code Generatorを使うなら、TypedDocumentNodeを使おうTypeScriptGraphQLapollographql-codegen この記事は GraphQL Advent Calendar 2020 8日目の記事です。 前回の記事は @mtsmfm さんの GraphQL アンチパターン - 孫煩悩 - でした。 概要 TypedDocumentNode は、 GraphQL Code Generator を使って TypeScript のコードを生成するときの出力先のひとつで、 2020年7月に登場しました。 GitHub GraphQL Code Generator 公式ドキュメント 出力結果はただの DocumentNode オブジェクト（gql 関数にクエリを渡して得られるもの）ですが、 TypeScript のジェネリクス
Photo by Parrish Freeman on UnsplashState of GraphQL todayWe started our GraphQL adoption journey by building our checkout experience. We saw tremendous benefits in adopting GraphQL when our checkout app built with GraphQL became our guiding light.We built more apps, provided infrastructure support, launched a public GraphQL API, and provided trainings and learning materials across the company. We
GraphQLを使っているときに様々な処理で認可させたい事があると思います。 このQueryはログインユーザーのみ実行できるようにしたい このMutationは管理者のみ実行できるようにしたい このQueryは自分の所有しているデータのときだけ返却するようにしたい このFieldは自分の所有しているデータのときだけ返却するようにしたい 当初はgraphql-rubyの知識が乏しかったので取得や更新処理の中で認可する処理を呼び出していたのですが、graphql-rubyのドキュメントを改めて読み直したところ、認可のためのメソッド(authorized?)がある事がわかったので動作検証を兼ねて記事を書きました。 2021/02/10 追記 コメントでいただきましたが、類似のメソッドにready?というものがあるようです。 ドキュメントにも記載されています。 https://graphql-ru
GraphQLスキーマをサーバーサイドからクライアントサイドに自動同期し、変更履歴も確認したい - いけだや技術ノート
似たような話が先日ありましたね。 こちらはGraphQLではなくてOpenAPI、かつサーバーサイド側のリポジトリからクライアントサイド側のリポジトリにプッシュする方式でした。 今関わっているプロダクトでは、1つのGraphQLスキーマが複数のリポジトリから必要とされていたり、それぞれで同期タイミングを制御できたらいいかなということもあったりで、クライアントサイドからGitHub Actionsの定期実行でプルする方式で更新をしています。 イメージは次のとおり: name: Update GraphQL Schema on: schedule: - cron: "0 0 * * 1-5" # JSTで月曜〜金曜の9時、これは適当です workflow_dispatch: jobs: UpdateGraphQLSchema: runs-on: ubuntu-latest steps: - u
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ページを開く
Yelp GraphQL Styleguide - 🎨スキーマ設計
GraphQLのnodeとegdeを正しく理解してデータベースと適切に紐づける - Qiita
GraphQL/REST における認証/認可 - tasuwo-graphql
[AWS AppSync] LambdaからGraphQLのクエリを送ってみる | DevelopersIO
RailsでGraphQL APIをつくるチュートリアル[graphql-ruby]
RESTの課題とGraphQL 〜GraphQLを簡単に使ってみる〜 - Qiita
うわっ・・・FastAPIでGraphQLの構築、楽すぎ・・・？ - Qiita
StorybookとChromaticの導入、GraphQLのSchema Stitchingの活用… これからの爆速開発に向けた「無駄をなくす」技術投資
Postmanライクに使える!! GraphQL用クライアント「Altair GraphQL Client」
Next.js, Prisma, Apollo GraphQL, Nexusで作るシンプルTODOアプリ
GraphQL設計アンチパターン - Qiita
Ruby on RailsのサービスをNext.js+GraphQLに置き換えした話
GraphQL Code Generator で生成したファイルが VSCode に反映されない問題
graphql-rubyのN+1を遅延ロードで解決する | VISITS TechBlog
GraphQL: API コンシューマ向けの一貫したアプローチの構築 | Google Cloud 公式ブログ
GraphQL at PayPal: An Adoption Story
graphql-rubyを使って認可する方法 - Qiita
GitHub - uhyo/nitrogql: GraphQL + TypeScript toolchain