Customers

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

All hooks listed require user authentication.

Related Guide: How to manage customers.

Mutations

useAdminCreateCustomer

This hook creates a customer as an admin.

Example

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

type CustomerData = {
  first_name: string
  last_name: string
  email: string
  password: string
}

const CreateCustomer = () => {
  const createCustomer = useAdminCreateCustomer()
  // ...

  const handleCreate = (customerData: CustomerData) => {
    createCustomer.mutate(customerData, {
      onSuccess: ({ customer }) => {
        console.log(customer.id)
      }
    })
  }

  // ...
}

export default CreateCustomer

Mutation Function Parameters

AdminPostCustomersReqAdminPostCustomersReqRequired

The details of the customer to create.

Mutation Function Returned Data

AdminCustomersResAdminCustomersResRequired

The customer's details.

useAdminUpdateCustomer

This hook updates a customer's details.

Example

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

type CustomerData = {
  first_name: string
  last_name: string
  email: string
  password: string
}

type Props = {
  customerId: string
}

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

  const handleUpdate = (customerData: CustomerData) => {
    updateCustomer.mutate(customerData)
  }

  // ...
}

export default Customer

Hook Parameters

idstringRequired

The customer's ID.

Mutation Function Parameters

AdminPostCustomersCustomerReqAdminPostCustomersCustomerReqRequired

The details of the customer to update.

Mutation Function Returned Data

AdminCustomersResAdminCustomersResRequired

The customer's details.

---

Queries

useAdminCustomers

This hook retrieves a list of Customers. The customers can be filtered by fields such as q or groups. The customers can also be paginated.

Example

To list customers:

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

const Customers = () => {
  const { customers, isLoading } = useAdminCustomers()

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {customers && !customers.length && (
        <span>No customers</span>
      )}
      {customers && customers.length > 0 && (
        <ul>
          {customers.map((customer) => (
            <li key={customer.id}>{customer.first_name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default Customers

You can specify relations to be retrieved within each customer. In addition, by default, only the first 50 records are retrieved. You can control pagination by specifying the limit and offset properties:

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

const Customers = () => {
  const { 
    customers, 
    limit,
    offset,
    isLoading
  } = useAdminCustomers({
    expand: "billing_address",
    limit: 20,
    offset: 0
  })

  return (
    <div>
      {isLoading && <span>Loading...</span>}
      {customers && !customers.length && (
        <span>No customers</span>
      )}
      {customers && customers.length > 0 && (
        <ul>
          {customers.map((customer) => (
            <li key={customer.id}>{customer.first_name}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default Customers

Hook Parameters

queryAdminGetCustomersParams

Filters and pagination configurations to apply on the retrieved customers.

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.

customersCustomer[]Required

An array of customer details.

useAdminCustomer

This hook retrieves the details of a customer.

Example

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

type Props = {
  customerId: string
}

const Customer = ({ customerId }: Props) => {
  const { customer, isLoading } = useAdminCustomer(
    customerId
  )

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

export default Customer

Hook Parameters

idstringRequired

The customer's ID.

Query Returned Data

customerCustomerRequired

Customer details.