オプション: ローカルキャッシングを追加

npm install apollo3-cache-persist localforage

import localforage from 'localforage';

localforage.config({
  driver: localforage.INDEXEDDB,
  name: 'myapp-apollo-cache',
  storeName: 'apollo_cache',
});

import { CachePersistor, LocalForageWrapper } from 'apollo3-cache-persist';

export const persistor = new CachePersistor({
  cache,
  storage: new LocalForageWrapper(localforage),
  maxSize: 1048576 * 2, // 2MB -- アプリが大きなデータセットをキャッシュする場合は増やしてください
  debug: process.env.NODE_ENV === 'development',
  trigger: 'write',
  key: 'apollo-cache-v1', // GraphQLスキーマが変更されたときにバージョンを上げます
});

import { useState, useEffect } from 'react';
import { ApolloProvider } from '@apollo/client';
import { apolloClient, persistor } from './apolloClient';

function App() {
  const [cacheReady, setCacheReady] = useState(false);

  useEffect(() => {
    persistor.restore().then(() => setCacheReady(true));
  }, []);

  if (!cacheReady) {
    return <div>Loading...</div>;
  }

  return (
    <ApolloProvider client={apolloClient}>
      {/* アプリコンポーネント */}
    </ApolloProvider>
  );
}

import { signOut } from 'aws-amplify/auth';
import { apolloClient, persistor } from './apolloClient';

export async function handleSignOut() {
  // 1. clearStoreが書き込みをトリガーしないように永続化を一時停止
  persistor.pause();

  // 2. メモリ内キャッシュをクリアしてアクティブなクエリをキャンセル
  await apolloClient.clearStore();

  // 3. IndexedDBから永続化されたキャッシュをパージ
  await persistor.purge();

  // 4. Amplifyからサインアウト（Cognito トークンをクリア）
  await signOut();
}

const [createPost] = useMutation(CREATE_POST, {
  optimisticResponse: ({ input }) => ({
    createPost: {
      __typename: 'Post',
      id: `temp-${Date.now()}`,
      title: input.title,
      content: input.content,
      status: input.status,
      rating: input.rating ?? null,
      _version: 1,
      _deleted: false,
      _lastChangedAt: Date.now(),
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
    },
  }),
  update(cache, { data }) {
    if (!data?.createPost) return;
    cache.updateQuery({ query: LIST_POSTS }, (existing) => {
      if (!existing?.listPosts) return existing;
      return {
        listPosts: {
          ...existing.listPosts,
          items: [data.createPost, ...existing.listPosts.items],
        },
      };
    });
  },
});

const [updatePost] = useMutation(UPDATE_POST, {
  optimisticResponse: {
    updatePost: {
      __typename: 'Post',
      id: post.id,
      title: 'Updated Title',
      content: post.content,
      status: post.status,
      rating: 4,
      _version: post._version + 1,
      _deleted: false,
      _lastChangedAt: Date.now(),
      createdAt: post.createdAt,
      updatedAt: new Date().toISOString(),
    },
  },
  // 更新関数は不要 -- Apolloが__typename + idで自動マージ
});

const [deletePost] = useMutation(DELETE_POST, {
  optimisticResponse: {
    deletePost: {
      __typename: 'Post',
      id: post.id,
      _version: post._version + 1,
      _deleted: true,
      _lastChangedAt: Date.now(),
    },
  },
  update(cache, { data }) {
    if (!data?.deletePost) return;
    cache.evict({ id: cache.identify(data.deletePost) });
    cache.gc();
  },
});

import { InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        listPosts: {
          keyArgs: ['filter'],
          merge(existing, incoming) {
            if (!existing) return incoming;
            return {
              ...incoming,
              items: [...(existing.items || []), ...(incoming.items || [])],
            };
          },
          read(existing, { readField }) {
            if (!existing) return existing;
            return {
              ...existing,
              items: existing.items.filter(
                (ref) => !readField('_deleted', ref)
              ),
            };
          },
        },
      },
    },
  },
});

// 間違い -- refはキャッシュ参照であり、実際のオブジェクトではありません
items.filter((ref) => !ref._deleted)

// 正しい -- readFieldが参照を解決します
items.filter((ref) => !readField('_deleted', ref))

async function logCacheSize() {
  const sizeInBytes = await persistor.getSize();
  if (sizeInBytes !== null) {
    console.log(`Cache size: ${(sizeInBytes / 1024).toFixed(1)} KB`);
  }
}