Is it possible to persist using Svelte right now?

[frederikhors]

Svelte lover here: is it possible to persist with Svelte too?

Or is just for React for now?

If not this is a blocking for us unfortunately.

[TkDodo]

The react adapter is pretty slim, you can take a look here:

query/packages/react-query-persist-client/src/PersistQueryClientProvider.tsx

Lines 21 to 53 in f57c8dc

	const [isRestoring, setIsRestoring] = React.useState(true)
	const refs = React.useRef({ persistOptions, onSuccess })
	React.useEffect(() => {
	refs.current = { persistOptions, onSuccess }
	})
	React.useEffect(() => {
	let isStale = false
	setIsRestoring(true)
	const [unsubscribe, promise] = persistQueryClient({
	...refs.current.persistOptions,
	queryClient: client,
	})
	promise.then(() => {
	if (!isStale) {
	refs.current.onSuccess?.()
	setIsRestoring(false)
	}
	})
	return () => {
	isStale = true
	unsubscribe()
	}
	}, [client])
	return (
	<QueryClientProvider client={client} {...props}>
	<IsRestoringProvider value={isRestoring}>{children}</IsRestoringProvider>
	</QueryClientProvider>
	)

I think you can do that in svelte in user-land and then maybe contribute it back as a svelte-query-persist-client ? @lachlancollins FYI

[frederikhors]

I don't think I'm the perfect guy for such a job, unfortunately.

[ghost]

@frederikhors, i was able to persist and load client with this when disabling ssr ( might also work with ssr). Let me know if this worked? BTW I'm not using the query-persist-core because it rewrites every time the query cache changes, and I think frequently JSON.stringify-ing and writing the local storage might slows down my app ( I maybe wrong here ), so what i did here was saved the query state on unload. This only works when the function is non asynchronous and writing to local storage is synchronous.

<script>
  import { setContext, onMount } from "svelte";
  import { hydrate, dehydrate } from "@tanstack/svelte-query";
  import { SvelteQueryDevtools } from "@tanstack/svelte-query-devtools";

  export let data;

  const queryClient = data.queryClient;
  setContext("$$_queryClient", queryClient);

  const hydrateClient = () => {
    try {
      const storeValue = localStorage.getItem("QUERY_CLIENT");
      if (!storeValue) return;

      const persistedValue = JSON.parse(storeValue);

      if (persistedValue?.timestamp) {
        const MAX_AGE = 1000 * 60 * 60 * 24;
        const expired = Date.now() - persistedValue.timestamp > MAX_AGE;
        if (!expired) hydrate(queryClient, persistedValue.clientState);
      } else {
        localStorage.removeItem("QUERY_CLIENT");
      }
    } catch {
      // remove persisted client on any error
      localStorage.removeItem("QUERY_CLIENT");
    }
  };
  const saveClient = () => {
    localStorage.setItem(
      "QUERY_CLIENT",
      JSON.stringify({
        timestamp: Date.now(),
        clientState: dehydrate(queryClient, {})
      })
    );
  };

  const unload = () => {
    saveClient();
  };

  onMount(() => {
    hydrateClient();
    queryClient.mount();
    return () => {
      queryClient.unmount();
    };
  });
</script>

<slot />
<SvelteQueryDevtools buttonPosition="bottom-right" />
<svelte:window on:beforeunload={unload} />

[sharmapukar217]

Oh i forgot to mention, you can use persistQueryClient and provide a filter(I forgot exactly where, but if you want i could try it once for you) so that instead of rewriting every state of queryClient, it only saves successful and(or) error state, skipping loading state. This way, you can use idb for storage but with lesser rewrites

[frederikhors]

This is what I got if I try:

[frederikhors]

you can use persistQueryClient and provide a filter

Can you please show how? I cannot understand how to do this.

[sharmapukar217]

Please give me few days. I'm away from keyboard since weeks. I'd provide you details when I'm go back to my pc 🙂

[sharmapukar217]

I guess its promise.then(() => {}), i got confused maybe. You can check the source code for react wrapper.

[sharmapukar217]

Thats promise.then(() => {})
Sorry, my bad 😅