How to handle loading subsequent data without suspending?

[cevr]

Hi there!
I wish I had known about this library sooner, I've spent a couple weeks combing over the replay io codebase to implement my own suspense cache.

In my implementation, I opted for adding another status called 'revalidating' that basically allowed the cache refetch without suspending, but also provide information that the current value was now stale (and render some sort of pending state).

How would you handle this use case?

[bvaughn]

Oh that's interesting. Does it differ in any other significant ways besides the "revalidating" status? If not, it might be worth switching to this one 😄

How would you handle this use case?

I don't think I have a need to differentiate between pending and "revalidating" as you call it– at least from an external "status" standpoint. For the component(s) suspending to fetch the data, their behavior is controlled by whether the update is a transition or not. So the only difference...I think...would be if you wanted to show some different UI treatment between the first load and a reload?

[cevr]

In my example, I have a menu cache (which in terms of this library is a single entry cache) and an action later mutates the menu in the backend, so I would like to invalidate the menuCache afterwards but not suspend the component.

export type CacheSuspenseResponse<TValue> = {
  status: 'success' | 'revalidating';
  value: TValue;
  invalidate: () => void;
};

// ....
read(...cacheKey: TParams): CacheSuspenseResponse<TValue> {
    const cache = this; // maybe use context to grab cache boundaries?
    const value = cache.suspend(...cacheKey);
    const rerender = useRerender();
    // if it gets here, thats because the value was resolved successfully
    const lastStatus = React.useRef<CacheStatus>(STATUS_RESOLVED);

    React.useEffect(() => {
      const unsub = cache.subscribeToStatus((status) => {
        if (status !== lastStatus.current) {
          lastStatus.current = status;
          rerender();
        }
      }, ...cacheKey);
      return unsub;
    });

    return {
      status: value.stale ? 'revalidating' : 'success',
      value: value.value,
      invalidate: () => cache.invalidate(...cacheKey)
	}
}

The implementation of invalidate is basically the same as getOrCreateRecord

async invalidate(...args: TParams): Promise<CacheStatusRecord<TValue> | undefined> {
    const cacheKey = this.getCacheKey(...args);
    let record = this.recordMap.get(cacheKey);
    if (record && record.status !== STATUS_PENDING) {
      const wakeable = createWakeable(`${this.debugLabel} ${cacheKey}}`);
      record = {
        status: CACHE_REVALIDATING,
        value: wakeable,
        cached: record.value,
      } as CacheStatusRecord<TValue>;

      this.recordMap.set(cacheKey, record);
      this.notifySubscribers(...args);

      await this.fetchAndStoreValue(record, ...args).catch(handleError);
      return record;
    }
  }

🙈 I'm still learning from the code I've been reading so pardon if any of this seems wrong

[cevr]

Heres the suspend code

  suspend(...args: [...TParams]): { value: TValue; stale: boolean } {
    const record = this.getOrCreateRecord(...args);
    if (record.status === STATUS_RESOLVED) {
      return { value: record.value, stale: false };
    }

    if (record.status === CACHE_REVALIDATING) {
      return { value: record.cached, stale: true };
    }

	// how else to recover from error boundary other than manually placing a cache.remove(key) in the error boundary
    if (record.status === STATUS_REJECTED) {
      this.scheduleEviction(...args);
    }

    throw record.value;
  }

[bvaughn]

I would like to invalidate the menuCache afterwards but not suspend the component.

By "not suspend the component" do you mean "not show a fallback" or do you literally mean "not re-render the component"?

I assume you mean the first thing, which you can do by scheduling an update as a transition (useTransition / startTransition).

[cevr]

I've tried to implement it myself using startTransition but it doesn't seem to pause the suspense when initiated outside the component tree. Im subscribing to the cache status updates to notify the component, but it just causes it to suspend. Would you know how I can mark the suspense as a transition from an imperative process outside of react?

[bvaughn]

Would you know how I can mark the suspense as a transition from an imperative process outside of react?

Schedule the state update within startTransition callback.

[cevr]

https://stackblitz.com/edit/react-ts-342kk5?file=App.tsx

I don't really know what I'm doing wrong, but I can't get the suspense to actually be marked as pending. It always suspends, whether i do it outside the suspending component or not.

[cevr]

Is it that notifying subscribers is not synchronous? From what I can gather it should be

[bvaughn]

I don't think I'm ready to answer these questions yet. It's basically what I'm trying to work out over on #7.

[bvaughn]

I have a solid lead on this (see this comment: #7 (comment))

Here's a walk through with a demo:
https://www.loom.com/share/55b645c9730a4958b8a2f91dfc19b72f

[cevr]

Screen.Recording.2023-03-06.at.12.42.05.PM.mov

Here's an example of what I mean. When there's no cache, the fallback is shown. When the next button is clicked, its wrapped in a startTransition and it shows a pending state to show that the next page is loading, and when the invalidate current page button is clicked, there is a small loading indicator in the top right that shows it's being "revalidated"

[bvaughn]

Sorry. Not sure how that applies to my most recent comment/suggestion. Does the info I mentioned not work for this use case somehow? May need you to spell it out for me 😄

[cevr]

No I think you're right! Thanks for the dialog. I'll definitely be using this.

[bvaughn]

If you end up using this package in your app(s) I'd love to see a demo (or just hear how it worked out for you) 😄

[cevr]

Of course! Working on a v2 at work and want to build on top of suspense, so I'll be working a lot with this in the coming months 😃

[bvaughn]

Okay I think this thread can be "answered" now.

The general purpose answer for React is: Use a transition (useTransition or startTransition).

The specific answer for this package is: Use the new mutation hook (useCacheMutation) as shown in the "mutating cache values" example page.