@jeeny/jeeny-react-hooks NPM

jeeny-react-hooks

The jeeny-react-hooks package provides an intuitive and typesafe way to interact with the Jeeny API. It is primarily designed to be "headless", just like the Jeeny API.

What is Jeeny?

Jeeny is a warehouse management system and enterprise resource planning API. It is a headless system for procurement, inventory, standard operating procedures, manufacturing, and fulfillment. Without replacing your current systems you can extend, enhance, and embed in order to create the customizations your teams need.

What is a headless front end?

A headless front end library separates the UI from the logic. This lets the developer focus on user experience without having to think too much about how to retrieve, manipulate, and store data.

The goal is twofold - make it impossible to fail and let the API documentation fade into the background by making it part of the components. You will of course need to be using TypeScript to take full advantage of these features. The package can be used with good old JavaScript too though.

Installation

Yarn yarn add @jeeny/jeeny-react-hooks

npm npm install @jeeny/jeeny-react-hooks

Running tests

Yarn yarn test

npm npm run test

Authentication

You must wrap your application in the JeenyProvider component and pass it your headless API key. This provider allows downstream components to authenticate with the Jeeny graphql server.

It includes the ApolloProvider component from the React Apollo Client. This means that the Jeeny hooks and components can take advantage of features like caching and the Apollo devtools.

You can get your free API key from the Jeeny Hub under the Headless menu.

import { JeenyProvider } from "@jeeny/jeeny-react"
<React.StrictMode>
	<JeenyProvider apiKey="YOUR_API_KEY">
		<App  />
	</JeenyProvider>
</React.StrictMode>

Hooks

The hooks in this package provide an easy way to get direct access to the API. The API hooks can be considered a wrapper around the Apollo Client hooks. The hooks return functions you can use to retrieve or mutate data, the loading state of the actions, and the response data. Like the other utilities in this package, they are fully typed.

Each query function is actually a wrapper around the Apollo Client useLazyQuery hook and the mutations are a wrapper around the useMutation hook. This means that the full APIs for both of those hooks are provided on each and every Jeeny hook. You can find Apollo's documentation on useLazyQuery here and their documentation on useMutation here. This will let you customize options such as fetch policy, caching, error handling, and more.

The hooks can be thought of as a self-documenting API package.

const {
  getItem: {
    query: getItem,
    data,
    loading
  }
} = useItem({
  getItem: {
    options: {
      onCompleted: (data) => dropTheBalloons();
    }
  }
})

useEffect(() => {
  getItem({variables: { id }})
}, [getItem, id])

if (isLoading) {
  return <Loader />
}

const item = data.getItem;

return <div>
  {item.name}
</div>

The following hooks are available for use. useApi is also available to access all of the below hooks at once.

Hook	Record associations
useAppApi	App
useArrivalApi	Arrival, ArrivalDetails, ArrivalRelease, ArrivalDelivery, ArrivalLineItem, ArrivalReleaseLineItem, ArrivalDeliveryLineItem
useBidApi	BidRequest, Bid, BidRequestLineItem, BidLineItem
useCompanyApi	Company
useCompanyUserApi	CompanyUser
useDepartureApi	Departure, DeparturePickList, DeparturePick, DepartureLineItem, DeparturePickListLineItem, DeparturePickLineItem
useDeviceApi	Device
useDynamicContainerApi	DynamicContainer
useEventApi	Event
useFacilityApi	Facility, FacilityDetails
useFacilityItemApi	FacilityItem
useInstructionApi	InstructionTemplate, InstructionExecution, InstructionSubject
useInventoryAreaApi	StorageInventoryArea
useInventoryRecordApi	InventoryRecord, InventoryLog
useItemStorageInventoryAreaLocationApi	ItemStorageInventoryAreaLocation
useItemStorageInventoryAreaRuleApi	ItemStorageInventoryAreaRule
useItemApi	Item, ItemDetails
useItemGroupApi	ItemGroup
useKioskApi	Kiosk
useKitApi	KitTemplate, KitTemplatePart, KitTemplatePartOption, KitTemplateTree, KitTemplateBomEntry
useOperatorApi	Operator, SafeOperator
useProductApi	Product
useStorageInventoryApi	StorageInventory
useStorageInventoryAreaLocationApi	StorageInventoryAreaLocation, StorageInventoryAreaLocationPayload
useStorageInventoryAreaRuleApi	StorageInventoryAreaRule
useSupplierApi	Supplier
useSupplierItemApi	SupplierItem
useTeamApi	Team

React SDK

If you're looking for a more full featured React SDK you might be interested in this. Table, form, and action components are provided (fully typed and validated). Check it out here.