2.0 - Retrying state distinct from Loading/Errored/isPending?

[rvlzzr]

Scenario	Solid 2.0 Primitive
First load	<Loading>
Stale while revalidate	isPending()
Error occurred	<Errored>
Error retry or evict+refetch in progress	❌ Nothing

Solid 2.0 appears to provide no built-in primitive for detecting when a previously failed (or explicitly evicted) value is being fetched again without a stale value to show.

Specifically:

• Inside <Errored fallback={(err, reset) => ...}>, calling reset() triggers recomputation but returns immediately; there is no promise, signal, or observable retry state exposed to the fallback.

• After a cache eviction + re-read, there is no isPending(...)-equivalent for the case where the previous value is gone and a new fetch is now in flight.

This means retry/refetch UI currently requires manual coordination, such as managing an isRetrying signal and wiring it to prefetch(...).finally(...) alongside reset().

Should Solid expose something for this case, such as:

• an isRetrying(...) / isRefetching(...) primitive, or
• a reset() API that returns a promise or observable retry lifecycle?

[ryansolid]

isPending isn't sufficient. It should trigger the source async again which should flip isPending. We should continue to show the error boundary until the error clears. reset should either trigger the refetch or if it doesn't link back to an async source it, ie it doesn't actually retrigger the fetch then it stays errored I think.

Maybe best to show me an example.

[dangkyokhoang]

This is an example demonstrating how resetting lacks primitives compared to refreshing.

In this example, I have a query client that fails after 2 refetch attempts.
The normal UI shows the query result, a refresh button, and a message when the query is refreshing.
The error UI is expected to show the error message, a retry button, and a message when the query is retrying.

The issue is that when we retry the query, the createQuery can't tell if it is being reset, in order to force a refetch or evict the cache key. That's where we lack isResetting(). And isPending(data) reads data, which causes the error to be thrown from inside the error component, which causes the error to bubble up. That's where we lack isPendingWithoutThrowing(data).

https://stackblitz.com/edit/solidjs-templates-hskgybmr?file=src%2FApp.tsx

import {
  createMemo,
  Errored,
  isPending,
  isRefreshing,
  refresh,
} from 'solid-js';
import type { Component } from 'solid-js';

const store = new Map();

let attempts = 0;
const query = (key: string, shouldRefetch: boolean) => {
  if (!store.has(key) || shouldRefetch) {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const requestId = Math.random();
        if (attempts++ < 2) {
          resolve({ requestId, message: 'Sample data' });
        } else {
          reject(new Error('Failed to fetch data; request id: ' + requestId));
        }
      }, 1000);
    });
    store.set(key, promise);
  }
  return store.get(key);
};
const evict = (key: string) => store.delete(key);

const createQuery = (keyFn: () => string) => {
  return createMemo(() => query(keyFn(), isRefreshing()));
};

const App: Component = () => {
  const key = 'my-query-key';
  const data = createQuery(() => key);

  return (
    <Errored
      fallback={(err, reset) => (
        <>
          <div>{(err() as Error)?.message || String(err())}</div>
          <div>
            <button
              onClick={() => {
                evict(key);
                reset();
              }}
            >
              Reset
            </button>
            <Show when={isPending(data)}>
              <div>Resetting...</div>
            </Show>
          </div>
        </>
      )}
    >
      <Loading fallback={<div>Loading...</div>}>
        <div>Request ID: {data().requestId}</div>
        <div>Message: {data().message}</div>
        <div>
          <button
            onClick={() => {
              refresh(data);
            }}
          >
            Refresh
          </button>
          <Show when={isPending(data)}>
            <div>Refreshing...</div>
          </Show>
        </div>
      </Loading>
    </Errored>
  );
};

export default App;