Make reactive query to suite Svelte 5 Runes

[sgcullen]

Hi All,

I've got a query I would like to make reactive to match the svelte 5 runes style. I'm currently using the experimental query persister as follows:

 export let ID: string;
  async function fetchData() {
    const res = await fetchAllPageData(ID, domainID);
      if (res) return res;
  }

  function chromeLocalStorage(): AsyncStorage<PersistedQuery> {
    return {
      getItem: async (key) => {
        console.log('getting storage item', key);
        return await storage.getItem(`local:${domainID}_${key}`);
      },
      setItem: async (key, value) =>
        await storage.setItem(`local:${domainID}_${key}`, value),
      removeItem: async (key) =>
        await storage.removeItem(`local:${domainID}_${key}`),
    };
  }

  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        staleTime: 1000 * 60 * 24, // 1 day
        gcTime: 1000 * 60 * 24, // 1 day
        persister: experimental_createPersister({
          storage: chromeLocalStorage(),
          maxAge: 1000 * 60 * 24, // 1 day
          serialize: (data) => data,
          deserialize: (data) => data,
        }),
      },
    },
  });

  const query = createQuery(
    {
      queryKey: [ID],
      queryFn: async () => fetchData(),
    },
    queryClient,
  );

I've tried a few different things but would appreciate some input if anyone has a good pattern to follow for the Svelte 5 format.

Thank you!