GraphQL

ここ数ヶ月の間GraphQLのサーバサイドの開発をする機会があったのだが、その中で一番難しかったのがスキーマ定義をすることだった。 DBのカラムと1対1になるようなフィールドであれば簡単だが、実際にはそうではないフィールドが必要になり、その定義をどうやって決めれば良いかの判断が難しかったからである。 そこで、初めてのGraphQLを読むことにした。 この本は大まかに言うと以下のような構成になっている。 1,2章: GraphQLの導入 3,4章: 仕様や型定義の説明 5,6章: サーバーサイド/クライアントサイド実装のハンズオン 7章: セキュリティや発展的な使い方 付録: Relayの仕様解…

はじめに こんにちは！ テクノロジー戦略本部 開発二部の金子です。 自分が担当するプロジェクトでは、Apollo Client を利用した GraphQL の実装を行なっています。 APIの繋ぎ込みを行う際、多重サブミットの防止をBEのみならずFEでも保険的に行いたいということがありました。 そこで、間引き処理を一律で行う Apollo Link を作成したので紹介します。 はじめに 対象読者 従来手法 従来手法の課題 1. キーをリクエスト毎に設定しなければならない 2. キーを適切に発行しなければならない 3. 遅延が一律でかかってしまう 提案手法 実装の説明 使用方法の説明 比較 まとめ…

こんにちは。とろろかけ牛丼が食べたい亀山です。 先日弊社 Web サイトを Wordpress から Wordpress をバックエンドとして用いた Next.js への移行を行いました。移行の際に導入した GraphQL と React をつかったワークフローが未体験で面白かったので、社内へ展開するためハンズオン形式でプチ勉強会を行いました。本記事ではその時に使った資料を記事として共有致します。

タダです. k6 で負荷試験を行うことがあり,GrapQL でのファイルアップロードを確認する必要がありました.この記事ではファイルアップロードで k6 で実施する時に使ったツールやドキュメントをまとめていきます. k6 での GrapQL リクエストを行う方法 公式のサンプルコードがありますが,リクエストのクエリやヘッダー情報を付与して GraphQL のリクエストを実行できます.ただ,今回初めて様々な GrapQL リクエストを見て感じたのは簡単にクエリを組み立てたりすることは難しいと感じました. import http from "k6/http"; import { sleep } f…

結論 AWS Appsyncのスキーマで該当する型(ModelIntInput)を手動でアップデートし、contains: Intを追加する。 はじめに AWS AmplifyではデータベースとしてGraphQLを利用することができ、ユーザはGraphQLスキーマを定義するだけでAppSyncやDynamoDBの設定をすることなく利用することができます。 しかし、クエリのfilterで、[Int]型のフィールドに対して、本来利用ができるはずのcontainsオペレータが利用ができず苦しんだので備忘録を残しておきます。 Version "aws-amplify": "^5.3.3" Exampl…

この記事では、SpaceX REST APIを使ったサンプルコードを動かしながら、GraphQLの概要について紹介していければと思います。 最近、AzureのAPI BuilderがGraphQLに対応する（記事投稿時点ではパブリックプレビュー）など、GraphQLの実装コストが下がってきていると感じています。 2023年03月 パブリック プレビュー:データ API ビルダーを使用すると、最新のデータベース用の最新の REST エンドポイントと GraphQL エンドポイントを即座に作成できます 2023年04月 一般提供:Synthetic GraphQL 今後、GraphQLでの開発が一…

今参加しているプロジェクトでは React (TypeScript) をフロントエンドに Hasura を GraphQL サーバーにした構成になっています。 Hasura を GraphQL サーバーにして code generator で TypeScript の型生成を行ったメモをまとめたエントリーです 経緯のメモ 構成 GraphQL サーバー Hasura Frontend React 18.2.0 typescript 5.0.4 Vite 4.3.9 @tanstack/react-query 4.29.3 graphql-request 6.0.0 graphql 16.6.0…

こんにちは。アプリケーションサービス部の渡辺です。API が大好きで API を使わない日はありません。 ということで AWS AppSync Core Workshop をやってみたいと思います。 AWS AppSync Core Workshop とは Introduction to AWS AppSync Getting Started Hands-on with AppSync Testing and Debugging Integrate your API Monitoring and Observability Clean Up Resources AWS AppSync Core…

「AWS Amplify studioではじめるフロントエンド＋バックエンド統合開発」を読む。 AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発 作者:掌田 津耶乃 ラトルズ Amazon AWS Amplifyでフロントエンドのビルド・デプロイをしている担当サービスが複数あるのでもう少し深掘りしてみようかなと思って読んでみた。 どちらかというと、「フロントエンドメインで開発している人が、Amplifyを使ってReactでシンプルに、認証やDB、ファイル操作も含めてバックエンドも開発してみよう！』という内容。実際に商用のサービスだと本書で紹介されているようなA…

