Query cache

import { signal, onCleanup } from '@zidomjs/core';import { createQueryClient } from '@zidomjs/query';export default function QueryDemo() {  const client = createQueryClient();  const id = signal('1');  const request = client.query({    key: () => ['example-person', id.value],    staleTime: 10_000,    retry: 0,    fetcher: async ({ key, signal }) => {      // A local fixture, so the demo works without an API key or backend.      await new Promise<void>((resolve, reject) => {        const timeout = setTimeout(resolve, 250);        signal.addEventListener(          'abort',          () => {            clearTimeout(timeout);            reject(new DOMException('Aborted', 'AbortError'));          },          { once: true }        );      });      const [, userId] = key as readonly [string, string];      return { id: userId, name: userId === '1' ? 'Zidane' : 'Amira' };    }  });  onCleanup(() => {    request.dispose();    client.dispose();  });  return (    <div className="example-card">      <p>Cache by key, then refetch and observe reactive status.</p>      <p>        Status: <strong>{request.status}</strong>      </p>      <p className="demo-output">        {() => request.data.value?.name ?? 'No data yet'}      </p>      <div className="demo-actions">        <button onClick={() => (id.value = id.value === '1' ? '2' : '1')}>          Switch key        </button>        <button onClick={() => void request.refetch()}>Refetch</button>        <button          onClick={() => {            client.invalidate(['example-person', id.value]);            void request.refetch();          }}        >          Invalidate + refetch        </button>      </div>    </div>  );}