Apollo Clientのキャッシュの仕組みとローカルの状態管理について
はじめに 現在携わっているプロジェクトの技術選定で GraphQL を使うことになり、 GraphQL クライアントとして Apollo Client を採用することになりました。 最初は GraphQL をクライアントサイドで便利に使えるようにしてくれるものくらいの認識で、クライアント側の状態管理には別途 Redux とか入れるのかなと思っていたのですが、調査の過程でたまたま Apollo Client は Redux を置き換えるとの記事を見かけたので Apollo Client のキャッシュの仕組みと状態管理について少し調べてみました。 この記事では下記のことについて解説します。 Apollo Client とは Apollo Client のキャッシュの仕組み Reactive variables を利用したローカルの状態管理について かなり内容がもりもりになってしまったのですが、
Apollo Clientで画面を跨いだデータを持ち回るやり方（Next.js / React）
Apollo Clientで画面を跨いだデータを持ち回るやり方（Next.js / React） 画面を跨いだデータを持ち回るやり方がいろいろがある中で、今回はApolloの機能を利用し、Reduxなどを使わずに同様のことを実現しようとしたときのやり方を書いておく。 環境 React v17 Next.js v10 Apollo Client v3 やり方 まず、makeVar関数を使って、キャッシュ用の箱を準備しておく // /lib/cache.ts export const catCache: Partial<Record< 'uuid' | 'name' | 'abbreviation' | 'country', string, >>[] = makeVar([]); // /pages/index.tsx const Index = () => { const cats = us
Reactive variables【Apollo Client】による local state 管理 - stmn tech blog
はじめに はじめまして、株式会社スタメンのミツモトです。 普段は、REST API をベースに React + Redux で開発しています。 最近になり開発者体験の向上、プロジェクトのスピードアップという観点から、社内でスキーマファーストな開発に関心が集まっています。そういった背景もあり弊社でも GraphQL の勉強会を始めました。今後のプロジェクトにおいて GraphQL を導入する可能性があるため皆で学んでいます。 React ✕ GraphQL という技術を採用する場合、client 側の状態管理ライブラリとして Apollo Client が挙げられます。 API のレスポンスを正規化かつキャッシュしてくれる Apollo Client の inMemoryCache の恩恵は大きく、開発者だけでなくユーザーにおいても画面の表示速度向上などのメリットがあります。 Apollo
Mutation 後のキャッシュ更新処理についての設計指針(GraphQL, Apollo) - tomoima525's blog
前回は、Apollo GraphQL における Mutation(トランザクション処理)の前提知識としてキャッシュ機構について説明しました。(記事はこちら) 今回は React Apollo(v2) における Mutation 後のキャッシュ更新処理について整理しつつ、どのパターンをどのユースケースで採用すべきかについてまとめてみました。 Mutation 後のキャッシュ更新処理 Mutation の返り値を使う(Optimistic UI/update) Refetch Subscription どう使いわけるか Mutation 後のキャッシュ更新処理 Mutation後のキャッシュ更新処理は大きく分けて3種類あります。それぞれ順番に紹介していきます。 Mutation の返り値を使う(Optimistic UI/update) まず、一番ベーシックな方法として、Mutation の返
Apolloをストアとして活用する Next.jsのwith-apollo exampleをベースに解説 - もふもふ技術部
2020終わり頃のApollo Client 3から、 reactive variables なるものが追加されたようです。リアクティブな変数を持たせることができるようになったということです。 New in Apollo Client 3, reactive variables are a useful mechanism for storing local state outside of the Apollo Client cache. Because they're separate from the cache, reactive variables can store data of any type and structure, and you can interact with them anywhere in your application without using G
AirbnbにおけるGraphQLマイグレーション
原文(投稿日：2019/12/03)へのリンク Airbnbは、APIの大半をGraphQLに移行して、ページロード時間の短縮とより直感的なユーザエクスペリエンスを実現することに成功した。GraphQL Summitで行われたプレゼンテーションでは、Brie Bunge氏が、同社の多くのチームで使用されたマルチステージのマイグレーションプロセスについて説明した。 各ステージを成功させることによってAirbnbでは、100パーセント型安全でオーバーフェッチングのないApolloおよびGraphQLアプリを完成すると同時に、マイグレーション作業の各過程を通じてサイトの稼働と運用を維持することにも成功した。ApolloとGraphQLの適用によって、従来のRESTベースのアーキテクチャでは到底実現できなかったような、新たなパフォーマンス改善を実現するための基礎を作り上げたのだ。 マイグレーション
2020年以降のフロントエンド開発は、Apolloをステート管理に使う(by react)
実際どうなのかという話。正直、今更感ですが、それでもあまりまだそうでもなかったりしてるので。 ※前提として、Apolloを使っているということは、要はGraphQLをバックエンドに持っているという意味である。 Apolloでステート管理は、思ったより現実的な使い方があると思っていて ステート管理は今までならReduxが2015年ぐらいから普通に使われてきたが、それから取って代わるものがあまりなくて、もちろんあるにはあるのだが、結局Reduxが選択されてきたと思う。 で、今年の春ごろにやっとフックがリリースされて、そのおかげで小規模なものにはReduxを入れなくてもそれなりなコードで仕上げることができるようになった。 カスタムフックなどをうまく使えば、それこそReduxなしでちゃんとステート管理できる。 もちろん、使い方を間違えれば、スパゲティコードみたいなものができてしまうが。 それでは、
graphql-ruby + apollo2 + ActionCableでsubscription - Qiita
Railsでgraphqlサーバーを含めて完結させるのに手こずったので。 Railsを使って、Reactアプリを表示しつつ、ApolloでGraphqlに繋いで、さらにSubscriptionをも使いたい場合に参考にしてみてください。 サンプルrepo 躓いた点 ActionCableでインスタンス違い（rails s -d / rails c）からのbroadcastはadapter: asyncではだめ development: - adapter: async + adapter: redis + url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/0" } %> + channel_prefix: compass_development
はじめての単独Tech Meetupを開催しました | スペースマーケットブログ
こんにちは、バックエンドエンジニアの奈良です。 好きなコーヒーはイルガチェフェです。 先週12/6(木)に、はじめての自社オンリーのTech Meetupを開催しました。 当日は10名程の方々が参加していただきました！参加していただいた皆様、ありがとうございました。 今まで年一回の頻度で他の会社さんと一緒に勉強会を開催させてもらっていたのですが、 もっと気軽に参加してもらえて、弊社のことを知ってもらえる会を実施したいと思い、Tech Meetupを開催しました。 その様子をレポートさせてもらいたいと思います。 発表内容 技術的な話題になる前に、CTOの鈴木に会社のことや技術部のことについて紹介してもらいました。 スペースマーケットの名前は知ってもらっていましたが、使ったことのある人はほとんどいなかったので、 サービスの説明もちゃんとしてもらってよかったです。 早く、みんな一回は使ったことあ
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 | スペースマーケットブログ
GraphQLとマイクロサービスは相性が良さそうな件 〜Apollo Federationを用いたスキーママージについて〜 こんにちは バックエンドエンジニアの西尾です。 スペースマーケットではバックエンド側は長らく単一のアプリケーションで構成されていましたが、去年くらいからマイクロサービスアーキテクチャーへの移行を進め始めました。 すでに本体(Main)と検索機能(Search)(※1)は分離されていますが、現在は本体から予約部分を切り出すことを行なっています。 （※１： 元の本体のバックエンドAPIのことをMainまたはv2, Mainから部屋の検索などを担う部分だけを切り出したサービスをSearchと記載しています。) 切り出すにあたり、考えなければならないことはたくさんあるのですが、今回はその中で 複数サービスに分離されているデータを合成し、クライアントに単一システムだった時と同じ
AppSyncのGraphQL APIを@apollo/clientで呼び出す - Qiita
はじめに AWS AppSyncのJavaScriptクライアントといえば、AWS AppSync JavaScript SDK です。AppSyncがサポートする認証などに対応していて Apollo Client ベースなので Apollo Client を使ったことがある人であればすんなり使い始められると思います。だた、ベースのバージョンがv2.4.6とちょっと古いため、最新の graphql-code-generator などのツールが生成するコードとバージョンが合わないので一緒に使えません。 この記事では、AppSyncの認証は使いたいけど、Apollo Clientも最新バージョンを使いたいという場合の対応方法を紹介します。 @apollo/clientにAppSync用のApolloLinkを組み込む1 Apollo ClientにはApolloLinkというミドルウェアのよう
Graphcool、React、Apolloを使って、GraphQLのSubscriptionsを実装する - Qiita
Graphcool、React、Apolloを使って、GraphQLのSubscriptionsを実装するReactGraphQLapolloGraphcool はじめに Graphcool、React、Apolloを使って、GraphQLのQueryとMutationを実装するの続編です。 前回では、GraphQLのQueryとMutationの実装を行い、記事の投稿と一覧表示ができるようになりました。 但し、前回までの実装では、投稿後にその投稿した記事を同じ画面で続けて表示したい場合は、ブラウザを手動でリロードさせなければならず、使い勝手の良いUXにはなっていませんでした。 そこで今回は、GraphQLのSubscriptionsという機能を用いてリアルタイムに記事が反映されるよう、前回作ったアプリを改修したいと思います。 縦横比が合っておらず、解像度も低い状態で恐縮ですが…、動画で実
Django + GraphQL + Vue.js + TypeScriptでアプリを作った時の知見まとめ - Qiita
自作ツールを作成した際に色々調べた知見を書きまとめておきます。 細かい解説というよりも、公式文書や参考記事などの紹介が多めです。 作成したもの HotTip https://github.com/namutaka/hottip 技術要素 サーバーサイド Django v2.2 https://docs.djangoproject.com/ Graphql https://graphql.org/learn/ Graphene https://docs.graphene-python.org/ PythonのGraphQLサーバー実装用ライブラリ Advanced Python Scheduler https://apscheduler.readthedocs.io/ Pythonでの定期処理実行ライブラリ フロントエンド TypeScript https://www.typescriptl
Microservices の GraphQL スキーマを１つにまとめる - エムスリーテックブログ
エンジニアリンググループの冨岡 (@jooohn) です。出張でNYにきています。NYへの出張は二度目なのですが、同僚のChris (彼はUK, JP, USと三カ国のM3を渡り歩いています！) とWashington, D.C.にいくなどして休日も満喫しています。 バーガーは野菜 Washington, D.C. にて。NYCからバスで4hほどでいける。 現在はM3 USAが運営するニュースサイトMDLinxのリニューアルプロジェクトに関わっています。そこで利用しているGraphQL (Apollo) の活用事例を紹介します。 新しいMDLinx の構成 新しいMDLinxでは上図のように、k8sクラスタ内にいくつかのサービスが存在するマイクロサービス構成になっています。各サービスではGraphQLを共通のインターフェースとして利用しており、webhook用のエンドポイントなどの特殊な場
AWS Amplifyの問い合わせにtypescript + useQuery<T>で楽したい - Qiita
モチベーション amplifyの普通の問い合わせでは、全て型の世界に閉じ込めようとすると書き方がだいぶ冗長になる。 apollo-clientのuseQueryを使えば簡潔に書ける上に、ジェネリクスによって型のサポートもあるし、loadingの状態も検知できる。 でもapollo-clientを使う方法は、接続設定の記載自体が必要だし、すべてがamplifyの機能に寄せれなくなる可能性がある。 https://qiita.com/sakapun/items/8084d61156b660a8fde1 公式サポートはまだない プロポーザルはあったみたい. https://github.com/aws-amplify/amplify-js/issues/4235 カスタムHooksを使って解決できる こちらの記事から続く4記事の連載で、書き方が学べる。 一つ一つ丁寧に説明されていて、すごくわかり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
GitHub - shwld/graphql-ruby-on-rails-with-spa: This is boilerplate
Using Apollo with multiple Graphql endpoints
Unable to set Auth Headers using Apollo Client 3 and setContext (apollo-link-context)
Create your custom Apollo client for AWS AppSync to use Hooks