feat: add medusa-react (#913)

packages/medusa-react/src/hooks/carts/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries"
+export * from "./mutations"

packages/medusa-react/src/hooks/carts/mutations.ts

@@ -0,0 +1,156 @@
+import {
+  StoreCartsRes,
+  StoreCompleteCartRes,
+  StorePostCartReq,
+  StorePostCartsCartPaymentSessionReq,
+  StorePostCartsCartPaymentSessionUpdateReq,
+  StorePostCartsCartReq,
+  StorePostCartsCartShippingMethodReq,
+} from "@medusajs/medusa"
+import { useMutation, UseMutationOptions } from "react-query"
+import { useMedusa } from "../../contexts/medusa"
+
+export const useCreateCart = (
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    StorePostCartReq | undefined
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data?: StorePostCartReq | undefined) => client.carts.create(data),
+    options
+  )
+}
+
+export const useUpdateCart = (
+  cartId: string,
+  options?: UseMutationOptions<StoreCartsRes, Error, StorePostCartsCartReq>
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostCartsCartReq) => client.carts.update(cartId, data),
+    options
+  )
+}
+
+export const useCompleteCart = (
+  cartId: string,
+  options?: UseMutationOptions<StoreCompleteCartRes, Error>
+) => {
+  const { client } = useMedusa()
+  return useMutation(() => client.carts.complete(cartId), options)
+}
+
+export const useCreatePaymentSession = (
+  cartId: string,
+  options?: UseMutationOptions<StoreCartsRes, Error>
+) => {
+  const { client } = useMedusa()
+  return useMutation(() => client.carts.createPaymentSessions(cartId), options)
+}
+
+export const useUpdatePaymentSession = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    { provider_id: string } & StorePostCartsCartPaymentSessionUpdateReq
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (
+      data: { provider_id: string } & StorePostCartsCartPaymentSessionUpdateReq
+    ) => client.carts.updatePaymentSession(cartId, data.provider_id, data),
+    options
+  )
+}
+
+type RefreshPaymentSessionMutationData = {
+  provider_id: string
+}
+
+export const useRefreshPaymentSession = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    RefreshPaymentSessionMutationData
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    ({ provider_id }: RefreshPaymentSessionMutationData) =>
+      client.carts.refreshPaymentSession(cartId, provider_id),
+    options
+  )
+}
+
+type SetPaymentSessionMutationData = { provider_id: string }
+
+export const useSetPaymentSession = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    SetPaymentSessionMutationData
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostCartsCartPaymentSessionReq) =>
+      client.carts.setPaymentSession(cartId, data),
+    options
+  )
+}
+
+export const useAddShippingMethodToCart = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    StorePostCartsCartShippingMethodReq
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostCartsCartShippingMethodReq) =>
+      client.carts.addShippingMethod(cartId, data),
+    options
+  )
+}
+
+type DeletePaymentSessionMutationData = {
+  provider_id: string
+}
+
+export const useDeletePaymentSession = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    DeletePaymentSessionMutationData
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    ({ provider_id }: DeletePaymentSessionMutationData) =>
+      client.carts.deletePaymentSession(cartId, provider_id),
+    options
+  )
+}
+
+export const useStartCheckout = (
+  options?: UseMutationOptions<StoreCartsRes["cart"], Error, StorePostCartReq>
+) => {
+  const { client } = useMedusa()
+  const mutation = useMutation(async (data?: StorePostCartReq) => {
+    const { cart } = await client.carts.create(data)
+    const res = await client.carts.createPaymentSessions(cart.id)
+    return res.cart
+  }, options)
+
+  return mutation
+}

packages/medusa-react/src/hooks/carts/queries.ts

