@shipengine/react-api
v3.6.0
Published
The `shipengine/react-api` library provides React bindings for the [shipengine/js-api](https://www.npmjs.com/package/@shipengine/js-api) client, with the addition of data sharing and cache management via [React Query](https://tanstack.com/query/latest) (h
Downloads
698
Maintainers
Keywords
Readme
ShipEngine React Api
The shipengine/react-api
library provides React bindings for the shipengine/js-api client, with the addition of data sharing and cache management via React Query (hereon "RQ").
The client interface is exposed via hooks[^1] sharing a single RQ client instance; this allows multiple components to access data from the same ShipEngine API endpoint with a single network request.
For instance, if ComponentA
, ComponentB
and ComponentC
separately invoke the useListShipments
hook on a single render, the API requests will be deduped to a single GET /v1/shipments
, with all three components sharing the data / loading / error / etc states from the RQ cache. Revalidating the request in one component similarly updates the others.
Basic usage
import { ShipEngine, useListShipments } from "@shipengine/react-api";
const MyComponent = () => {
const { data, isLoading, error } = useListShipments();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>{error.message}</div>;
console.log(data);
// > an object matching the response schema of https://shipengine.github.io/shipengine-openapi/#operation/list_shipments
return <div>Retrieved {data.shipments.length} shipments</div>;
};
const MyApp = () => {
return (
<ShipEngine getToken={() => "your-platform-token"}>
<MyComponent />
<MyComponent />
<MyComponent />
{/* All three components will share the same data and only 1 request will be made */}
</ShipEngine>
);
};