How can I use a localStorage persister?

I wanna add a localStorage persister, but I'm getting errors for hydration:

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  throttleTime: 1000,
  retry: removeOldestQuery,
  serialize: data => JSON.stringify(data),
  deserialize: data => JSON.parse(data) as PersistedClient
})

...
return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
    >
      <apiClient.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
...

const persister = createSyncStoragePersister({
  storage: window.localStorage,
  throttleTime: 1000,
  retry: removeOldestQuery,
  serialize: data => JSON.stringify(data),
  deserialize: data => JSON.parse(data) as PersistedClient
})

...
return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister }}
    >
      <apiClient.Provider client={trpcClient} queryClient={queryClient}>
        {props.children}
...

ERROR:

const persister = createSyncStoragePersister({
> 59 |     storage: window.localStorage,
     |             ^
  60 |     throttleTime: 1000,
  61 |     retry: removeOldestQuery,
  62 |     serialize: data => JSON.stringify(data),

const persister = createSyncStoragePersister({
> 59 |     storage: window.localStorage,
     |             ^
  60 |     throttleTime: 1000,
  61 |     retry: removeOldestQuery,
  62 |     serialize: data => JSON.stringify(data),

6 Replies

NickServ•14mo ago

You can't use that on a server, it requires a client

gwilliamnnOP•14mo ago

I know, this is the client Provider...

NickServ•14mo ago

You're still rendering it on a server without checking if window exists

TheDarkKnight•11mo ago

@gwilliamnn Could you solve this?

lanc3•11mo ago

You'll have to do something like this

const localStorage = typeof window !== "undefined" ? window.localStorage : null;

const localStorage = typeof window !== "undefined" ? window.localStorage : null;

really depends though on how your application works

Jingles•6mo ago

any progress?

Gaming

Programming

How can I use a localStorage persister?