![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-04-26T04:17:21+00:00","default:admin","admin") #author("2023-04-26T04:29:49+00:00","default:admin","admin") -[[GraphQLの全体像とWebApp開発のこれから:https://qiita.com/saboyutaka/items/171f7382cdf75b67d076]] -[[GraphQLが大注目のグラフAPIとは？ 「REST API時代終了」後に注目すべきAPIの新潮流:https://www.sbbit.jp/article/cont1/93872]] -[[【技術選定の裏側：GraphQL編 vol.1】読書ログ:https://zenn.dev/gunners6518/scraps/6ca2872c486196]] -[[GraphQL と Prisma から考える次のN年を見据えた技術選定:https://speakerdeck.com/qsona/architecture-decision-for-the-next-n-years-at-studysapuri]] -[[仕事でバックエンド開発するときに考えていること: 実践編:https://techblog.cartaholdings.co.jp/entry/2022/10/20/100730]] -[[API設計が楽でコア業務に集中できるように。GraphQLで開発がどう変わったか？タクシーアプリGOの中の人に聞きました【技術選定の裏側：GraphQL編 vol.1】:https://findy-code.io/pick-up/interviews/mobilitytechnologies-engineer]] -[[NestJSでスケーラブルなBFFを構築。メルカリShopsエンジニアがGraphQL活用のリアルを語る【技術選定の裏側：GraphQL編 vol.2】:https://findy-code.io/pick-up/interviews/souzoh-engineer]] -[[GraphQLはなぜ開発体験が良いのか？モノづくり産業のDXに挑戦しているキャディに聞きました【技術選定の裏側：GraphQL編 vol.3】:http://52.198.134.176/2022/03/14/graphql%E3%81%AF%E3%81%AA%E3%81%9C%E9%96%8B%E7%99%BA%E4%BD%93%E9%A8%93%E3%81%8C%E8%89%AF%E3%81%84%E3%81%AE%E3%81%8B%EF%BC%9F%E3%83%A2%E3%83%8E%E3%81%A5%E3%81%8F%E3%82%8A%E7%94%A3%E6%A5%AD%E3%81%AEdx/]] -[[Gaudiyの技術スタックと選定における思想:https://techblog.gaudiy.com/entry/2021/09/18/000711]] -[[GraphQLのアプリケーションへの組み込みを考える:https://tech-blog.rakus.co.jp/entry/20210323/graphql]] -[[データ指向アプリケーションデザインから見るGraphQL:https://zenn.dev/saboyutaka/articles/680542da534de5]] -[[GraphQLでバックエンドのコードをすっきりさせた話:https://tech.layerx.co.jp/entry/2021/04/12/121427]] -[[「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ:https://eh-career.com/engineerhub/entry/2018/12/26/103000]] -[[GraphQL入門 - 使いたくなるGraphQL:https://qiita.com/bananaumai/items/3eb77a67102f53e8a1ad]] -[[アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた:https://www.webprofessional.jp/rest-2-0-graphql/]] -[[GraphQLは何に向いているか:https://k0kubun.hatenablog.com/entry/graphql]] -[[初心者目線で分かりやすく解くGraphQLを解説！～同じWebAPIのRESTとの違いは？～:https://vitalify.jp/app-lab/20171006-graphql/]] -[[GraphQL を使うと何が嬉しいのか？いろいろ触って検証してみた:https://sitest.jp/blog/?p=11001]] -[[NetflixがGraphQLフェデレーションを使用してAPIをスケーリングする方法（パート1）:https://ichi.pro/netflix-ga-graphql-fyedere-shon-o-shiyoshite-api-o-suke-ringu-suru-hoho-pa-to-1-191544128800738]] -[[コンポーネントとGraphQLクエリの管理にFragment Colocactionを導入したら素晴らしかった件:https://tech.uzabase.com/entry/2022/06/30/164016]] -[[作って学ぶGraphQL。gqlgenを用いて鉄道データ検索API開発入門:https://future-architect.github.io/articles/20200609/]] -[[GraphQL Guildのエコシステムって便利だね:https://silverbirder.net/entry/2022/10/15/000000]] -[[React 時代に選ぶ GraphQL:https://oisham.hatenablog.com/entry/2022/07/11/033508]] -[[快適にスキーマ駆動開発をするためのGraphQLエラー設計:https://tech.buysell-technologies.com/entry/2023/02/21/000000]] -[[GraphQL Inspection で守る GraphQL API:https://engineer.retty.me/entry/2023/03/23/120000]] *概要 [#ibfbdf76] -クエリ言語を記述することで、クライアント側が欲しいリソースとその形式を宣言できる -単一のエンドポイントおよびリクエストで複数のリソースを取得できる -型定義やクライアント実装の自動生成、クエリを試しに発行できるクライアントGUI機能、クエリ補完機能などといった開発体験の向上 *オススメ資料 [#l5ff3075] -[[Gaudiyのプロダクト戦略とGraphQLの活用:https://techblog.gaudiy.com/entry/2021/10/20/121501]] --[[GraphQLスキーマ設計ガイド 第2版:https://booth.pm/ja/items/1576562]] --[[宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践:https://speakerdeck.com/sonatard/swiftui-graphql]] --[[GraphQLが解決する問題とその先のユースケース:https://zenn.dev/saboyutaka/articles/07f1351a6b0049]] --[[GraphQL を利用したアーキテクチャの勘所:https://speakerdeck.com/qsona/architecture-practices-with-graphql]] -[[GraphQL ベストプラクティス:https://maku.blog/p/4reqy9i/]] -[[TypeScript * GraphQLのバックエンド設計プラクティス:https://zenn.dev/tatta/books/5096cb23126e64]] -[[これを読めばGraphQL全体がわかる。GraphQLサーバからDB、フロントエンド構築:https://reffect.co.jp/html/graphql]] -[[「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ:https://eh-career.com/engineerhub/entry/2018/12/26/103000]] *API設計 [#o453cf5e] -[[GraphQL API の設計:https://docs.aws.amazon.com/ja_jp/appsync/latest/devguide/designing-a-graphql-api.html]] -[[メルカリShops の技術スタックと、その選定理由:https://engineering.mercari.com/blog/entry/20210810-mercari-shops-tech-stack/]] **コードファースト or スキーマファースト [#n3238d51] -[[NestJS でGraphQLバックエンド - コードファーストアプローチ:https://zenn.dev/waddy/books/graphql-nestjs-nextjs-bootcamp/viewer/nestjs]] -[[メルカリShops の技術スタックと、その選定理由:https://engineering.mercari.com/blog/entry/20210810-mercari-shops-tech-stack/]] GraphQL のスキーマ管理は悩ましい課題ですが、NestJS の Code First アプローチはコードに集中することができる良い手法でした。これによってエンジニアはスキーマとコードを同期する必要がなくなり、コードだけを管理すればよくなりました。 *マイクロサービス [#l598e7cb] -[[Schema Stitching と Apollo Federation の比較:https://zenn.dev/yuta_ura/articles/compare-schema-stitching-and-apollo-federation]] *TypeScript [#e2c9be1a] -[[TypeScriptのcode-firstなGraphQL開発ツール比較: TypeGraphQL vs Nexus vs Pothos:https://tmokmss.hatenablog.com/entry/20230109/1673237629]] **[[urql:https://formidable.com/open-source/urql/]] [#w2847be7] -[[GraphQLクライアントにurqlをおすすめしたい:https://zenn.dev/adwd/articles/f4c5c5120467bb]] -[[GraphQLライブラリをApollo→Relay→Urqlにハシゴした話:https://nulab.com/ja/blog/nulab/graphql-apollo-relay-urql/]] -[[URQLのExchange Authで認証付きのAPIを呼び出す:https://qiita.com/mu-suke08/items/40d42919189d16f78e9d]] ***Svelte [#l6611520] --[[Svelte Bindings:https://formidable.com/open-source/urql/docs/basics/svelte/]] --[[How to build a book review app with Svelte, urql and Dgraph Cloud:https://dgraph.io/blog/post/build-a-svelte-urql-app-with-slash-graphql/]] **[[TypeGraphQL:https://typegraphql.com/]] [#j450d89e] -[[TypeGraphQLつかってみた:https://zenn.dev/take4s5i/articles/type-graphql-overview]] -[[Typescript + Graphqlを使うならGraphqlはTypeGraphqlがオススメ:https://qiita.com/taisuke101700/items/d194952e7e5051163b01]] -[[TypeGraphQLを使用してGraphQLでTypeScriptを使用する:https://morioh.com/p/26a70e06402d]] **[[graphql-code-generator:https://the-guild.dev/graphql/codegen]] [#a26efc99] -[[GraphQL Code Generatorってどんなコードを生成してくれるの？:https://qiita.com/kyntk/items/624f9b340e813844a292]] **Apollo Client [#l2b7933e] -[[Apollo Client のキャッシュの仕組みとローカルの状態管理について:https://tech.buysell-technologies.com/entry/2021/08/25/133925]] **Relay [#rba77370] **Prisma [#o512f21d] -[[Prismaを使ってサクッとGraphQLのバックエンドを作成する！:https://labs.septeni.co.jp/entry/2021/03/25/180000]] *Go [#ba0ca023] -[[Goで学ぶGraphQLサーバーサイド入門:https://zenn.dev/hsaki/books/golang-graphql]] **gqlgen [#o0c550af] -[[API設計が楽でコア業務に集中できるように。GraphQLで開発がどう変わったか？タクシーアプリGOの中の人に聞きました【技術選定の裏側：GraphQL編 vol.1】:https://findy-code.io/pick-up/interviews/mobilitytechnologies-engineer]] *PHP [#sd5b85e0] -[[PHPで使えるGraphQLライブラリの使い勝手あれこれ:https://zenn.dev/haradakunihiko/articles/82114148bd3c4e]] -[[LaravelでGraphQLを使うために学んだメモ:https://zenn.dev/yum3/articles/t_search_laravel_graphql]] *[[Apollo GraphQL:https://www.apollographql.com/]] [#f25a9fbc] -[[Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介:https://techblog.yahoo.co.jp/entry/2020121530052952/]] -[[Apollo なら爆速で GraphQL サーバーと GraphQL クライアントアプリが作れる:https://qiita.com/jintz/items/4ddc6bf4f95238eff5e9]] -[[Apolloでの綺麗なAPI実装（GraphQL）を試す:https://qiita.com/teradonburi/items/2ad98c7c21f1f6cc4390]] -[[[GraphQL] TypeScript+VSCode+Apolloで最高のDXを手に入れよう:https://dev.classmethod.jp/articles/apollo-good-dx/]] -[[GraphQL入門 - React.js & Express.js & Apollo の簡単チュートリアル:https://www.m3tech.blog/entry/graphql-apollo-react-express-nodejs]] -[[GraphQL 採用における反省と Apollo Server の運用について:https://ceblog.mediba.jp/post/638171980263194625/graphql-and-apollo-server]] *Apollo Studio [#x63574e7] *Hasura [#e3733e45] -[[UX改善に集中できるように、GraphQLを中心としたシステム構成をObremoで採用した話:https://cocoda.design/namedpython/p/pe5050b2f6e12]] -[[Hasuraを使ってReactでTodoアプリをサクッと作ろう Hasura編:https://tech.wasd-inc.com/entry/2021/07/06/193743]] -[[Hasuraを使ってReactでTodoアプリをサクッと作ろう React立ち上げ編:https://tech.wasd-inc.com/entry/2022/08/17/122059]] -[[Hasuraを使ってReactでTodoアプリをサクッと作ろう 完結編:https://tech.wasd-inc.com/entry/2023/03/24/152936]] *AWS [#k7230112] -[[AWSでGraphQLサーバーをたてるときの選択肢を比較:https://zenn.dev/eringiv3/scraps/4774ea6608cac1]] -[[AWSにおけるAPI開発にてGraphQL(AppSync)とREST API(API Gateway) を選定する際のメリットとデメリット:https://serverless.co.jp/blog/324/]] -[[AWS AppSync(GraphQL)を用いたバックエンドの構築事例:https://fintan.jp/page/343/]] -[[AWS AppSync選定を悩んでいる方必見！GraphqlエキスパートがAppSync導入をいろんな角度からまとめました:https://www.ragate.co.jp/blog/articles/12064]] -[[AppSync VS APIGateway 両者の違いをスタートアップCTOが本気で考えてみた！:https://www.ragate.co.jp/blog/articles/245]] -[[AppSyncでGraphQLへの入門が「easy」になる(前編):https://xp-cloud.jp/blog/2020/06/01/7159/]] -[[AppSyncでGraphQLへの入門が「easy」になる(後編):https://xp-cloud.jp/blog/2020/09/30/7642/]] -[[AmplifyとGraphQLではじめるサーバレスWebアプリのチーム開発体験記:https://qiita.com/yamayoshii/items/10ddce9e443c4ab12f51]] *フロントエンド [#a6b81846] **Vue [#wf6ad2da] -[[【爆速】Vite+Vuejs+Amplify+AppSync(GraphQL)でリアルタイム掲示板作成+つまづいたところ:https://qiita.com/Nerosui777/items/f93b07fb69fd31efa39b]] *バックエンド [#t65bc680] -[[Prismaを使ってサクッとGraphQLのバックエンドを作成する！:https://labs.septeni.co.jp/entry/2021/03/25/180000]] *セキュリティ [#i369c341] -[[GraphQL診断ガイドライン:https://github.com/WebAppPentestGuidelines/graphQLGuideLine]] -[[GraphQLの入門情報とセキュリティ観点で気をつけたいこと:https://blog.kapiecii.com/posts/2021/11/28/graphql101-and-securitytest/]] -[[GraphQLを導入する時に考えておいたほうが良いこと:https://engineering.mercari.com/blog/entry/20220303-concerns-with-using-graphql/]] **リスク [#g10cfa06] -[[GraphQL API を悪意あるクエリから守る手法:https://yigarashi.hatenablog.com/entry/graphql-query-analysis]] ***[[GraphQLによるDoS攻撃:https://github.com/WebAppPentestGuidelines/graphQLGuideLine/blob/master/docs/specific/dos.md]] [#y0c597f5] -データを大量に取得するクエリ -重い計算をさせるクエリ -大量にDBアクセスを発生させるクエリ ***[[レースコンディション:https://github.com/WebAppPentestGuidelines/graphQLGuideLine/blob/master/docs/specific/race_condition.md]] [#lcea3ef9] **対策 [#n1b1e6d8] ***ホワイトリストによる制限 [#ld68101b] -GraphQL API が受け付けるクエリ一覧をホワイトリストとして持っておいて、クライアントから送られてきたクエリがそれに一致する場合のみ実行するやり方 ***クエリのコスト制限 [#ic73adca] -Query depth -Query complexity -Query rate limit ***Introspection query [#qd75962f] -本番ではOFF ***Field suggestion [#d536d04e] -本番ではOFF ***スタックトレース [#qcd4b019] -本番ではOFF **事例 [#d63afc96] -[[GraphQL採用サービスで任意カラムを取得できる脆弱性を見つけた話:https://zenn.dev/mipsparc/articles/a818970a19ade6]] -[[商品通報対応をgRPCとGraphQLとReactでリプレースしてみた:https://engineering.mercari.com/blog/entry/2019-12-14-110000/]] -[[複雑で変化の激しい介護業界に立ち向かうアーキテクチャ選定とその背景:https://tech.bm-sms.co.jp/entry/2023/03/23/140000]] **診断サービス [#u14b800a] -[[GraphQL APIを持つWebアプリケーションに対するセキュリティ診断:https://flatt.tech/assessment/graphql/]] *コマンドラインツール [#y0cae4c9] **curl [#eef806a9] curl -X POST -H "Content-Type: application/json" http://localhost:13020/graphql -d '{"query": "query { admins { id \n name \n } }"}'
