Customers

Queries and Mutations listed here are used to send requests to the Store Customer API Routes.

A customer can register and manage their information such as addresses, orders, payment methods, and more.

Related Guide: How to implement customer profiles in your storefront.

Mutations

useCreateCustomer

This hook registers a new customer. This will also automatically authenticate the customer and set their login session in the response Cookie header. Subsequent requests sent with other hooks are sent with the Cookie session automatically.

Example

import React from "react"
import { useCreateCustomer } from "medusa-react"

const RegisterCustomer = () => {
  const createCustomer = useCreateCustomer()
  // ...

  const handleCreate = (
    customerData: {
      first_name: string
      last_name: string
      email: string
      password: string
    }
  ) => {
    // ...
    createCustomer.mutate(customerData, {
      onSuccess: ({ customer }) => {
        console.log(customer.id)
      }
    })
  }

  // ...
}

export default RegisterCustomer

Mutation Function Parameters

StorePostCustomersReqStorePostCustomersReqRequired

The details of the customer to create.

Mutation Function Returned Data

StoreCustomersResStoreCustomersResRequired

The customer's details.

useUpdateMe

This hook updates the logged-in customer's details. This hook requires customer authentication.

Example

import React from "react"
import { useUpdateMe } from "medusa-react"

type Props = {
  customerId: string
}

const Customer = ({ customerId }: Props) => {
  const updateCustomer = useUpdateMe()
  // ...

  const handleUpdate = (
    firstName: string
  ) => {
    // ...
    updateCustomer.mutate({
      id: customerId,
      first_name: firstName,
    }, {
      onSuccess: ({ customer }) => {
        console.log(customer.first_name)
      }
    })
  }

  // ...
}

export default Customer

Mutation Function Parameters

UpdateMeReqUpdateMeReqRequired

Mutation Function Returned Data

StoreCustomersResStoreCustomersResRequired

The customer's details.

---

Queries

useMeCustomer

This hook retrieves the logged-in customer's details. It requires customer authentication.

Example

import React from "react"
import { useMeCustomer } from "medusa-react"

const Customer = () => {
  const { customer, isLoading } = useMeCustomer()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {customer && (
        <span>{customer.first_name} {customer.last_name}</span>
      )}
    </div>
  )
}

export default Customer

Query Returned Data

customerOmit<Customer, "password_hash">Required

Customer details.

useCustomerOrders

This hook retrieves a list of the logged-in customer's orders. The orders can be filtered by fields such as status or fulfillment_status. The orders can also be paginated. This hook requires customer authentication.

Example

import React from "react"
import { useCustomerOrders } from "medusa-react"

const Orders = () => {
  // refetch a function that can be used to
  // re-retrieve orders after the customer logs in
  const { orders, isLoading } = useCustomerOrders()

  return (
    <div>
      {isLoading && <span>Loading orders...</span>}
      {orders?.length && (
        <ul>
          {orders.map((order) => (
            <li key={order.id}>{order.display_id}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default Orders

Hook Parameters

queryStoreGetCustomersCustomerOrdersParamsRequired

Filters and pagination configurations to apply on the retrieved orders.

Query Returned Data

limitnumberRequired

The maximum number of items that can be returned in the list.

offsetnumberRequired

The number of items skipped before the returned items in the list.

countnumberRequired

The total number of items available.

ordersOrder[]Required

An array of orders details.