Medusa Provider Overview

useMedusa

This hook gives you access to context of MedusaProvider. It's useful if you want access to the Medusa JS Client.

Example

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

const CustomerLogin = () => {
  const { client } = useMedusa()
  const { refetch: refetchCustomer } = useMeCustomer()
  // ...

  const handleLogin = (
    email: string,
    password: string
  ) => {
    client.auth.authenticate({
      email,
      password
    })
    .then(() => {
      // customer is logged-in successfully
      refetchCustomer()
    })
    .catch(() => {
      // an error occurred.
    })
  }

  // ...
}

Returns

clientMedusaRequired

The Medusa JS Client instance.

---

MedusaProvider

The MedusaProvider must be used at the highest possible point in the React component tree. Using any of medusa-react's hooks or providers requires having MedusaProvider higher in the component tree.

Example

src/App.ts

import { MedusaProvider } from "medusa-react"
import Storefront from "./Storefront"
import { QueryClient } from "@tanstack/react-query"
import React from "react"

const queryClient = new QueryClient()

const App = () => {
  return (
    <MedusaProvider
      queryClientProviderProps={{ client: queryClient }}
      baseUrl="http://localhost:9000"
    >
      <Storefront />
    </MedusaProvider>
  )
}

export default App

In the example above, you wrap the Storefront component with the MedusaProvider. Storefront is assumed to be the top-level component of your storefront, but you can place MedusaProvider at any point in your tree. Only children of MedusaProvider can benefit from its hooks.

The Storefront component and its child components can now use hooks exposed by Medusa React.

Parameters

param0MedusaProviderPropsRequired

Props of the provider.

Returns

ElementElementRequired

The MedusaProvider must be used at the highest possible point in the React component tree. Using any of medusa-react's hooks or providers requires having MedusaProvider higher in the component tree.