GraphQL

何を言っているかわからないと思うけど、例えば「1週間以内に新規登録したユーザー一覧を返す」みたいなフィールドをどう設計するかという話。いくつかパターンがありそう。 1. 専用のフィールドを用意する query { recentlyRegisteredUsers: [User!]! } クライアントからはこのフィールド呼べばいいだけなので楽。ただし、新たに「最近更新があったユーザー一覧を返したい」のような要望がでてきたら、似たようなフィールドが無尽蔵に増えていく可能性がある。 2. 全部返すフィールドを特定の条件でフィルタできるようにする query { users( filter: UserF…

firebase Auth の JWT (id token) を header に乗せて GraphQL のクエリを発行するメモ React-Query + GraphQL request で JWT token を使う方法 環境 graphql 16.6.0 graphql-request 6.0.0 @tanstack/react-query 4.29.3 import { useQuery } from 'react-query'; import { GraphQLClient } from 'graphql-request'; function MyComponent() { cons…

こんにちは。FLINTERSでGANMA!の開発をしている宗像です。 先日セプテーニグループのトライコーン社とFLINTERS社合同の勉強会をしました。テーマは「新卒入社社員によるプロダクト紹介LT会（最近導入・気になる技術を添えて）」ということで私からはGANMA!の紹介と最近導入したGraphQLのお話をしてきました。以下に発表時のスライドを貼りながら内容を簡単にまとめます。 GANMA!は、今年で10周年を迎える漫画アプリで、iOS、Android、Webブラウザ版の３プラットフォームで展開しています。動画広告を見ることで１日の制限なく漫画を読むことができます。また、GANMA!プレミア…

AWSのAppSyncを試しに使ってみたところAPIがGraphQLでした。使い方を知らなかったので調べたメモです。 そのまま抜粋したり、要約したり、いろいろです。。 目次 GraphQLとは GraphQLの特徴 メリット、デメリット クエリ言語（3種類） query mutation subscription スキーマ言語 リゾルバ GraphQLサーバー クエリ、スキーマ定義の記述方法(文法) フィールド(Fields) コメント 引数(Arguments) エイリアス(Aliases) フラグメント(Fragments) オペレーション名(Operation name) 変数 ディレク…

最近GraphQLのSubscriptionを試している。 GraphQLはクエリ言語で、そのスキーマをどう実装するかは自由なわけだけれど、Subscriptionのようなサーバからクライアントへの通知の実装は「WebSocketでしょ！ だからWebSocket使えないと厳しいよね」のような感覚を持っていた。しかし、いざ試してみるとそうでもないなという気になりつつある。 そんな気持ちをまとめた記事。 WebSocket使えるか分からん WebSocketは欲しい感 Laravelのライブラリの案内はSaaS クラウドネイティブ的なGraphQL Subscription構成 Lighthou…

はじめに 今回は、DVGAというやられアプリを使用して、GraphQL特有の攻撃をいくつか行ってみたいと思います。 準備 先ずは、Dockerのイメージを引っ張ってくる。 docker pull dolevf/dvga そして、イメージからコンテナを作成 docker run -t -p 5013:5013 -e WEB_HOST=0.0.0.0 dolevf/dvga これで、http://127.0.0.1:5013/ にアクセスすればDVGAは開く。以下のようなサイトです。 サイトの機能としては、Create Pasteで投稿が作れて、ここで投稿をPrivateかPublicか、どちらで…

1月から2月にかけてフロントエンド実装してたからブログ記事を書いてました。 サーバーサイドエンジニア向けのクライアント実装とGraphQLの話です。 moneyforward-dev.jp

こんにちは。4月にヘンリーに入社したSWE / アーキテクト / SETのsumirenです。 弊社ではレセコン一体型クラウド電子カルテの Henry を開発・提供しています。 今回、HenryのフロントエンドをReact + ViteからNext.jsに書き換えました。 この記事では、最初にNext.jsへの切り替えによってもたらされたユーザー体験の向上について説明します。次に、このユーザー体験の向上がどうして生じたのか、その背後にある技術的な要素をエンジニア向けに詳細に解説します。最後に、フロントエンドアーキテクチャに対する我々の長期的なビジョンについて述べます。 対象読者 Next.js…

結婚に伴う引越しや、結婚式の準備などに思っていたより時間が取られ、以前に比べて最近はインプットもアウトプットもかなり減っています。 アウトプットする感覚を少しでも取り戻す為に、Yelp の GraphQL Schema Design を読んだ感想をまとめます。 yelp.github.io 題の通り、Yelp の GraphQL Schema 設計方針がまとまっている記事です。 Yelp での Schema の在り方が説かれている点、方針の具体例がかなり明確で非常に理解しやすい内容でした。 Shopify のチュートリアルを読んだ時にも感じましたが、ビジネス的な目線でのモデル化に重きを置いてい…

バックナンバーを読んだのでメモを残しておく。 特集1 プログラミング言語のしくみ まず抽象構文木とインタプリタを実装し、次に構文解析器という流れ。ボトムアップから、動く状態のものを作りながらイテレーションをまわすのがエタりにくい。良いアプローチ。いきなり構文解析器からだと敷居高いだろうし。 DBもそうだったけど、作って学ぶシリーズで車輪の再発明を実際にやるのは、学習にピッタリ。 特集2 GraphQL 完全ガイド GraphQL はスキーマファーストとコードファーストどちらでも始められる。クライアントはスキーマファーストが向いてそう。スキーマからTypeScriptのコードを生成するのは、Op…

こんにちは、CTO の id:motemen です。はてなのエンジニア組織である技術グループでやっているポッドキャスト「Backyard Hatena」を更新しました。 「Backyard Hatena」は、株式会社はてなのメンバーの普段の様子や、サービス開発の裏側や技術、取り組みなどについて、CTO の id:motemen を中心としたメンバーがカジュアルにお届けするポッドキャストです。spotifyanchor-web.app.link Backyard Hatena • A podcast on Spotify for PodcastersAnchor / Spotify / Goog…

（本記事は2023/5/26時点の情報にアップデートしております） こんにちは、技術広報のyayawowoです。 突然ですが、株式会社ラクスと聞いて何を思い浮かべますでしょうか？ 弊社ラクスでは、様々なプロダクトを展開していますが正直認知度は低いと思っております。 そこで今回、弊社についてもっともっと知っていただくため・・・ ラクスが展開している全10プロダクト 全10プロダクトの技術スタック インフラ/SRE/デザイナーの技術スタック について、ご紹介させていただきます！ SaaS開発に携わる方、弊社に少しでも興味を持っている方の一助となれば幸いです！

こんにちは。株式会社ゼストでアプリケーションエンジニアをしている海老原です。 5月9日にZEST MEET（以下MEET）というプロダクトがリリースされました。今回はこのMEETの開発で行った技術的な取り組みについてお話ししようと思います。 開発ストーリーについては別途記事がありますので、そちらも是非ご覧ください。 techblog.zest.jp MEETの技術的な概要 MEETはいわゆるWebアプリケーションで、ブラウザを動作環境とするフロントエンドアプリケーションとサーバーサイドアプリケーションがHTTP経由で連携することで動作します。 弊社にはZESTというプロダクトが元々あり、これは…

これは何 今回モノレポ管理ツールを Nx から Turborepo へと移行したのですが、ポリレポからモノレポへの移行に関する記事はあっても管理ツールのリプレイスというのはあまり見当たらなかったため、その知見を共有したいと思います。 弊社サービスとフロントエンドの構成について マキヤマブラザーズ株式会社で副業エンジニアとして主にフロントエンドをお手伝いしている @uekenu です。 弊社マキヤマブラザーズ株式会社では動画素材サービスDeLMOの運営を行っています。DeLMOは動画をダウンロードする広告主様/代理店様と動画提供者のクリエイターに利用いただいており、そこに特権管理者である弊社のス…

最新Excel×ChatGPTで“あのイルカ”を再現することに成功した人がいるらしい ～「カイルくんGPT」を試してみた／感動の再会も束の間、「お前を消す方法」にはどう答えた？【やじうまの杜】 「自社向けChatGPT」をAzureで、Microsoft「Azure OpenAI Service」を試す【イニシャルB】 Red Hat、ローカルマシンにコンテナとKubernetes環境などを構築する「Podman Desktop 1.0」正式リリース 「X68000 Z」レビュー オリジナルとの比較や当時の資産を「X68000 Z」で活用するための方法も解説 [第32話]正反対な君と僕 - 阿…

こんにちは、みっきーです。 普段ソフトウェアエンジニアとして社内システムの開発に携わっています。 今回はAmplifyの使用感を自分向けにまとめます。 使ってみたきっかけ 私の所属する課ではBootCampという名で、技術習得を目的とした開発を行う研修を実施しています。その研修で開発工数を減らす方法を模索したいと思い、流行りのローコード開発を試すことにしました。ローコード開発ツールの中でAmplifyを選んだ理由は、普段開発で利用しているAWSのサービスだったためです。 Amplifyの簡単な説明 Web/Mobileアプリ開発のためのフレームワークです。 以下機能が提供されており、フロント/…

長野県松本市にて開催された今年のRubyKaigiに3日目だけ現地参加しました。 所属会社であるGMOペパボ株式会社に参加費用を出していただきました。 昨年はリモート参加して、プレゼンを拝聴していましたが、相変わらず内容に追いつくので精一杯という感じでした。 ただ、現地参加して得られたものはたくさんありました。 まず、企業ブースにて有名企業のCTOとカジュアル面談できたり、技術的な話をできる機会がありました。 RubyKaigi終了後には、たまたま出会った海外エンジニアの方としゃぶしゃぶを囲み、テクノロジー談義に花を咲かせました。 来年はなんと沖縄で開催されるらしいです。 たった1日ですごく濃…