関連資料 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql 宣言的UI https://speakerdeck.com/sonatard/xuan-yan-de-ui
Jetpack ComposeとGraphQLによるServer Driven UI/jetpackcompose-grahpql-serverdrivernui
関連資料 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql 宣言的UI https://speakerdeck.com/sonatard/xuan-yan-de-ui
サーバサイドの進捗に依存しないための Next.js x GraphQL のフロントエンド開発の工夫 - Money Forward Developers Blog
こんにちは！ マネーフォワード クラウド横断本部のWebエンジニアの はるやま (@linnefromice) です。 現在クラウド横断本部では BtoB 向けサービスのリプレイスプロジェクトの開発を行っており、今回は とフロントエンド開発においてそのプロジェクトで悩んだ点とそれに対する工夫の紹介をさせていただきたいと思います！(Special Thanks かわかみさん(@thinceller)、一緒にアーキテクチャの実現とこのフローを考えてもらいました) プロジェクトの特徴 今回のプロジェクトはリプレイスのため、既存のサービスで実現している機能の再現/改善または新規機能の開発を行うのですが、 現行サービスのコアモデル/データをベースに扱う必要がある サービスの特徴として、他のクラウドサービスとの連携により実現したい機能が多い のような特徴があります。 これらの特徴により、 サーバサイド
追記: 2019/01/08 この記事よりも @vvakame さんによるGraphQL APIスキーマの設計ガイドがあるのでそちらを参照することがおすすめです。 https://vvakame.booth.pm/items/1576562 また、GraphQLの設計について相談できるSlackグループを開設しているので、わからないこと・相談したいことがあればぜひ参加してください Slackグループ"GraphQLを使っている人たちの集まり"への招待リンク また、すべてのGraphQL API設計のベストプラクティスはGitHub API v4に詰まっているので、困ったらGitHubのマネをするというスタンスでいるのがよいです。 https://developer.github.com/v4/ GraphQL で実装するときに気をつけること ID は global で unique にする
GraphQLはなぜ開発体験が良いのか？モノづくり産業のDXに挑戦しているキャディに聞きました【技術選定の裏側：GraphQL編 vol.3】 | IT/Webエンジニアの転職・求人サイトFindy – GitHubからスキル偏差値を算出
ハイクラスエンジニア向け転職・求人サイト。自社開発のWeb企業の求人多数！GitHub登録をすると、IT/Web企業とマッチングします。ユーザーサクセス (キャリア)面談も実施。
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図
GraphQL API設計で気をつけること
追記: 2019/01/08この記事よりも @vvakame さんによるGraphQL APIスキーマの設計ガイドがあるのでそちらを参照することがおすすめです。 https://vvakame.booth.pm/items/1576562 また、GraphQLの設計について相談できるSlackグループを開設しているので、わからないこと・相談したいことがあればぜひ参加してください Slackグループ"GraphQLを使っている人たちの集まり"への招待リンク また、すべてのGraphQL API設計のベストプラクティスはGitHub API v4に詰まっているので、困ったらGitHubのマネをするというスタンスでいるのがよいです。 https://developer.github.com/v4/ GraphQL で実装するときに気をつけることID は global で unique にするクラ
GitHub - vvakame/graphql-schema-guide: 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
はじめに：テスト戦略の話 そもそもフロントエンドのテストって何をどんな粒度で書けばいいの？という疑問はよくあると思います。これについては以前Qiitaの記事: フロントエンドでTDDを実践する（理論編）で書いているので詳細は省きますが、Testing Trophyの戦略に則り、integration testを中心とし、unitテストは本当に有効なものに絞って書くというのがフロントエンドにおいては有効です。 APIモック フロントエンドのintegration testにおいて課題になるのがAPIのモックです。urqlやapollo clientのようなGraphql Clientでもqueryをモックする仕組みはありますが、どちらもclient自体をモックするような書き方になります。一見問題ないようですが、client側でキャッシュの挙動を制御したりできることもあり、本番コードと異なるコ
AirbnbにおけるGraphQLマイグレーション
原文(投稿日：2019/12/03)へのリンク Airbnbは、APIの大半をGraphQLに移行して、ページロード時間の短縮とより直感的なユーザエクスペリエンスを実現することに成功した。GraphQL Summitで行われたプレゼンテーションでは、Brie Bunge氏が、同社の多くのチームで使用されたマルチステージのマイグレーションプロセスについて説明した。 各ステージを成功させることによってAirbnbでは、100パーセント型安全でオーバーフェッチングのないApolloおよびGraphQLアプリを完成すると同時に、マイグレーション作業の各過程を通じてサイトの稼働と運用を維持することにも成功した。ApolloとGraphQLの適用によって、従来のRESTベースのアーキテクチャでは到底実現できなかったような、新たなパフォーマンス改善を実現するための基礎を作り上げたのだ。 マイグレーション
概要 2022年のフロントエンドに必要なスキルマップにもあるように、GraphQLという選択肢が一般化しています。 引用元 GraphQLを使用する場合、GraphQLの特性を知らなければなりませんが、今回の記事ではGraphQLとは何か。どう使うのかについては言及致しません。その場合は、こちらの記事を一読していただけますと幸いです。 今回は、GraphQLを使用する際にGraphQLのスキーマやクエリからTypeScriptの型定義を自動生成する方法について記事にしていきます。 GraphQLのスキーマやクエリからTypeScriptの型定義を自動生成するには 例えば、フロントエンド開発においてTypeScriptの導入をしている場合、GraphQLのスキーマごとの型定義を作成しなければなりません。 ただ、GraphQLのスキーマを確認しながら型を手動で作っていくのってしんどいですよね。
SaaS開発でもGraphQLを使いたい！
SaaSパーティショニングモデル まず、SaaS環境でテナントデータを分割するときには、一般的に使用される3つの基本モデル (サイロ、ブリッジ、プール) があります。 AWSでのマルチテナントストレージモデルの構築より 3つのモデルの詳しい解説については、ここ数年で多くの記事/議論が上がっており、ここでは詳しく解説しませんが、SaaSというビジネスモデル上カスタマイズ性と引き換えにコスト面/生産性を優先してプールモデルを選択することが多く、弊社でも同じくプールモデルを採用しています。 またプールモデルを実現するためのデータベース戦略として、OSSのDBの中ではPostgreSQLのRLS(Row Level Security)機能が唯一の選択肢であり、実質的にデファクトスタンダードとなっています。(OSSではないがOracleやSQLServerでもRLS機能を有している。) GraphQ
サービス間連携のためのGraphQL APIをClojureで開発している話 - Opt Technologies Magazine
社内共有のマスタデータ基盤としてのGraphQL APIをプログラミング言語Clojureで開発している事例をご紹介します。 あいさつ 新規API開発の背景 現行システムの問題点: 共有データベース 解決策: データベースをラップするサービス 技術選定の経緯 API方式: GraphQL メイン開発言語: Clojure アプリケーションのアーキテクチャ設計 The Clean Architecture コードの全体像 resolver use case entity boundary 主な要素技術 アプリケーション構成の整理とライフサイクル管理: Duct GraphQL APIサーバ: Lacinia + Pedestal 入力バリデーション: malli DBアクセス: clojure.java.jdbc + Honey SQL テストとカバレッジ計測: clojure.test +
Demystifying Cache Normalization | Apollo GraphQL Blog
Apollo Client has a particularly challenging responsibility: to make interconnected GraphQL data easy to use on the client-side. In most rich client applications, we need the ability to cache data and pass it to components. We also need to know when to re-fetch data vs. when to return what’s already cached; this helps to avoid making unnecessary network requests. This kind of caching logic can be
ハコベル物流DXシステム開発部のおおいし (@bicstone) です。普段はフロントエンドエンジニアとしてハコベル配車計画の開発を行なっています。 前回の記事では、GraphQLをプロダクトに投入するにあたり検討したエラーレスポンス設計パターンについて紹介しました。 この記事では、フロントエンドとバックエンド間でのバリデーションスキーマの取り決めについて解説します。 GraphQLスキーマ設計で悩まれている方の参考になれば幸いです。 はじめに ハコベル配車計画では、バックエンドとフロントエンド間の通信においてGraphQLを活用しています。1年ほど運用していく中で、設計における課題がいくつか表面化してきました。 今回、社内ハッカソンイベントHackWeek 2023 [1] が開催され、ハコベル配車計画チームでは1年間の運用の中で感じた、GraphQLスキーマの設計における悩みを振り返る
🌱 This post is still growing and likely will change as the best practices evolve 🌳 GraphQL errors are something many of us struggle with. Good practices are emerging but the community has not yet settled on a convention. I hope this guide helps demystifiy the many ways you can structure errors in your GraphQL servers, and the tradeoffs each of them make. Stage 1: GraphQL Errors AKA Top-Level Err
Testing GraphQL doesn't have to be difficult. This article will explore static and dynamic mocks to make testing GraphQL a breeze. Imagine you're working on a new feature with another team. You're in charge of the React side, but someone else is in charge of the GraphQL changes. Is it possible for you to develop your side before they have finished theirs? Or how about wanting to test your componen
受発注・サプライチェーン管理システムとサプライパートナー向けシステムに関する現状や課題などについて、開発を担当しているエンジニアが話す「Rustで負債を解消するために大幅刷新する複雑な業務Webアプリ」。ここでフロントエンドエンジニアのOgura氏が登壇。BFF／FEを大整理した経験について話します。 自己紹介とセッションのあらすじ Ken Ogura氏（以下、Ogura）：ではOguraから「『Rust製の業務WebアプリケーションをRustでリプレイス』のドサクサでBFF／FEを大整理した話」をします。 私の自己紹介。フロントエンドエンジニアをやっています。もともとはバックエンドでRustバリバリ触ってたんですが、いろいろな事情で今はフロントエンドを触っています。あと趣味でいうと競技プログラミングが得意です。あとYouTuberもやってます。 私の（発表）時間はちょっと短いので、早
We all know how great GraphQL is when things go well, but what happens when things don’t go well? How do we handle errors in GraphQL? How can we do it in a way that’s easy to understand? Let’s start by running a simple GraphQL query: { user(username: "@ash") { id name } }we might get something like this: { "data": { "user": { "id": "268314bb7e7e", "name": "Ash Ketchum" } } }This is what we hope to
AppSync とは？ GraphQL というAPI仕様を用いて「柔軟なAPI」を提供するAWSのマネジメントサービス ちなみに、従来の REST API 形式だと AWSは API Gateway を提供している GraphQL とは？ Facebookが開発しているWeb APIのための規格 「クエリ言語」 と 「スキーマ言語」 からなる REST API は、1URLに対し1つのAPIや情報を提供できるのに対し、 GraphQL は欲しいデータを以下のようなクエリとして発行すると、欲しいデータを欲しいObject形式で得ることができます AppSyncの仕組み AppSyncは直接DynamoDBの値を取得・更新・削除することができます 従来のAPI Gatewayだと、AWS Lambda が間に必要でしたが、 AppSyncは Lambda レス でDynamoDBへのアクセスが
GraphQLのアプリケーションへの組み込みを考える - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、株式会社ラクスで先行技術検証を行っている技術推進課の@t_okkanです。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在ラクスでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、GraphQLについて検証を行いましたので、その結果の報告を行います。 なお、別テーマの取り組みや、過去の取り組みに関しては、こちらからご覧ください。 tech-blog.rakus.co.jp GraphQL GraphQLの言語仕様 クエリ言語 スキーマ言語 GraphQLのアーキテクチャ スキーマファーストな開発 検証してわかったこと フロントエンドとバックエンドの実装を切り離せ、お互いを疎結合にできる 共通の定義ファイルを元に実装を行うため、APIの仕様が明確になり実装の手戻りの防止や開発速度の向上が見込める その
Build a GraphQL + React app with TypeScript - LogRocket Blog
We pass in the id as a variable, which corresponds to the flight_number from the LaunchList query. The LaunchProfile query will also contain nested objects/types, where we can get values by specifying the keys inside brackets. For example, the launch contains a rocket definition (type LaunchRocket), which we will ask for the rocket_name and rocket_type. To get a better understanding of the fields
GraphQL + Go による画像投稿機能の実装談･･･Exif 情報の削除、AWS S3 での画像管理、ユーザー体験の模索など - 一休.com Developers Blog
こんにちは。宿泊プロダクト開発部 UI開発チーム エンジニアの香西です。 半年ほど前に、一休.comとヤフートラベルで、クチコミ画像の投稿機能をリリースしました。 一休.comとヤフートラベルでは、ユーザーに画像をアップロードしてもらう機能の実装は前例が無かったため、試行錯誤しながらの開発となりました。 今回はその時の開発についてお話したいと思います。 背景 全体像 フロントエンドの実装 GraphQL のリクエスト送信 どのタイミングで画像をアップロードするか アップロード進捗状況を表示したい バックエンドの実装 画像のバリデーション 画像のデコード・エンコード （余談）JPEG のエンコードでメモリを大量に使用してハマった ベンチマーク計測 Amazon S3 バケットに画像をアップロード S3 署名付きURLを使用 使いやすいユーザーインターフェースを求めて 最後に 背景 クチコミを
GraphQL、Go、React、TypeScriptを使ったTodoアプリの開発（バックエンド編） - Qiita
はじめに GraphQLをハンズオンで学ぶためにTodoアプリを作ってみました。 本記事ではpart1として、GraphQLクエリを使ったTodoアプリのバックエンド開発手順をまとめました。 part2のフロントエンド編はこちらをご覧ください。 使用した技術スタック 言語：Go、TypeScript ライブラリ：React、gqlgen、codegen、xorm DB：Postgres gqlgenとcodegenはGraphQLのスキーマ定義から、それぞれGoとTypeScriptのコードを自動生成してくれるライブラリです。 xormはgoのORMライブラリで、DBにはPostgresを使用しました。 Todoアプリの概要 Todoアプリの完成イメージはこちらです。本記事ではこのバックエンド部分についてハンズオン形式でまとめます。 ※ChromeのプラグインでGraphQL Networ
多機能なGraphQLサーバー: Hasura GraphQL Engineを知っておきたい人が読む記事 - Qiita
はじめに 目的 本記事の目的は、オープンソースで開発されているGraphQLサーバーHasura GraphQL Engine（以下、特別な文脈がない限りHasuraと表記）の概要について紹介することです。 筆者はここ半年ほど、業務・プライベートの開発でHasuraを使用しています。Hasuraを一通り触った段階で、自分の知識の整理と、まだまだ少ない日本語情報の充実の一助になればという動機で本記事を公開しました。 本記事を通して 「聞いたことはあるけど、日本語情報が少なくてよく分かっていない」 「技術選定の判断軸として、他事例を元に便利/つらみポイントを把握しておきたい」 という方の参考になれば幸いです。 構成 本記事は、以下のように構成されています。 前半：Hasura公式ドキュメントの内容を交えて、Hasuraの概要について簡単に述べた内容 後半：筆者の開発・運用体験に基づいてメリット
Next.js + AWS Amplify + Graphqlで作るサーバーレスアプリケーション環境構築 - Qiita
概要 こんにちは、先日AWSのre:Inventで発表されたAWS Amplify DataStoreがめちゃくちゃ便利すぎて驚きを隠せない、都内でフロントエンドエンジニアをしていますかめぽんです。 今まで、VueやNuxtでの開発がメインでやってきておりましてReact、Nextでの開発経験が少なくまたTypescriptでなにか出来ないかなと探しておりました。 最近だとモバイル開発のためのAWSのサービスをインテグレートしたAWS版firebaseのようなAmplifyというサービスが出ています。内容をみてみると、何やら爆速でサーバーレスアプリケーションが出来そうだなと感じたので、Next.js + AmplifyでTodoアプリを作ってみました。巷では、Nuxt.js + firebaseの組み合わせの記事がかなり多かったですが、こちらのアーキテクチャでも実装出来たのでその方法を体系
この記事では TypeScript + Apollo Server + TypeORM を前提として話を進めます。 GraphQL のサーバ実装では 1:N 構造において N+1 問題が発生しがち 技術選定がこれからの場合や、ORM が置き換えられる場合は N+1 を考慮した ORM を検討するのが良い それ以外の場合は DataLoader を実装するのが良さそう。ライブラリを使えばそんなに大変ではない JOIN での解決も可能だが、 GraphQL の道を踏み外している(ように感じる) GraphQL における N+1 問題 GraphQL サーバで 1:N のデータ構造を実装しクエリすると、すぐに N+1 問題に行き当たります。User と Post が 1:N の関係となる、以下の例を見てみましょう。 type User { id: Int! name: String! posts
概要 gqlgenを使ってGraphQLサーバを実装している。 今は開発に慣れてきた部分があるが、gqlgenの導入時に調査が必要であったアレやるには？コレやるには？を少し書いてみる。 しかし、どれも大体公式ドキュメントに乗っている内容なので詳細はそちらを見るのがよい 公式doc GraphQL gqlgen エラーをフックしてアプリ固有の処理をしたい 例えばResolverからエラーを返す際に必ず以下のことを行いたいケースがあるとする Internalエラーはログ出力したい エラーに応じて決められたjsonフォーマットでエラーメッセージを返したい このようなニーズに応えるためにgqlgenのhandler.ServerにはSetErrorPresenterという関数でresolverが返したエラーをHookする仕組みがある。 GraphQLでのエラーメッセージはextensionsという
![[GraphQL]gqlgenを使ってアレがしたい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/32d5fe909fccb643a44a55a88f845b60edb59330/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCR3JhcGhRTCU1RGdxbGdlbiVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MiVBMiVFMyU4MyVBQyVFMyU4MSU4QyVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWYwZDU5ODdmOWQ2YmM0OGVhZjk0Y2MwZWJiNjMzYmQ%26mark-x%3D142%26mark-y%3D100%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBrLWt1cmlrdXJpJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lYjcwOTRhNDg5NTFmMjkzY2QzN2E0ZWRlMjM3MjRiMA%26blend-x%3D142%26blend-y%3D504%26blend-mode%3Dnormal%26s%3D52be46256ecf0af3474966365f5a3681)
ユビーではNestJSでGraphQLのサーバー実装をおこなっています。今回は実践で得られた知見を元にNestJSでGraphQLのResolverに対してGraphQLのスキーマから生成したTypeScriptの型を適用する方法について解説します。 前提としてNestJSにはスキーマファーストとコードファーストがありますが、今回はスキーマファーストで書いたうえで、スキーマから型を生成するアプローチを紹介します。 NestJS組み込みの型生成を使う NestJSのスキーマファーストのアプローチではNestJSの組み込みの機能でスキーマからTypeScriptの型を生成することができます。 以下のように書くことで、 graphql.ts に型が生成されます。 GraphQLModule.forRoot<ApolloDriverConfig>({ driver: ApolloDriver, t
GraphQLのスキーマとは GraphQL APIの仕様を表現するものです。スキーマ定義言語（SDL(Schema Definition Language)）を使って表現します。GraphQL APIを構築するにあたり、FW、言語に依存せずにSDLで表現できます。 以下、SDLでのスキーマ定義の例です。 type Book { id: ID! name: String pageCount: Int author: Author } type Author { id: ID! firstName: String lastName: String } GraphQLをJavaで実装する場合、以下のようにJavaコードでの定義も可能です（Java以外の言語でもその言語で定義することが可能です）。 https://www.graphql-java.com/documentation/master
GraphQL のセキュリティ上の課題
GraphQL を保護する方法GraphQL は、REST の代替として使用できるオープンソースのクエリ言語です。急速な進化を続ける最先端の API のニーズに応える柔軟性を実現する GraphQL は、現在多くの開発者によって着々と導入されています。GraphQL には、必要なデータをピンポイントでリクエストし、継続的な API の進化を容易にするといったメリットがあります。 このように多くのメリットがある GraphQL ですが、攻撃者によって悪用される可能性のある機能や、クエリの柔軟性によって意図せず引き起こされてしまう問題、攻撃者にとって恰好のターゲットとなる脆弱性など、その使用に伴うセキュリティの課題についてはまだよく知られていません。 このブログ記事では、これらの課題を探るとともに、GraphQL のより安全な導入を可能にするデフォルトやコントロール設定を、リスクを伴う設定、悪
このコースでは、HasuraによるGraphQLバックエンドの設定について簡潔に紹介します。 30分で、クエリ、ミューテーション、サブスクリプションを備えた強力でスケーラブルなリアルタイムGraphQLバックエンドを設定します。また、Hasuraが、ユーザーが書いたカスタムGraphQL APIsとして、また非同期で実行されてデータベースイベントによってトリガーされるイベントトリガーとして、カスタムビジネスロジック（任意のプログラミング言語）の統合にどのように役立つかを学びます。 学習内容 このコースは、さまざまなHasura機能、それらの使用方法と使うタイミングの理解に役立ち、上級トピックに入る前の出発点としては理想的です。 Hasuraの基本：Hasuraを使ってPostgresデータベースを活用したリアルタイムGraphQL APIを生成します。Postgresの力：Postgres
はじめに 最近気になっていた Apollo について、1 から調べてみました。Apollo 入門記事の位置付けを目指しています。 よって、本記事は以下のような読者を対象にしています。 Apollo って聞いたことはあるけど、何ができるのかよくわからない 気にはなってたけど、日本語の情報が少なくて調べる気になれない バックエンドのツールなのかフロントエンドのツールなのか、話はそれからだ 本記事の内容 Apollo の簡単な概要 Apollo を使って GraphQL サーバーを建ててみる Apollo を使って GraphQL サーバーを利用する React アプリを作ってみる Apollo の簡単な概要 公式ページはここです。 以下の画像が思想の全てを語っていると思います。 すべてが A(pollo)になる。 Apollo を利用することで、あらゆるデータが GraphQL サーバーとして
GitHub - samdenty/gqless: a GraphQL client without queries
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
Hasuraで既存のPostgreSQLのDBから爆速でGraphQLのAPIサーバーを構築出来たのでその内容を備忘録としてまとめます。 本記事は以下のような方を対象にしています。 HerokuのPostgres add-onを利用してアプリのDBを構築している GraphQLでのAPIサーバーを試したい でもリゾルバとかTypeDefをイチから書くのは面倒 Hasuraとは？ Instant realtime GraphQL engine とドキュメントでは紹介されていますが、 ざっくり言うとPostgreSQLからGraphQL APIサーバーを自動で構築するものです。 公式の以下図の通り、DBであるPostgreSQLと、GraphQLのAPIを使うクライントとの間に入り、GraphQLとSQL（or JSON）を相互変換してくれます。 （公式サイトより） Hasuraサーバーの構築
We are excited to announce GraphQL Mesh — a powerful open source library enabling developers to leverage the power of GraphQL without requiring changes to the technologies your servers already use. We’ve been using this tool to significantly improve our clients stacks — improving the areas that a classic GraphQL gateways would have left untouched The Basics GraphQL Mesh takes any source schema (op
TL;DR 考え方 コンポーネントとセットで、そのコンポーネントが必要なデータを Fragment で宣言する、React の宣言的 UI に合わせた宣言的データ取得（declarative data-fetching）という考え方 Component Scopedに取得データを宣言することで「そのコンポーネントで必要なデータはなにか」を管理しやすくなることで、under-fetching / over-fetching が抑制でき、変更にも強くなる お悩みポイント Fragment-scoped な変数を定義するための標準機構がない Relay は directive を利用した独自の機構を持つ 便利そうなライブラリ graphql-anywhere クエリ結果を Fragment の形に整形する not actively support apollo-link-fragment-arg
今回は、 create-react-app で作った React (TypeScript) のプロジェクトに AWS Amplify をセットアップし、 GraphQL 通信を行う3つの方法をそれぞれ見ていきます。 React + AWS Amplify プロジェクトのセットアップ React プロジェクト作成 まずは create-react-app を使ってプロジェクトを作成します。 $ npm install -g create-react-app $ create-react-app amplify-react-graphql-example --typescript $ cd amplify-react-graphql-example $ yarn start これで localhost:3000 にローカルサーバーが立ち上がります。 --typescript オプションで Ty
Amplify & GraphQLでのデータモデル設計事例集 - BioErrorLog Tech Blog
AWS Amplify & GraphQLでのデータモデル (スキーマ) 設計例をまとめます。 はじめに スキーマ設計例 Todoアプリ イベントアプリ チャットアプリ Eコマースアプリ WhatsAppクローン Redditクローン マルチユーザーチャットアプリ インスタグラムクローン カンファレンスアプリ おわりに 関連記事 参考 はじめに こんにちは、@bioerrorlogです。 最近、AWS Amplifyに注目してします。 Amplifyはフルスタックなサーバレスアプリを素早く作ることが出来るプラットフォームで、プロダクト開発の生産性を高めることが出来ます。 AmplifyプロジェクトのAPIを GraphQL (AppSync)で構築するときには、データモデルをスキーマschema.graphqlに定義する流れになります。 このGraphQLのスキーマ設計はリレーショナルデー
最初に GraphQLは参照系のQueryと更新系のMutationの２種類が区別して定義されています。 このように参照系と更新系のinterfaceを分けているため、GraphQLはCommand and Query Responsibility Segregation(CQRS)だと説明されることがあります。 確かにその通りなのですが、なぜCQRSのアーキテクチャなのか、具体的にQueryとMutationを定義する際にどういったことを意識するべきなのかということはあまり説明されていないように思います。 この記事ではCQRSがどういったことを意図しているのか、それを元にどのようにGraphQLでスキーマを設計するべきなのか説明します。 REST APIの問題点とCQRS RESTはURLで表現されるデータに対してCRUD(Post, Get, Put, Delete)のアクションを定義
GraphQLにおけるSubscription処理について(実装例: Amplify + AppSync) - Qiita
はじめに こんにちは ! KDDI アジャイル開発センターの小板橋です。 この記事は、KDDI Engineer Advent Calendar 2020の15日目の記事となります。 GraphQLの記事はよく見かけますが、GraphQLにおけるSubscription処理についてはあまり目にすることがありません。そこで本記事は、Subscriptionに着目したもので、実装時の助けになれれば幸いです。 GraphQLについては、以前事細かく書いたので、そちらをご覧ください。GraphQL入門 仕組み realtime API pub/subのような仕組みのAPIをrealtime APIというらしいです。 参考: GraphQL Subscription このrealtime APIなのですが、大きく分けて3つのタイプに分類されます。 1.ポーリング クライアントは、定期的にリクエストを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphQL API設計で気をつけること - Qiita
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法 - Qiita
mswとgraphql codegenでGraphQLをモックし、効果的で効率的なReactのテストを書く
GraphQLのスキーマ定義やクエリから型定義、自動生成できまっせ - Qiita
【GraphQL】スキーマ駆動開発におけるバリデーションの取り決め設計パターン集
A Guide to GraphQL Errors
Mocking and Testing GraphQL in React
なぜGraphQLをコードファーストに統一したのか？ 型定義の一貫性を保つためのBFF／FE大整理
200 OK! Error Handling in GraphQL
AppSync & GraphQL 入門 - Qiita
GraphQL で N+1 問題を解決する 4 つのアプローチ
[GraphQL]gqlgenを使ってアレがしたい - Qiita
NestJSのGraphQL Resolver関数を型安全にしたい
GraphQLのスキーマと型定義 - Qiita
コース紹介 | Hasura GraphQLチュートリアル
Apollo なら爆速で GraphQL サーバーと GraphQL クライアントアプリが作れる - Qiita
Hasuraで既存のPostgreSQLから爆速でGraphQL APIサーバーを構築する - Qiita
GraphQL Mesh - Query anything, run anywhere (The Guild)
GraphQL の Fragment Colocation について
ステップバイステップ AWS Amplify GraphQL API - bagelee（ベーグリー）
CQRSの観点から考えるGraphQLのスキーマ設計