feat: a promise returning function to transfer state between server and client

[MartinMalinda]

🆒 Your use case
I'm fetching data in a callback passed to a different hook:

const task = useTask(function*(){
 return ajax('/some/api');
});

In order to pass make this work with SSR well, the result needs to be passed through ssrContext.

Current solutions can be used but are not ideal:

useAsync returns a ref and probably needs to be used right in the setup()
useFetch expects you to assign to a ref and it does some error handling I don't necessarily need in this case

🆕 The solution you'd like
It would be great if there was a function that would behave similarly as useFetch or useAsync in terms of executing on the server and returning data from ssrContext on the client.

But the difference would be

• result would be a promise that needs to be handled for rejection
• it could be called not directly in setup (in a callback)

API proposal

setup() {
  const prefetch = usePrefetch();
  // used directly in setup:
  const data = await prefetch(() => ajax('/foo'));

  // or in some callback:
  const task = useTask(function *() {
    const data = yield prefetch(() => ajax('/foo'));
    return data;
  });
}

I struggle with naming here a bit. It's already a 3rd approach towards data loading besides useAsync and useFetch. But maybe usePrefetch seems right?

Besides my usecase with vue-concurrency I believe this could also be useful when using Suspense together with onErrorCaptured, but I'm not sure what's the state of using Susepense within Nuxt.

[danielroe]

@MartinMalinda You can try it out with ssrPromise in v0.9.3. Let me know if there's anything I've missed 😃