useQuery declares an asynchronous server-data request for a component. It combines an existing query function with a queryKey that identifies the cached result, then exposes data and loading state for rendering. section 9.3.2
Choose query keys that describe every parameter affecting the request:
- Use ["customers"] for an unparameterized customer list. section 9.3.2
- Include identifiers, pages, or search values in the key, such as ["customer", { id: 1 }] or ["customers", { page: 3 }]. section 9.3.2
- Handle the initially undefined data state before mapping or rendering results. section 9.3.2
function Customers() {
const { data, isLoading } = useQuery({ #1
queryKey: ["customers"], #1
queryFn: getCustomers, #1
); #1
if (isLoading) return "Loading..."; #2
return (
<>
{data.map((customer) => ( #3
<Customer key={customer.id} {...customer} />
))}
</>
);
}
A minimal component query shows the request, loading branch, and rendering path. section 9.3.2
