Add `refetch`

[volkanunsal]

I found it necessary to add a refetch to evict data and fetch it again after an update. I thought it might be useful to others as well.

[dai-shi]

Hmm, interesting. How would you use refetch? I'm not sure if it works as expected unless you call it in render, but that's not a nice pattern like side effect?

[volkanunsal]

I use it after mutating a resource to update the values of the resource fields on the pages. It behaves essentially the same as the refetch method Apollo Client, except it evicts before fetching the new data, which is necessary due to the cache checking behavior of getResult.

[dai-shi]

Yeah, I think I understand some use cases need refetch feature.

What's not clear to me yet is if refetch can throw a promise, your app code needs to catch it, which doesn't sound correct as it's the implementation detail.

My gut feeling is in suspense for data fetching, after you mutate values on server, you want to evict and prefetch and then trigger component re-render, somehow... This is an interesting problem/challenge.

[dai-shi]

I just configured codesandbox ci. Would you merge master in this PR to see if it builds a package?

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 42a569b43dabc307c6416cd49f4964f6c4174c1a:

Sandbox	Source
React	Configuration
React Typescript	Configuration

[dai-shi]

thanks. codesandbox ci is working.

Now, you can create some example with codesandbox. Would you?

[volkanunsal]

Sure, I can.

On a sidenote, I noticed all the examples are using Concurrent Mode, via createRoot. Is it safe to use Suspense without Concurrent Mode?

[volkanunsal]

Unrelated question. Since you seem to be using Suspend extensively, do you have any thoughts on its production readiness? Any suggestions on how to introduce it to a team who might be scared off by the experimental label?

[dai-shi]

Oh, okay. You made an example in the repo. (I meant the codesandbox build, but this is easier to add the inline comment.)

On a sidenote, I noticed all the examples are using Concurrent Mode, via createRoot. Is it safe to use Suspense without Concurrent Mode?

Without createRoot in the experimental build, we can't use useTransition. Technically, we can use this library with Suspense in the stable build for React.lazy. For #12, useTransition is an important part to get full benefit of this library.

Unrelated question. Since you seem to be using Suspend extensively, do you have any thoughts on its production readiness? Any suggestions on how to introduce it to a team who might be scared off by the experimental label?

Apart from this library, I think in general Suspense for React.lazy can be used for basic data fetching.

jotai only supports suspense for async. valtio supports suspense (but optional). Technically speaking, their use of suspense is still undocumented. React team may officially provide a way to suspend instead of throwing a promise directly. We do our best to follow the change when it's officially out. Until then, it's still need to be noted as "unstable" from the library point of view, and app developers take the risk.

I hope, when React team provides something, it would be just replacing throw promise in the lib and no public api would be changed.

[dai-shi]

Continuing from https://github.com/dai-shi/react-suspense-fetch/pull/14#discussion_r598715532

So, there are two discussion points now:

1. How to trigger re-render for "refetch" use case?
2. When to invoke prefetch (or refetch)?

[volkanunsal]

Maybe the best thing is to use a hook, but throwing a Promise inside a useEffect doesn't work, so the throwy behavior would have to be outside of the hook, and maybe switched on by a flag.

[dai-shi]

For hooks approach, I have another repo to tackle: https://github.com/dai-shi/react-hooks-fetch

The challenge in this repo is to propose a new api with suspense without hooks.

[dai-shi]

Yes, this repo focuses on non-hook api. Closing.