A consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs 🔥
restful-react
Building React apps that interact with a RESTful API presents a set of questions, challenges and potential gotchas. This project aims to remove such pitfalls, and provide a pleasant developer experience when crafting such applications. It can be considered a thin wrapper around the fetch API in the form of React components and hooks.
As an abstraction, this tool allows for greater consistency and maintainability of dynamic codebases.
Hi! I'm Rohan, a Full Stack Software Engineer, with a background of working with Deep Learning and AI, who loves to use his skills to create products that are at the intersection of all of these!
SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.
Basically not showing "loading" screen as soon as a data is being fetched/refetched.
That sounds a bit like Pending → Skeleton → Complete Concurrent UI pattern in the experimental channel (but not sure if they are the same).
You can also do optimisitic UI update using mutate, meaning, you can show updated state right away before getting remote data. And revert if the change was not made.
Thanks sharing Sung. Gonna take a look at this when I get a chance. Between this and restful-react, all kinds of great stuff out there right now.
A consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs 🔥
restful-reactBuilding React apps that interact with a RESTful API presents a set of questions, challenges and potential gotchas. This project aims to remove such pitfalls, and provide a pleasant developer experience when crafting such applications. It can be considered a thin wrapper around the fetch API in the form of React components and hooks.
As an abstraction, this tool allows for greater consistency and maintainability of dynamic codebases.
Overview
At its core,
restful-reactexposes a hook, calleduseGet. This component retrieves data, either on mount…You're welcome, Nick and thanks for sharing
restful-react.There are many good libraries out there still yet undiscovered and we don't know about :)
You Go Sung! 🔥
Thanks Rohan. Glad to see ya on DEV :)
I'm a total React noob, but I would normally do this with useEffect. Is the main benefit the support for suspense?
Ah, I think I see after playing with your example. It's nice to have it remote/local friendly out of the box. Thanks!
As I am also a noob at
useSWR, I just tried to explain as much as I know :pYes. One would normally use
useEffectby default to fetch data (as it's a side effect).useSWRwould ease the burden of having to write much boilterplate code.useSWRis usinguseLayoutEffectoveruseEffect(, which I'd like to know the reason behind it).github.com/zeit/swr/blob/a323fa702...
thinking out loudly:
Maybe this article by Dave Ceddia would provide an answer.
When to useLayoutEffect Instead of useEffect
It's only one of the nice features :)
The main benefit is hidden in the name, SWR
Basically not showing "loading" screen as soon as a data is being fetched/refetched.
That sounds a bit like Pending → Skeleton → Complete Concurrent UI pattern in the experimental channel (but not sure if they are the same).
You can also do optimisitic UI update using mutate, meaning, you can show updated state right away before getting remote data. And revert if the change was not made.
useAsync, useAsyncRetry and useAsyncFn is better!
Change my mind!
No, I won't change your mind 🙂
On the other hand, as this post touched good parts of
useSWR, I will share a nice/thorough concerns (by Sébastien Lorber) one should watch out for.Sébastien is an author of github.com/slorber/react-async-hook, which is in works to be merged with React-Async.
reddit.com/r/reactjs/comments/dof4...
This is AWESOME!!!!!!!!!
Thanks, Roel~
I 'd like to ask how to useSRW get request from graphql service.