sergiodxa / swr-sync-storage

Synchronize SWR cache with localStorage or sessionStorage to get offline cache

swr-sync-storage

Synchronize SWR cache with localStorage or sessionStorage to get offline cache.

Usage

Install it

$ yarn add swr-sync-storage

Note: You will need to provide SWR v0.2.0-beta.0 or greater

import { syncWithStorage } from "swr-sync-storage";
syncWithStorage("local");
syncWithStorage("session");

You can also import to already bound versions of local or session storage.

import { syncWithLocalStorage } from "swr-sync-storage";
syncWithLocalStorage();

import { syncWithSessionStorage } from "swr-sync-storage";
syncWithSessionStorage();

Every function will return a new function to unsubscribe for cache changes.

swr-sync-storage's Issues

cause the swr's key serialization, it it should do not work with key of Array type

key serialization: https://github.com/vercel/swr/blob/master/src/cache.ts#L45
think of the using as follow

function App() {
  const {data} = useSWR('/api/a');
  const {data} = useSWR(['/api/list', {id: data.id}], fetcher);
}

the key may serialize to /api/list0,
{name: 'xxx', age: 'xxx'} will transform to a Incremental number

page1

function App() {
  const {data} = useSWR(['/api/list', {id: '1'}], fetcher);
}

page2

function App() {
  const {data} = useSWR(['/api/list', {id: '2'}], fetcher);
}

when i open page1 and page2, ['/api/list', {id: '1'}] and ['/api/list', {id: '2'}] will be serialized to /api/list0, but they stand for a different query. so they may use the error data

cache API and dexie/indexeddb backends

would you be openminded to add a couple more storage systems?

Cache api (works inside WebWorkers and persists to webapps added to home screen in iOS) https://developer.mozilla.org/en-US/docs/Web/API/Cache

Dexie.js with IndexedDB (enables multiple databases, bigger amounts of data, queries, search etc)
https://dexie.org

TypeError: Cannot read properties of undefined (reading 'subscribe')

"next": "^13.0.4",
"swr": "^2.0.0",
"swr-sync-storage": "^1.0.1",

Node: v16.10.0

Request feature: Choose what key save in localstorage

Hi, if I use load more scroll, that will be much data in localstorage.
I hope you can edit more to archive which key should we cache

I want something like this
import { syncWithStorage } from "swr-sync-storage";
syncWithStorage("local",["key-i-want-to-save"]); // this key just in localstorage, not in session too. And regex will be more great i think
syncWithStorage("session",["key-i-want-to-save"]);

Warning: Prop `className` did not match. Server: "navbar-item is-hidden" Client: "navbar-item"

Hi, I have this error when check user data in. Did you face with this problem?

Warning: Prop `className` did not match. Server: "navbar-item is-hidden" Client: "navbar-item"

 <Link href="/user" as="/user">
     <a  className={ user? "navbar-item" : "navbar-item is-hidden" }>
           Dashboard
     </a>
</Link>

Help with alternatives

Hi. I keep stumbling across this repo and your comments on other peoples issues.
It seems this packages is not maintained anymore - could you recommend any alternatives?

I have already tried react query, but prefer SWR, but maybe you know of others?

Kind regards
Dennis

Example

Hi can you make a simple example for use this? I am trying to save public user info to local.
I use localStorage with SWR but it not work well.