@lecxa/shipstation-react-query

React Query hooks for ShipStation API v2.

Installation

npm install @lecxa/shipstation-react-query @tanstack/react-query

Peer dependencies:

• @tanstack/react-query ^5.0.0
• react >=18

Usage

Setup

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

Query Hooks

import { useListShipments, useGetShipmentById } from '@lecxa/shipstation-react-query';

function ShipmentsPage() {
  const { data, isLoading, error } = useListShipments({ page: 1 });

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data?.shipments?.map(s => (
        <li key={s.shipment_id}>{s.shipment_id}</li>
      ))}
    </ul>
  );
}

Mutation Hooks

import { useCreateLabel } from '@lecxa/shipstation-react-query';

function CreateLabelButton() {
  const createLabel = useCreateLabel();

  const handleClick = async () => {
    const result = await createLabel.mutateAsync({
      shipment: { /* ... */ },
      carrier_code: 'stamps_com',
      service_code: 'usps_priority_mail',
    });
  };

  return (
    <button onClick={handleClick} disabled={createLabel.isPending}>
      Create Label
    </button>
  );
}

Infinite Queries

import { useListShipmentsInfinite } from '@lecxa/shipstation-react-query';

function InfiniteList() {
  const { data, fetchNextPage, hasNextPage } = useListShipmentsInfinite({
    page_size: 50,
  });

  return (
    <div>
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.shipments?.map(s => <div key={s.shipment_id}>{s.shipment_id}</div>)}
        </div>
      ))}
      {hasNextPage && <button onClick={() => fetchNextPage()}>Load More</button>}
    </div>
  );
}

Available Hooks

Query hooks (GET):

• useListShipments, useListShipmentsInfinite
• useGetShipmentById
• useListLabels, useListLabelsInfinite
• useGetLabelById
• useListCarriers
• useCalculateRates
• And more...

Mutation hooks (POST/PUT/DELETE):

• useCreateLabel
• useCreateShipments
• useVoidLabel
• useCreateBatch
• And more...

License

MIT