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.

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>
  );
};