Help us understand the problem. What is going on with this article?

apollo clientのcacheに有効期限をつける

はじめに

Apollo Client ver3.0では新たにcacheについていくつか機能が追加されています。その一つがcacheの削除です。
cacheに有効期限を設ける方法について、考えたので備忘録として残します(もっといい方法があれば教えてください)

evictとgc

今回は Apollo Client ver3.0で新しく追加されたgcとevictを使います。詳しい説明は公式docを参照してください

evict

evictはcacheに保存されているdataを消すことができます。
使う際は__typenameとidをセットにして使います

cache.evict('__typename:id')

gc

gcはevictで特定のdataを消した後cacheに残っているゴミを消すことができます。
ここでいう今回消したdataをrefとして持つ親データです。子を消した事によって、親が参照するdataがなくなりますが、gcを使う事によってこういったゴミを消すことができ、cacheのdataがクリーンに保たれます。

cache.gc()

実装例

以前挙げたQiitaの記事のQueryで保存されたcacheに有効期限10分をを設定したコードです。(apollo clientの中に有効期限設定できる機能があるのかも?)

import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";

const link = new HttpLink({
  uri: "http://localhost:4000/graphql"
});

const cache = new InMemoryCache()

const cacheInterval = setInterval(() => {
  cache.evict('Comment:1');
  cache.gc();
}, 10 * 60 * 1000);

const client = new ApolloClient({
  link,
  cache,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: "cache-first"
    }
  }
});
kobyta
未経験からフルスタックエンジニアを目指すための備忘録です!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away