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