useResource$ race conditions when pagination key changes rapidly

Direct Answer

The reliable pattern is to own an AbortController in a useSignal, abort it synchronously when the pagination key changes, and have the loader check signal.aborted before mutating state. Qwik v1.x does not yet surface a cancellation token in the useResource$ fetcher signature, so the controller must be threaded manually through the loader context and serialized across SSR hydration.

Pattern That Works Today

1. Create a signal holding the current AbortController (or null).
2. When the pagination key changes, call controller?.abort(), then assign a fresh AbortController to the signal.
3. Pass the controller's signal into the async function you give to useResource$ (via closure or a wrapper).
4. Inside that async function, if (signal.aborted) return before any state write.
5. After awaiting the fetch, verify signal.aborted again and discard the payload if true.

const abortCtrl = useSignal<AbortController | null>(null);

const data = useResource$(
  async (key: string) => {
    abortCtrl.value?.abort();
    const ctrl = new AbortController();
    abortCtrl.value = ctrl;

    const res = await fetch(`/api/items?cursor=${key}`, { signal: ctrl.signal });
    if (ctrl.signal.aborted) return; // stale
    return res.json();
  },
  paginationKey
);

SSR Hydration Coordination

During server rendering, the loader runs once per key. Serialize a unique request ID (e.g., crypto.randomUUID()) into the initial HTML payload. On client mount, read that ID, create a matching AbortController, and store it in the same signal. If the key changes before hydration completes, the server‑side loader has already returned; the client‑side abort prevents the duplicated loader execution from overwriting state.

// Server loader
export const useItemsLoader = (key: string) => {
  const requestId = crypto.randomUUID();
  // embed requestId in response meta for client
  return fetch(`/api/items?cursor=${key}`).then(r => r.json());
};

// Client hook
useClientEffect$(() => {
  const ssrId = document.querySelector('[data-request-id]')?.dataset.requestId;
  if (ssrId) {
    // associate with current controller if needed
  }
});

Cancellation Token in useResource$ Signature

As of Qwik 1.5 there is no built‑in AbortSignal parameter. The RFC for usePaginatedResource$ and first‑class abort integration remains open. Track the Qwik repository issues for 'abort signal in useResource$' — the design discussion centers on whether the token should be injected via the loader context or added as a second argument to the fetcher callback.

Verification Steps

• Add console.log('aborted', signal.aborted) at the top of your fetcher; trigger rapid 'Next' clicks and confirm the log appears before any network response.
• Inspect the initial SSR markup for the request ID and verify the same ID is read during useClientEffect$ hydration.
• Watch the console for 'UnhandledPromiseRejection' warnings after aborting; wrap the fetch in a try/catch that ignores AbortError.

One Diagnostic Detail Needed

Are you using routeLoader$ or routeAction$ for the pagination fetch, or is the fetch entirely inside a component‑level useResource$? The coordination strategy differs slightly because route loaders run during navigation and have their own lifecycle.