@@ -0,0 +1,28 @@
+import { makeKeysFactory } from "./../utils/index"
+import { StoreCartsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts/medusa"
+import { UseQueryOptionsWrapper } from "../../types"
+
+const CARTS_QUERY_KEY = `carts` as const
+
+export const cartKeys = makeKeysFactory(CARTS_QUERY_KEY)
+type CartQueryKey = typeof cartKeys
+
+export const useGetCart = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreCartsRes>,
+    Error,
+    ReturnType<CartQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    cartKeys.detail(id),
+    () => client.carts.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/collections/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/collections/queries.ts

@@ -0,0 +1,50 @@
+import {
+  StoreCollectionsListRes,
+  StoreCollectionsRes,
+  StoreGetCollectionsParams,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts/medusa"
+import { UseQueryOptionsWrapper } from "./../../types"
+import { makeKeysFactory } from "./../utils/index"
+
+const COLLECTIONS_QUERY_KEY = `collections` as const
+
+export const collectionKeys = makeKeysFactory(COLLECTIONS_QUERY_KEY)
+
+type CollectionQueryKey = typeof collectionKeys
+
+export const useCollection = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreCollectionsRes>,
+    Error,
+    ReturnType<CollectionQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    collectionKeys.detail(id),
+    () => client.collections.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useCollections = (
+  query?: StoreGetCollectionsParams,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreCollectionsListRes>,
+    Error,
+    ReturnType<CollectionQueryKey["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    collectionKeys.list(query),
+    () => client.collections.list(query),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/customers/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries"
+export * from "./mutations"

packages/medusa-react/src/hooks/customers/mutations.ts

@@ -0,0 +1,32 @@
+import {
+  StoreCustomersRes,
+  StorePostCustomersCustomerReq,
+  StorePostCustomersReq,
+} from "@medusajs/medusa"
+import { useMutation, UseMutationOptions } from "react-query"
+import { useMedusa } from "../../contexts/medusa"
+
+export const useCreateCustomer = (
+  options?: UseMutationOptions<StoreCustomersRes, Error, StorePostCustomersReq>
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostCustomersReq) => client.customers.create(data),
+    options
+  )
+}
+
+export const useUpdateMe = (
+  options?: UseMutationOptions<
+    StoreCustomersRes,
+    Error,
+    { id: string } & StorePostCustomersCustomerReq
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    ({ id, ...data }: { id: string } & StorePostCustomersCustomerReq) =>
+      client.customers.update(data),
+    options
+  )
+}

packages/medusa-react/src/hooks/customers/queries.ts

@@ -0,0 +1,53 @@
+import {
+  StoreCustomersListOrdersRes,
+  StoreCustomersRes,
+  StoreGetCustomersCustomerOrdersParams,
+} from "@medusajs/medusa"
+import { useQuery } from "react-query"
+import { Response } from "@medusajs/medusa-js"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+import { makeKeysFactory } from "./../utils/index"
+
+const CUSTOMERS_QUERY_KEY = `customers` as const
+
+export const customerKeys = {
+  ...makeKeysFactory(CUSTOMERS_QUERY_KEY),
+  orders: (id: string) => [...customerKeys.detail(id), "orders"] as const,
+}
+
+type CustomerQueryKey = typeof customerKeys
+
+export const useMeCustomer = (
+  options?: UseQueryOptionsWrapper<
+    Response<StoreCustomersRes>,
+    Error,
+    ReturnType<CustomerQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    customerKeys.detail("me"),
+    () => client.customers.retrieve(),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useCustomerOrders = (
+  query: StoreGetCustomersCustomerOrdersParams = { limit: 10, offset: 0 },
+  options?: UseQueryOptionsWrapper<
+    Response<StoreCustomersListOrdersRes>,
+    Error,
+    ReturnType<CustomerQueryKey["orders"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    customerKeys.orders("me"),
+    () => client.customers.listOrders(query),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/gift-cards/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/gift-cards/queries.ts

@@ -0,0 +1,29 @@
+import { makeKeysFactory } from "./../utils/index"
+import { StoreGiftCardsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+
+const GIFT_CARDS_QUERY_KEY = `gift_cards` as const
+
+export const giftCardKeys = makeKeysFactory(GIFT_CARDS_QUERY_KEY)
+
+type GiftCardQueryKey = typeof giftCardKeys
+
+export const useGiftCard = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreGiftCardsRes>,
+    Error,
+    ReturnType<GiftCardQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    giftCardKeys.detail(id),
+    () => client.giftCards.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from "./products/"
+export * from "./carts/"
+export * from "./shipping-options/"
+export * from "./regions/"
+export * from "./return-reasons/"
+export * from "./swaps/"
+export * from "./carts/"
+export * from "./orders/"
+export * from "./customers/"
+export * from "./returns/"
+export * from "./gift-cards/"
+export * from "./line-items/"
+export * from "./collections"

packages/medusa-react/src/hooks/line-items/index.ts

@@ -0,0 +1 @@
+export * from "./mutations"

packages/medusa-react/src/hooks/line-items/mutations.ts

@@ -0,0 +1,54 @@
+import {
+  StoreCartsRes,
+  StorePostCartsCartLineItemsReq,
+  StorePostCartsCartLineItemsItemReq,
+} from "@medusajs/medusa"
+import { useMutation, UseMutationOptions } from "react-query"
+import { useMedusa } from "../../contexts"
+
+export const useCreateLineItem = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    StorePostCartsCartLineItemsReq
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostCartsCartLineItemsReq) =>
+      client.carts.lineItems.create(cartId, data),
+    options
+  )
+}
+
+export const useUpdateLineItem = (
+  cartId: string,
+  options?: UseMutationOptions<
+    StoreCartsRes,
+    Error,
+    StorePostCartsCartLineItemsItemReq & { lineId: string }
+  >
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    ({
+      lineId,
+      ...data
+    }: StorePostCartsCartLineItemsItemReq & { lineId: string }) =>
+      client.carts.lineItems.update(cartId, lineId, data),
+    options
+  )
+}
+
+export const useDeleteLineItem = (
+  cartId: string,
+  options?: UseMutationOptions<StoreCartsRes, Error, { lineId: string }>
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    ({ lineId }: { lineId: string }) =>
+      client.carts.lineItems.delete(cartId, lineId),
+    options
+  )
+}

