I wanna share with you some pattern for develop ud component using react-query

Basically I learn this pattern and I migrate all ud antd components to this style

first, I used React-Query for querying the endpoints, react-query is awesome because it have autorefresh and refresh interval built-in, so no need for ReactInterval ( one lib less to import), second it’s built-in cache and a lot more features.

so let build AntDesign Carousel Component

Step 1

create custom react hook to use react-query this component will work in the new PowerShell Universal

this custom hook will return the react-query signature that’s an object that has

{ data, error, status, isFetching, refetch }

data will contain the data from our Powershell endpoint.
error will contain the error message from the endpoint
status has 2 options

  • 1
status === "loading"
  • 2
status === "error"

isFetching is boolean if true react-query still querying the endpoint
refetch is a function that you can use the re querying the endpoint

Step 2

create our custom AntDesign component

from the first look, you can see the component is simpler using our custom hook
using those two lines we are using our custom hooks to qurerying the endpoint and to check for error

const { data, status, error } = useCarousel(id, autoRefresh, refreshInterval)
if (status === "error") return <Alert message={error.message} type="error"  />

Notes

some YT vids on React-Query


and you should follow this guy he has a lot of cool hooks

2 Likes