「AWS Amplify studioではじめるフロントエンド＋バックエンド統合開発」を読む。 AWS Amplify Studioではじめるフロントエンド+バックエンド統合開発 作者:掌田 津耶乃 ラトルズ Amazon AWS Amplifyでフロントエンドのビルド・デプロイをしている担当サービスが複数あるのでもう少し深掘りしてみようかなと思って読んでみた。 どちらかというと、「フロントエンドメインで開発している人が、Amplifyを使ってReactでシンプルに、認証やDB、ファイル操作も含めてバックエンドも開発してみよう！』という内容。実際に商用のサービスだと本書で紹介されているようなA…

完了しました！ 1ヶ月くらいちまちま夜30分くらいやっていきました〜 学んだこと（大事なところの翻訳）はNotionにペタペタ貼っていった。 nextjs.org 感想 めちゃくちゃいいチュートリアルだった！ いい点は以下のとおり。 ・英語なんだけど翻訳かけたら全然理解できる ・1ページあたりの分量が短くて挫折しにくい ・Vercelの便利さもよくわかった。（こんなに簡単にPR環境できるのは感動） ・SEOとかCore Web Vitalsとか実際にSPAでWebサイトの開発する上で避けては通れない知識を学べる SSG、SSRとかいつまでたっても理解できずようやく最近わかってきた感じがするけど…

Day1 はこちらにまとめています chigichan24.hatenablog.com 11:00~ Kotlinハイパフォーマンスプログラミング speakerdeck.com Kotlin(JVM)は遅いみたいなのは、ART時代の産物ぽいよねと確かに改めて思いました。 キャッシュヒットまで考えたカリカリチューニングはしたことがないので、勉強になりました。 syntax sugar がインスタンスを使い捨てているのはなるほどになりました。 11:00~ ビジネス向けアプリを開発するときに知っておくべきAndroid Enterpriseの世界 speakerdeck.com Android…

2023 年新卒のエンジニアで技術研修後に取り組んだ、Slack のデータ活用をテーマとするハッカソンについてご紹介します。 約１ヶ月半あった技術研修では個人で知識や経験を身につけるものが多かったのに対して、今回紹介するハッカソンでは２週間、チームで取り組んだものとなります。

事象 以下のように、schema.graphql が見つからない旨のエラーが出ることがある。 $ go run github.com/99designs/gqlgen generate unable to open schema: open schema.graphql: no such file or directory exit status 1 例えば、graphql スキーマは src/resources/graphql の中に入れたいんじゃ！と設定を変えていると見ることになると思われ。 解決方法 gqlgem.yml のスキーマファイルのパスは、go run ~ generate コ…

1. gqlgen.yml で設定を有効化する gqlgen.yml の autobind 設定のコメントを解除し、有効化する。 # gqlgen will search for any type names in the schema in these go packages # if they match it will use them, otherwise it will generate them. autobind: - "github.com/[username]/gqlgen-todos/graph/model" この設定があることで、スキーマに定義されている型で、github…

この記事は ロールをプレイ！というサイトを作ったので技術面のほうを書いておく x.com 技術要素 https://github.com/h-orito/chat-role-play-graphql backend Go DB: MySQL ORM: Gorm frontend Next.js CSS Framework: Tailwind CSS デプロイ Oracle Cloud Infrastructure（Arm A1無料枠 Oracle Cloudでつよつよスペックの無料枠を獲得してkubernetesクラスタを構築したメモ - ortの灰ログ） Kubernetes（kubeadm…

宮崎からお送りします。yoshinoです。 私が参加するプロジェクトでは、フロントエンドにNext.jsを採用していて、バックエンドサーバへのリクエストの際には、ApolloクライアントとGraphQLを利用しています。 先日、同じページから、同一のクエリを複数回リクエストする問題が発生していて、修正する機会がありましたので、その時のことを書こうと思います。 問題 QUERY_Aです。 const QUERY_A = graphql(` query query_a { user { profile { name email } address { id prefecture } } } `) …

こんにちは！SmartHRで組織図機能の開発を担当している、エンジニアのmuranoです。 組織図機能の開発チームでは、最近の取り組みとしてハックデイを取り入れてみました。今回はそのハックデイの取り組みについて紹介します🐶 ハックデイ is なに？ ハックデイは、ユニコーン企業のひみつ ―Spotifyで学んだソフトウェアづくりと働き方の中で登場したハックウィークという概念を、SmartHR向けにアレンジした言葉です。こちらの書籍の中でも元ネタとして参照されている、Googleの20％ルールに近いイメージの将来への投資的活動になります。（Googleが今も実践する｢20%ルール｣で、未来の自分…

gatsby starter blogはcontent、blogにあるマークダウンファイルから記事が作られている。それをJSONに置き換えて記事ができるかと試してみた。 JSONにタイトルや日付、説明などの情報を書き込んでからgatsbyに渡してブログ形式でサイトを生成させよう。gatsby starter blogのいいところはRSSフィードや、検索エンジンの最適化だったり、PWAの作成、サイトの軽量化などを簡単にできるので、gatsby starter blogに合う形に情報を渡す。 初めは、Alljsonにslugを追加すればいいのかなと思ったが、データを読み込んでみるとすべてのファイル…