packages/medusa-react/src/hooks/orders/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/orders/queries.ts

@@ -0,0 +1,71 @@
+import { makeKeysFactory } from "./../utils/index"
+import { StoreOrdersRes, StoreGetOrdersParams } from "@medusajs/medusa"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+import { Response } from "@medusajs/medusa-js"
+
+const ORDERS_QUERY_KEY = `orders` as const
+
+export const orderKeys = {
+  ...makeKeysFactory<typeof ORDERS_QUERY_KEY, StoreGetOrdersParams>(
+    ORDERS_QUERY_KEY
+  ),
+  cart: (cartId: string) => [...orderKeys.details(), "cart", cartId] as const,
+}
+
+type OrderQueryKey = typeof orderKeys
+
+export const useOrder = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreOrdersRes>,
+    Error,
+    ReturnType<OrderQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    orderKeys.detail(id),
+    () => client.orders.retrieve(id),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}
+
+export const useCartOrder = (
+  cartId: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreOrdersRes>,
+    Error,
+    ReturnType<OrderQueryKey["cart"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    orderKeys.cart(cartId),
+    () => client.orders.retrieveByCartId(cartId),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}
+
+export const useOrderLookup = (
+  query: StoreGetOrdersParams,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreOrdersRes>,
+    Error,
+    ReturnType<OrderQueryKey["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    orderKeys.list(query),
+    () => client.orders.lookupOrder(query),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/products/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/products/queries.ts

@@ -0,0 +1,53 @@
+import { Response } from "@medusajs/medusa-js"
+import {
+  StoreGetProductsParams,
+  StoreProductsListRes,
+  StoreProductsRes,
+} from "@medusajs/medusa"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+import { makeKeysFactory } from "./../utils/index"
+
+const PRODUCTS_QUERY_KEY = `products` as const
+
+export const productKeys = makeKeysFactory<
+  typeof PRODUCTS_QUERY_KEY,
+  StoreGetProductsParams
+>(PRODUCTS_QUERY_KEY)
+type ProductQueryKey = typeof productKeys
+
+export const useProducts = (
+  query?: StoreGetProductsParams,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreProductsListRes>,
+    Error,
+    ReturnType<ProductQueryKey["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    productKeys.list(query),
+    () => client.products.list(query),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useProduct = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreProductsRes>,
+    Error,
+    ReturnType<ProductQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    productKeys.detail(id),
+    () => client.products.retrieve(id),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/regions/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/regions/queries.ts

@@ -0,0 +1,45 @@
+import { makeKeysFactory } from "./../utils/index"
+import { UseQueryOptionsWrapper } from "../../types"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { StoreRegionsRes, StoreRegionsListRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+
+const REGIONS_QUERY_KEY = `regions` as const
+
+const regionsKey = makeKeysFactory(REGIONS_QUERY_KEY)
+
+type RegionQueryType = typeof regionsKey
+
+export const useRegions = (
+  options?: UseQueryOptionsWrapper<
+    Response<StoreRegionsListRes>,
+    Error,
+    ReturnType<RegionQueryType["lists"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    regionsKey.lists(),
+    () => client.regions.list(),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useRegion = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreRegionsRes>,
+    Error,
+    ReturnType<RegionQueryType["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    regionsKey.detail(id),
+    () => client.regions.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/return-reasons/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/return-reasons/queries.ts

@@ -0,0 +1,48 @@
+import { makeKeysFactory } from "./../utils/index"
+import {
+  StoreReturnReasonsListRes,
+  StoreReturnReasonsRes,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+
+const RETURNS_REASONS_QUERY_KEY = `return_reasons` as const
+
+const returnReasonsKey = makeKeysFactory(RETURNS_REASONS_QUERY_KEY)
+
+type ReturnReasonsQueryKey = typeof returnReasonsKey
+
+export const useReturnReasons = (
+  options?: UseQueryOptionsWrapper<
+    Response<StoreReturnReasonsListRes>,
+    Error,
+    ReturnType<ReturnReasonsQueryKey["lists"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    returnReasonsKey.lists(),
+    () => client.returnReasons.list(),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useReturnReason = (
+  id: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreReturnReasonsRes>,
+    Error,
+    ReturnType<ReturnReasonsQueryKey["detail"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    returnReasonsKey.detail(id),
+    () => client.returnReasons.retrieve(id),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/returns/index.ts

@@ -0,0 +1 @@
+export * from "./mutations"

packages/medusa-react/src/hooks/returns/mutations.ts

@@ -0,0 +1,13 @@
+import { StoreReturnsRes, StorePostReturnsReq } from "@medusajs/medusa"
+import { useMutation, UseMutationOptions } from "react-query"
+import { useMedusa } from "../../contexts"
+
+export const useCreateReturn = (
+  options?: UseMutationOptions<StoreReturnsRes, Error, StorePostReturnsReq>
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostReturnsReq) => client.returns.create(data),
+    options
+  )
+}

packages/medusa-react/src/hooks/shipping-options/index.ts

@@ -0,0 +1 @@
+export * from "./queries"

packages/medusa-react/src/hooks/shipping-options/queries.ts

@@ -0,0 +1,52 @@
+import { makeKeysFactory } from "./../utils/index"
+import { UseQueryOptionsWrapper } from "../../types"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import {
+  StoreShippingOptionsListRes,
+  StoreGetShippingOptionsParams,
+} from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+
+const SHIPPING_OPTION_QUERY_KEY = `shipping_options` as const
+
+const shippingOptionKey = {
+  ...makeKeysFactory(SHIPPING_OPTION_QUERY_KEY),
+  cart: (cartId: string) => [...shippingOptionKey.all, "cart", cartId] as const,
+}
+
+type ShippingOptionQueryKey = typeof shippingOptionKey
+
+export const useShippingOptions = (
+  query?: StoreGetShippingOptionsParams,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreShippingOptionsListRes>,
+    Error,
+    ReturnType<ShippingOptionQueryKey["list"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    shippingOptionKey.list(query),
+    async () => client.shippingOptions.list(query),
+    options
+  )
+  return { ...data, ...rest } as const
+}
+
+export const useCartShippingOptions = (
+  cartId: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreShippingOptionsListRes>,
+    Error,
+    ReturnType<ShippingOptionQueryKey["cart"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    shippingOptionKey.cart(cartId),
+    async () => client.shippingOptions.listCartOptions(cartId),
+    options
+  )
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/swaps/index.ts

@@ -0,0 +1,2 @@
+export * from "./queries"
+export * from "./mutations"

packages/medusa-react/src/hooks/swaps/mutations.ts

@@ -0,0 +1,13 @@
+import { StoreSwapsRes, StorePostSwapsReq } from "@medusajs/medusa"
+import { useMutation, UseMutationOptions } from "react-query"
+import { useMedusa } from "../../contexts"
+
+export const useCreateSwap = (
+  options?: UseMutationOptions<StoreSwapsRes, Error, StorePostSwapsReq>
+) => {
+  const { client } = useMedusa()
+  return useMutation(
+    (data: StorePostSwapsReq) => client.swaps.create(data),
+    options
+  )
+}

packages/medusa-react/src/hooks/swaps/queries.ts

@@ -0,0 +1,33 @@
+import { makeKeysFactory } from "./../utils/index"
+import { StoreSwapsRes } from "@medusajs/medusa"
+import { Response } from "@medusajs/medusa-js"
+import { useQuery } from "react-query"
+import { useMedusa } from "../../contexts"
+import { UseQueryOptionsWrapper } from "../../types"
+
+const SWAPS_QUERY_KEY = `swaps` as const
+
+const swapKey = {
+  ...makeKeysFactory(SWAPS_QUERY_KEY),
+  cart: (cartId: string) => [...swapKey.all, "cart", cartId] as const,
+}
+
+type SwapQueryKey = typeof swapKey
+
+export const useCartSwap = (
+  cartId: string,
+  options?: UseQueryOptionsWrapper<
+    Response<StoreSwapsRes>,
+    Error,
+    ReturnType<SwapQueryKey["cart"]>
+  >
+) => {
+  const { client } = useMedusa()
+  const { data, ...rest } = useQuery(
+    swapKey.cart(cartId),
+    () => client.swaps.retrieveByCartId(cartId),
+    options
+  )
+
+  return { ...data, ...rest } as const
+}

packages/medusa-react/src/hooks/utils/index.ts

@@ -0,0 +1,62 @@
+import * as React from "react"
+
+type TQueryKey<TKey, TListQuery = any, TDetailQuery = string> = {
+  all: [TKey]
+  lists: () => [...TQueryKey<TKey>["all"], "list"]
+  list: (
+    query?: TListQuery
+  ) => [
+    ...ReturnType<TQueryKey<TKey>["lists"]>,
+    { query: TListQuery | undefined }
+  ]
+  details: () => [...TQueryKey<TKey>["all"], "detail"]
+  detail: (
+    id: TDetailQuery
+  ) => [...ReturnType<TQueryKey<TKey>["details"]>, TDetailQuery]
+}
+
+export const makeKeysFactory = <
+  T,
+  TListQueryType = any,
+  TDetailQueryType = string
+>(
+  globalKey: T
+) => {
+  const queryKeyFactory: TQueryKey<T, TListQueryType, TDetailQueryType> = {
+    all: [globalKey],
+    lists: () => [...queryKeyFactory.all, "list"],
+    list: (query?: TListQueryType) => [...queryKeyFactory.lists(), { query }],
+    details: () => [...queryKeyFactory.all, "detail"],
+    detail: (id: TDetailQueryType) => [...queryKeyFactory.details(), id],
+  }
+  return queryKeyFactory
+}
+
+export const useLocalStorage = (key: string, initialState: string) => {
+  const [item, setItem] = React.useState(() => {
+    try {
+      const item =
+        typeof window !== "undefined" && window.localStorage.getItem(key)
+
+      return item || initialState
+    } catch (err) {
+      return initialState
+    }
+  })
+
+  const save = (data: string) => {
+    setItem(data)
+
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(key, data)
+    }
+  }
+
+  const remove = () => {
+    if (typeof window !== "undefined") {
+      window.localStorage.removeItem(key)
+    }
+  }
+
+  return [item, save, remove] as const
+}