Apollo Client/GraphQLで意図しないキャッシュが効いてしまう問題の解決策 - エス・エム・エス エンジニア テックブログ
はじめに カイポケリニューアルのフロントエンドエンジニアの原野です。2023年10月より入社し、前職ではiOS/Webのエンジニアをしていました。 カイポケリニューアルプロジェクトでは、データ取得にGraphQLを採用しており、クライアントのライブラリとしてApollo Clientを使用しています。 GraphQLは、データの要求と取得をより効率的に行うことができる技術です。しかし、その機能を直接fetchメソッドで扱う場合、複雑な状態管理やキャッシュ戦略を自前で実装する必要があります。 ここでApollo Clientの出番です。 Apollo Clientは、これらの課題を解決するための強力なライブラリであり、開発者がデータの取得、管理、キャッシュの最適化を容易に行えるよう支援します。 今回、開発の中でApollo Clientのキャッシュの仕組みを理解するタイミングがあったため、そ
既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 | Amazon Web Services
Amazon Web Services ブログ 既存の MySQL と PostgreSQL データベース用の GraphQL API の作成 AWS Cloud Development Kit (CDK) を使って既存のリレーショナルデータベース上にスケーラブルでセキュアな GraphQL インタフェースを簡単に構築できる機能を発表しました。AWS Systems Manager Parameter Store に SecureString として安全に保存されたデータベースの認証情報と共に AWS Amplify GraphQL API CDK コンストラクトを提供し、SQL ステートメントを実行する GraphQL API の構築を開始します。この新機能は、Amazon Relational Database Service (Amazon RDS) 上の MySQL および Pos
「NestJS x Prisma on Fargate構成で作るWeb API開発Tips」というタイトルでDevelopersIO 2023に登壇しました #DevIO2023 | DevelopersIO
概要 NestJSとPrismaを使って、3ヶ月くらい集中的にWeb API(GraphQL)を構築した際の知見を発表しました。 資料 補足 サンプルコード prismaとKysely構成 prismaはクライアント側の制限が多く、queryRawが増えるなら、SQLに成熟しているメンバーが多いだろうし、マイグレーション周りはprismaでクライアントライブラリはKyselyという選択肢もあります。 まとめ 最後に Ask the speakerで様々なエンジニアの方と課題について議論することができました。オフラインならではで、非常に楽しかったです。 3年振りのオンラインイベントということで、多くのメンバーが開催に向け準備をしていました。私も少しスタッフをしましたが、本当によく計算されていて、多くの支えがあって発表が出来たことを痛感しております。本当にありがとうございます。
開発者フレンドリーは“ハッカーにとってもフレンドリー” 「GraphQL」の機能を使った悪用事例と究極の対策
「攻撃者の視点から見たGraphQLのセキュリティ」というタイトルで登壇したのは、kuzushiki氏。「おもしろかった脆弱性」について解説し合い、脆弱性に関する知識を深めるためのイベント「Security․Tokyo #2」で、「GraphQL」の機能による悪用と、対策について発表しました。 登壇者の自己紹介 kuzushiki氏：それでは、発表を始めていきたいと思います。 まず簡単に自己紹介をさせてください。私は、kuzushikiと申します。現在、とあるセキュリティベンダーで診断員をやっていて、主にWebアプリケーションの脆弱性診断をしています。最近、バグバウンティに興味を持って、そういうものをちょっとやってみています。 “開発者フレンドリー”という特徴を持つ「GraphQL」 今回は「GraphQL」について話しますが、その前に、もうGraphQLを知っているよという方は、どのぐら
GraphQLサーバのHasuraを使ってみた
背景 最近PoCをなるべく早く作る方法を考えています。 極端な話、リリース時には作り直したとしても、素早くPoCできた方が良いのではないかと思っています。 PoCでざくざく作る時にどうしてもAPIを用意するのが手間に感じてしまいます。 そんな時にHasuraを教えてもらいました。 ロゴアイコンがかわいい。 ※GraphQL自体触るのが初めてなので、他のGraphQL環境と比べてどうかは分からないです。 Hasuraとは ざっくり言うと、Postgresをデータベースとして、GraphQLサーバを簡単に建てられるものです。 ほんとに数分で環境作れてしまって驚きました。 PoC開発で辛いことの一つにAPI開発があります。 システムの作り方として、ちゃんと境界を分離して作ることはメンテナビリティを高める方法としてとても有用です。ただし、PoCの様に素早く作りたい時には、CRUDのAPIを量産する
GraphQL を RESTful API と比較しながら実装して理解する - JX通信社エンジニアブログ
この記事は GraphQL Advent Calendar 2018、JX通信社 Advent Calendar 2018の19日目です。 NewsDigest で API のバックエンドとして GraphQL を本番利用して1年ぐらい経ちました。GraphQL 自体は、「クエリ言語」という位置づけですが、実際には「API のスキーマ」という使われ方(a.k.a. Anti-REST な何か)が多いと思います。 実際、NewsDigest の API としては、もともと RESTful なものを運用してたのですが、GraphQL へ移行しました。つまり、 RESTful の代わりとしての利用 プライベートな API アプリから使う API サーバーサイドエンジニアがメンテするもの(BFFな文脈で、フロント側のエンジニアがメンテするケースも多いと思いますが) といった使い方です。GitHub
Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)
エンジニアリングオフィス(以下EO)の島村です。 先日、アカツキゲームスに所属しているエンジニアを対象にディナー（交流会）を開催したのでレポートをさせていただきます。 開催のきっかけ もともと、エンジニア組織としては隔週火曜日17~18時に「エンジニア定例MTG」という完全オンラインの全体ミーティングを開催しています。 そこではエンジニア全体への連絡( イベントの告知など）はもちろんですが、外部カンファレンス参加のレポートや、有志により技術共有発表があったりと、エンジニア主導で様々な情報が交換されています。 そこにEOのメンバーより、最近は出社して作業している人も増えてきており、せっかくの集まる機会だからエンジニア定例のあとの時間に横の繋がりを作るエンジニアディナーを開催しようという提案があり、実施することになりました。*1 *1:元々、エンジニアディナーという企画自体は以前より不定期で開
GraphQLを徹底解説する記事
はじめに 今回の記事では、学習や実務でGraphQLを活用する人を対象に、GraphQLの全体像を把握するためのチュートリアル記事になる。本記事の対象読者は以下の通りである。 GraphQLの全体像を把握したい人 公式ドキュメントの理解で苦しんでいる人 GraphQLとは GraphQLはWeb APIを開発するためのクエリ言語である。REST APIの問題を解決するために、Facebook(Meta)によって開発された。Web APIの開発において、REST APIと比較して柔軟かつ効率的なアプローチを提供できる。さらに、GraphQLではクライアントが必要なデータの構造を定義することができ、サーバから定義したものと同じ構造のデータが返される。 詳細は後述するが、GraphQL最大の特徴は必要以上に大きなデータが返されることを防ぐことにある。これによって、GraphQLは必要最低限のリク
セッションレポート「Backends for Frontendsこそサーバーレスで楽をしよう!!～本来の目的に集中するために～」を見てBFFについて学習したことまとめ｜TSD公式エンジニアブログ「TSD CoLab」
2021年10月27日（水）にAWS Innovate – Modern Applications Editionが開催されました。AWS Innovate - Modern Applications Editionは、クラウドネイティブアプリケーション開発関連の話題に特化した無料のオンラインイベントです。 AWSエキスパートによるセッションを通して、低コスト・よりスケーラブルで柔軟性の高いソリューション構築のための手法や、マイクロサービス、サーバーレスといった技術の導入方法など、最新の技術トピックを学習できます。 本記事ではAWS Innovate - Modern Applications Editionのセッションの中から、「Backends for Frontendsこそサーバーレスで楽をしよう!!～本来の目的に集中するために～」というセッションについてレポートしたいと思います。
大規模SaaS 「カイポケ」の未来を支えるフロントエンドの技術選定 - エス・エム・エス エンジニア テックブログ
こんにちは、エス・エム・エスのフロントエンドエンジニアの城内です。 前職では、ヘルスケア系のスタートアップでソフトウェアエンジニアをしていましたが、2022年8月にエス・エム・エスへ入社し、介護事業者向けの経営支援サービス「カイポケ」の改善をするチームに所属しています。 カイポケの改善を進める開発チームでは、この度フロントエンド専任チームを立ち上げました。この記事ではフロントエンドチーム立ち上げの背景や、チームの立ち上げから進めてきた技術選定について書きたいと思います。 カイポケ改善プロジェクト 介護事業者向けの経営支援サービス「カイポケ」は、4万を超える事業所で導入されている SaaS 型のサービスです。介護事業には様々なサービスの種類（ex. 居宅介護支援、通所介護支援、訪問介護支援、etc…）があり、カイポケはそれぞれのサービス種類に対応した約40のサービス・機能を提供しています。カ
フルスタックのチャットアプリケーションをAWSとNext.jsで構築する | Amazon Web Services
Amazon Web Services ブログ フルスタックのチャットアプリケーションをAWSとNext.jsで構築する モダンなチャットアプリはリッチな機能を必要とします。これらの機能はファイルストレージ・リアルタイムの更新、そしてクライアントとサーバーの両方からデータを取得する能力が必要です。 従来、これは多くのサードパーティサービスをつなぎ合わせるか、カスタムソリューションの作成に開発時間を費やすことを意味していました。そして、この方法では市場投入までの時間が遅くなり、複数の障害点が発生します。 チャットアプリに必要な機能と、AWS が従来の問題点をどのように解決しているかを紹介するために、我々はリアルタイムチャットアプリケーションのサンプルを更新しました。このバージョンは、ローカルと AWS の両方でアプリケーションを完全に管理・制御することがいかに簡単かを強調するために再設計され
Hatena Engineer Seminar #21「GraphQL 活用編」をオンラインで開催しました #hatenatech - Hatena Developer Blog
2022年9月7日（水）に、 Hatena Engineer Seminar #21 をオンライン開催しました。ご参加いただいたみなさま、ありがとうございました。 このエントリーでは、当日のアーカイブ動画や公開資料をご紹介します。 Hatena Engineer Seminar #21 について 発表概要と資料 GraphQLを使い続けて気づいたこと 〜マンガノでの活用事例から〜 - by id:miki_bene Perl でも GraphQL が使いたい - by id:nakaoka3 マルチテナントで GraphQL を使う際の工夫 - by id:mizdra GraphQLでフロントエンドとバックエンドを分離する - by id:magaming はてなが作るマンガアプリのGraphQL導入から活用 ～ コミックDAYSからGigaViewer for Appsへ～ - by
Next.jsのAPI RoutesにGraphQLサーバ設定+Vercelにデプロイまでの流れ | アールエフェクト
ReactのフレームワークNext.jsのAPI Routesを利用してGraphQLサーバを構築してVercelにデプロイするまでの流れを説明しています。 GraphQLサーバにはApollo Server、 データベースの接続にはPrisma、データベースにはSupabaseのPostgreSQLを利用しています。複雑な設定やアプリケーションの構築は行なっていないのでデプロイ後のブラウザ上に表示されるのはSupabaseのPostgreSQLに保存されたデータをPrisma経由で取得してNext.jsのフロントエンドのApollo ClientからApollo Serverのエンドポイント(/api/graphql)にアクセスを行って取得したデータです。 ブラウザ上に表示 利用した技術/サービスについては本ブログでも記事を公開しているので参考にしてみてください。
脱Firestoreするために考えていること（追記あり） - Sweet Escape
FirebaseのFirestoreをやめることにしたので雑なメモを残しておく。なお、まだ走り始めたばかりなので、内容には間違いや考慮不足も多数含まれる可能性があるので読む人はその点注意を。あと、あくまでも雑なメモなので細かいところは書いていない。 なぜ脱Firestoreするのか？ なぜGraphQLではなくREST APIなのか？ 移行にあたって検討したこと、決め事 ドキュメントIDをどう扱うか サブコレクションをどう扱うか 配列やマップといったフィールドのタイプをどう扱うか 追記: Mapの配列をどうするか Firebase Authenticationとセキュリティルールで実現しているセキュリティ機能をどうするか では実際にどんなテーブル設計にするのか 次にやること なぜ脱Firestoreするのか？ まず、脱Firestoreする理由は ユースケースとしてFirestoreでは対
モダンウェブフロントエンド勉強会を開催しました - クックパッド開発者ブログ
こんにちは、クックパッドで最近はモバイルアプリを離れもっぱらウェブアプリを作っている @morishin です。 先日、社内で「モダンウェブフロントエンド勉強会」と題して React, Next.js, Core Web Vitals, SSR, CSR, SSG, ISR, SSR Streaming, React Server Component といったキーワードに触れつつ、昨今のウェブ開発事情について話をしました。せっかくなのでその内容の共有と、勉強会を開催した動機などを紹介したいと思います。 この話は fukabori.fm でも取り上げていただいてお話ししたので、よければそちらもご視聴ください。 fukabori.fm 背景・動機 クックパッドのウェブアプリケーションは10年以上もの間 Ruby on Rails で開発されてきましたが、2020年から一部のページは Next.
Next.js、NestJS で新規Webアプリケーション開発をしている話
これは、FORCIA Advent Calendar 2021の19日目の記事です。 はじめに 第1旅行プラットフォーム部長の武田です。これまで検索アプリケーションの開発をメインに担当していましたが、最近は検索で利用する商品データを作成するサービスの開発をしています。 慣れ親しんだ検索アプリケーションとは異なりますが、そのノウハウを活かしつつ、新しいことに取り組んでいます。今回はそのサービス開発で利用している技術についてご紹介いたします。 フロントエンド Next.js フォルシアではアプリケーション開発で社内製のWebアプリケーションフレームワークを利用しています。現在は3代目までのWebアプリケーションフレームワークが存在します。3代目のフレームワークは内部でNext.jsを利用しています。そのためNext.jsを採用するのは自然な流れでした。 この社内製Webアプリケーションフレーム
出来る100%TypeScript 作って学ぶNext.js + GraphQL + Prisma(上) - GCP編
クライアントサイドでは広く普及したTypeScriptですが、その一方サーバーサイドでは比較すると緩やかな採用拡大に留まっています。もしも両方を一貫してTypeScriptでの開発が出来たら？ 本書ではTypeScriptの強みである静的型の力を最大限活かした構成でのアプリケーション開発について、SNS開発を題材に学べる実践的なチュートリアルです。
GraphQLが解決する問題とその先のユースケース
サーバーサイドからみたGraphQL Serverlss Meetup#19 2021/03/31 に行われた Serverlss Meetup#19 で上記のタイトルで登壇してきました。サーバーサイドの話をしようと思ったけどGraphQLの解決している話をしようと思ったらクライアントの事もかなりはいってしまったので記事のタイトルは変えました。 以下内容です。記事の最後に資料を書くにあたって参考になった資料のリンクを置いてます。 GraphQL and me この1年書いたQiita記事 GraphQLの特徴を分解する ~API インターフェース・Universal BFF・API Gateway~ GraphQLはサーバーサイド実装のベストプラクティスとなるか GraphQLの全体像とWebApp開発のこれから 今回話す事 そもそもGraphQLはなんで作られたのか、何を解決しようとして
GraphQL入門 - 使いたくなるGraphQL - Qiita
本記事は Livesense Advent Calendar 2016 - Qiita の24日目の記事になります。 公開から1年ほどたち、当初はRESTの次の潮流か！？みたいな感じになったものの、イマイチ盛り上がってる気配のないGraphQL。 ただ、気になっていた技術だったので、気にせず2016年が終わる前にざっと調べてみました。 ここ2日ほどでざっと調べたもののまとめなので、理解や解釈に誤りや言ってる意味がわからないところがあればご指摘いただければ幸いです。 TL;DR 内容をコンパクトにしきれず（Queryにばかり集中して、Mutationについては全然触れてないのに！）かなり長くなってしまいました。実際は、 GraphQL | A query language for your API のTOPページを読んで雰囲気を掴み、 The GitHub GraphQL API | Git
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fullstack GraphQL Tutorial Series | Learn GraphQL & Hasura
