How to trigger suspense without createResource?

[jorroll]

The impression I have is that you need to use suspense in order to force solid SSR to wait for all data to be loaded before sending HTML to the client.

Assuming this is true, how can I trigger suspense with ApolloClient so all data is loaded on the server before HTML is sent to the client? I think this is equivalent to asking, "how can I trigger suspense without using createResource?"

Looking at the SSR and Suspense docs on the next branch, this question doesn't appear to be addressed.

Looking at the source code, it seems possible that this might be a feature request. I have the impression that someone might need to use getSuspenseContext() directly to trigger suspense without createResource, which appears to be a complex process.

Ideally, I could import and use a simple function such as setSuspense(true) or setSuspense(false) and manually control suspense. In this case, I would probably initialize the component with suspense = true, wait for data to initially load and populate the Apollo cache, and then set suspense = false. When the app is loaded on the client, the component would initialize with suspense = true but then suspense = false would be triggered synchronously since the Apollo cache would already be hydrated.

[ryansolid]

Yeah Suspense especially with concurrent rendering is incredibly complicated. I don't think it is easy to expose. The short answer is if you are using async you should be using resources for loading state.

Can you get a promise from ApolloClient? Feed that into a resource and you should be fine.

[jorroll]

Can you get a promise from ApolloClient? Feed that into a resource and you should be fine.

You can easily convert observables to promises, so this should be fine. The only hiccup I could see is that observables can execute synchronously while promises cant. Am I correct in thinking that this means a component can't handle suspense synchronously? I'm not actually sure if that poses any challenges, but it's good to know.

Off the top of my head, I imagine something like the following is doable? (though I haven't tested it yet)

function createSuspense(initialValue?: boolean) {
  let suspended = false;
  let res: (() => void) | undefined;
  let promise: Promise<void> | undefined;

  const startSuspense = (value?: boolean) => {
    if (value) {
      promise = new Promise<void>((_res) => {
        res = _res;
      }).then(() => {
        suspended = false;
      });

      createResource(() => promise);
      suspended = true;
    }
  };

  startSuspense(initialValue);

  const value = () => suspended;

  const setSuspense = (value: boolean) => {
    if (!promise || !suspended) {
      return startSuspense(value);
    } else if (!value && suspended) {
      res!();
    }
  };

  return [value, setSuspense];
}

With usage like

const MyComponent: Component<{ store: SomeDataStore }> = (props) => {
  const [value, setSuspense] = createSuspense(true); // initialize component as suspended

  const sub = store.getData({ /* ...options... */ }).subscribe(data => {
    if (value()) setSuspense(false);

    // do stuff
  })

  onCleanup(() => sub.unsubscribe());

  return (
    // etc...
  )
}

[ryansolid]

Hmm... it's not actually the fetch that triggers but the read of the resource. If you create a resource but for some reason, it is never read anywhere nothing suspends. It's the return from createResource that is important. Like if you create a resource in a global store only parts of the UI that read that particular value suspend.

The idea is the data is the resource. I've wondered how to best handle Observables for this reason. I'm gathering the idea it is only the no-data state you are expecting this suspended behavior. I was never 100% clear on this since a resource is basically a promise factory driven by a signal. Every time it triggers we go into Suspense again. The difference is with transitions API we don't tear down to a fallback when we do and instead continue to show the existing data. But no clear way with a single Observable to know when we are waiting again.

That being said you could probably read the resource where you create it in a computation and more or less create what you are after. Lazy Components work that way. Which makes sense since they trigger when you hit them in the JSX and only create the promise to fetch at that point. But that is only one scenario for data loading.

[ryansolid]

I found this which I think is promising: https://observable-hooks.js.org/guide/render-as-you-fetch-suspense.html. There is some weird stuff in here but I like their ObservableResource.

It basically suggests a model for an observable resource. I think this is much better. We shouldn't be thinking of suspense as something we can control but attack things at a resource level.