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
2020年以降のフロントエンド開発は、Apolloをステート管理に使う(by react)
実際どうなのかという話。正直、今更感ですが、それでもあまりまだそうでもなかったりしてるので。 ※前提として、Apolloを使っているということは、要はGraphQLをバックエンドに持っているという意味である。 Apolloでステート管理は、思ったより現実的な使い方があると思っていて ステート管理は今までならReduxが2015年ぐらいから普通に使われてきたが、それから取って代わるものがあまりなくて、もちろんあるにはあるのだが、結局Reduxが選択されてきたと思う。 で、今年の春ごろにやっとフックがリリースされて、そのおかげで小規模なものにはReduxを入れなくてもそれなりなコードで仕上げることができるようになった。 カスタムフックなどをうまく使えば、それこそReduxなしでちゃんとステート管理できる。 もちろん、使い方を間違えれば、スパゲティコードみたいなものができてしまうが。 それでは、
Auth0で保護されたAWS AppSync(GraphQL)をReactからApollo Clientで利用する方法をチュートリアルとしてまとめた | DevelopersIO
Create React App（CRA）を使ってアプリケーションを生成します。任意の作業用ディレクトリに移動後、下記のコマンドを実行します。 再現性を高めるために、パッケージのバージョンを固定してインストールしています。 npx create-react-app@3.4.1 --template typescript react-appsync-protected-by-auth0 cd react-appsync-protected-by-auth0 React RouterとAuth0のSPA用SDKをインストールします。 yarn add react-router-dom@5.1.2 @auth0/auth0-spa-js@1.8.1 yarn add -D @types/react-router-dom@5.1.2 Auth0をReactで利用する為のCustom Hookを作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fullstack app with TypeScript, Next.js, Prisma & GraphQL
GitHub - shwld/graphql-ruby-on-rails-with-spa: This is boilerplate