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

``tsx
import { ShipEngine, useListShipments } from "@shipengine/react-api";

const MyComponent = () => {
const { data, isLoading, error } = useListShipments();

if (isLoading) return

const MyApp = () => {
return (
"your-platform-token"}>



{/ All three components will share the same data and only 1 request will be made /}

);
};
``