Sławomir Kwiatkowski
by: Sławomir Kwiatkowski
2024/12/15
2024/12/01
Fetching a single record from an API using React
Content description:
In this post I'll describe how to get a single warehouse record.
The API is written in Django Rest Framework.
I will use dataLoader to get data from API.
The Warehouse() function uses the loader to obtain data about a specific warehouse. When the loader returns null, the login component is displayed.
import { useEffect } from "react"
import { useLoaderData, useNavigate, useLocation } from "react-router-dom"
function Warehouse() {
const warehouse = useLoaderData()
const navigate = useNavigate()
const location = useLocation()
useEffect(() => {
if (warehouse===null) {
navigate('/login', {state: {"from": location.pathname}})
}
},[]
)
return (
<>
{warehouse &&
<><h1>{warehouse.warehouse_name}</h1>
<h3>{warehouse.warehouse_info}</h3></>}
</>
)
}
The loader function is similar to the function that returns all warehouses belonging to a user:
Subscribe to:
Comments (Atom)
