Shouldn't graphcache 9 detect and delete old cached data?

[toerndev]

After upgrading to @urql/exchange-graphcache@9, it crashes on load:

Uncaught (in promise) SyntaxError: Unexpected token 'O', "O" is not valid JSON
    at JSON.parse (<anonymous>)
    at data.ts:720:49
    at data.ts:727:19

Deleting the IndexedDB database fixes the issue.

How can we resolve this at runtime? The code path is

// React root rendered
// ...
// this is needed to call urql's `createClient`:
const myCacheExchange = cacheExchange({
  // ...
  storage: makeDefaultStorage({ idbName, ..., onCacheHydrated: () => ... })
})

There is no hook for validating IDB data here, and the async nature of IDB makes it trickier to scan for a pattern before creating the cache. The React tree below the API provider would need to be deferred while this scan is done.

It should probably be the responsibility of graphcache to detect legacy data and clear it, since it's already making itself available to the client asynchronously without blocking it. It's also hard for consumers to know how to detect old cache data.

[MILLERMARRU]

The design gap you're pointing at is real, makeDefaultStorage doesn't version its own persisted format, so a storage-layer change between major versions has no way to detect "this is data from an older, incompatible shape" versus "this is corrupt," it just tries to JSON.parse whatever's there and throws. Whether graphcache should own that detection is a fair ask, but I wouldn't wait on it landing before you need a fix, since even if it ships, it'll only cover future version bumps, not the one you're on now.

A storage-level guard you can add today without forking graphcache: wrap makeDefaultStorage in your own storage object that tracks a version marker in localStorage (synchronous, cheap to check) alongside the IndexedDB data, and wipes the IDB database before handing off to urql if the marker doesn't match:

import { makeDefaultStorage } from '@urql/exchange-graphcache/default-storage';

const STORAGE_VERSION = '2'; // bump this on every graphcache major upgrade

function makeVersionedStorage(idbName: string) {
  const versionKey = `${idbName}:cache-version`;
  if (localStorage.getItem(versionKey) !== STORAGE_VERSION) {
    indexedDB.deleteDatabase(idbName);
    localStorage.setItem(versionKey, STORAGE_VERSION);
  }
  return makeDefaultStorage({ idbName /* ...your other options */ });
}

This sidesteps the async-scan problem you mentioned entirely, you're not reading IDB content to decide whether it's valid, you're using a synchronous, out-of-band version flag to decide whether to blow away the whole database before graphcache ever opens it. The cost is a manual version bump on your end whenever you upgrade @urql/exchange-graphcache in a way that changes the on-disk format, which is a fair trade for not shipping the JSON.parse crash to users.

Worth filing as a feature request either way, an official storageVersion option that does roughly this internally (so the library owns the bump instead of every consumer tracking it by hand) seems like the natural shape for what you're describing.

[toerndev]

Yes, I ended up with a similar solution.