heroku/react-refetch

[idea] useRefetch

horyd opened this issue · 5 comments

horyd commented

Would be really cool if the classical react-refetch API could be extrapolated into the React Hooks style syntax. Here's what I've cooked up so far: https://codesandbox.io/s/52j3760v4n

Basically you'd need to record two different types of hooks, one for synchronous hooks that fire immediately/always and one for async hooks that require a function to be executed. I've used a simple queue in the example but it could just as well work by overwriting a single "last request" and then using the useEffects comparing array to run a comparing function (like the default refetch comparing function for instance)

Either way I think there's a decent amount of potential in it. What do you all think?

hi @horyd

I've build this: https://github.com/slorber/react-async-hook

maybe it's what you were looking for?

horyd commented

Hi @slorber!

Cool package. Does that just take a regular promise as an argument? How is fetchStarwarsHero dependent on id?

If you like check out these two posts I wrote on the topic, the second one in particular might be handy as it is for triggering async behaviour on UI actions.

https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-1-7531849d8381
https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c

Happy to chat/collab, let me know :)

it takes an async function, the 2nd args is the async fn args that will be injected. If they change data is refetched

I'm trying to figure out if my code makes any sense, because suspense probably makes this useless

horyd commented

I was taking a closer look at Suspense and it kind of applies mostly to the conditional/asynchronous rendering, not so much to the actual logic. I spent a bit of time exploring the concept of triggered async actions in that second article because in Suspense that would look a little odd?

You would need to have the onClick handler set a state variable that then rendered the Suspense component and from within that you made the POST request and handled the response?

I have open sourced a library very similar to react-retch, named react-decorate-fetch, I would be very happy if someone can help me maintain it together.