asyavee/medusa-store
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

docs: remove js client and medusa react references (#8270)

Browse Source
This commit is contained in:
Shahed Nasser
2024-07-26 10:11:37 +03:00
committed by GitHub
parent ebd290b531
commit 157fa3c80f
12 changed files with 2 additions and 179584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

718
www/apps/resources/app/js-client/page.mdx
View File

@@ -1,718 +0,0 @@
import { Table, CodeTabs, CodeTab } from "docs-ui"
export const metadata = {
title: `Medusa JS Client`,
}
# {metadata.title}
<Note type="soon">
Medusa JS Client doesn't support Medusa v2 yet.
</Note>
The [Medusa JS Client](https://www.npmjs.com/package/@medusajs/medusa-js) provides easy access to the Medusa application's REST APIs within TypeScript or JavaScript frontend projects.
For example, if you're creating a storefront with frameworks like Nuxt, you can send requests to the Medusa application using this client.
This reference provides details on the available methods including examples of each.
## Installation
To install the Medusa JS Client run the following command:
```bash npm2yarn
npm install @medusajs/medusa-js
```
---
## Usage
To use the Medusa client, import `Medusa` and initialize the client:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
})
```
Where `MEDUSA_BACKEND_URL` is the URL to your Medusa application. If the `baseUrl` option is not provided, the default Medusa application URL used is `http://localhost:9000`.
After initialization, you can use the client's properties and methods to send requests to the Medusa application.
<Details summaryContent="Troubleshooting: Could not find a declaration file for module '@medusajs/medusa-js'">
If you import `@medusajs/medusa-js` in your code and see the following TypeScript error:
```bash
Could not find a declaration file for module '@medusajs/medusa-js'
```
Make sure to set `moduleResolution` in your `tsconfig.json` to `nodenext` or `node`:
```json title="tsconfig.json"
{
"compilerOptions": {
"moduleResolution": "nodenext",
// ...
},
// ...
}
```
</Details>
## How to Use this Reference
You'll find in the sidebar of this reference names of different resources. These resources are properties in the Medusa client instance you initialize. You can access the methods or nested resources of each of the properties to send requests to the Medusa application.
For example, to create a new customer you can access the [create](/references/js-client/CustomersResource#create) method under the [customers](/references/js-client/CustomersResource) property of your client:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa()
// use method
medusa.customers.create({
// data
})
```
The `customers` resource also has another resource `addresses` nested inside it with its own method that you can access similarly:
```ts
medusa.customers.addresses.addAddress({
// data
})
```
---
## Client Options
The client accepts the following options on initialization:
<Table>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Option</Table.HeaderCell>
<Table.HeaderCell>Description</Table.HeaderCell>
<Table.HeaderCell>Required</Table.HeaderCell>
<Table.HeaderCell>Default</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
`maxRetries`
</Table.Cell>
<Table.Cell>
The number of times a request is retried.
</Table.Cell>
<Table.Cell>
Yes
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
`baseUrl`
</Table.Cell>
<Table.Cell>
A string indicating the url to which requests are made to.
</Table.Cell>
<Table.Cell>
Yes
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
`apiKey`
</Table.Cell>
<Table.Cell>
A string indicating the API key used for authenticating admin requests.
</Table.Cell>
<Table.Cell>
No
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
`publishableApiKey`
</Table.Cell>
<Table.Cell>
{/* TODO add link [Medusa Admin](!user-guide!/settings/developer/api-key-management) */}
A string indicating publishable API key used for storefront requests. You can create a publishable API key either using the Medusa Admin or the [Admin API Routes](https://docs.medusajs.com/api/admin#publishable-api-keys).
</Table.Cell>
<Table.Cell>
No
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
`customHeaders`
</Table.Cell>
<Table.Cell>
An object indicating the headers to attach to every request.
</Table.Cell>
<Table.Cell>
No
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>
`axiosAdapter`
</Table.Cell>
<Table.Cell>
An instance of an [AxiosAdapter](https://github.com/axios/axios/blob/v1.x/lib/adapters/README.md) to use in the underlying Axios client used to send requests to the Medusa application.
</Table.Cell>
<Table.Cell>
No
</Table.Cell>
<Table.Cell>
\-
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
### Example
```ts
const medusa = new Medusa({
maxRetries: 3,
baseUrl: "https://api.example.com",
})
```
---
## Authentication
### JWT Token
You can use a JWT token to authenticate both admin users and customers. Authentication state is managed by the client, which is ideal for Jamstack and mobile applications.
You can authenticate the admin user using the [admin.auth.getToken](/references/js-client/AdminAuthResource#getToken) method, and the customer using the [auth.getToken](/references/js-client/AuthResource.mdx#getToken) method.
Once the user or customer is authenticated successfully, the Medusa client automatically attaches an Authorization Bearer header to all subsequent requests.
For example:
<CodeTabs group="client-authentication-type">
<CodeTab label="Admin User" value="user">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
await medusa.admin.auth.getToken({
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now
```
</CodeTab>
<CodeTab label="Customer" value="customer">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
await medusa.auth.getToken({
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now
```
</CodeTab>
</CodeTabs>
### Cookie Session ID
You can authenticate admin users or customers using cookie session ID.
You can authenticate the admin user using the [admin.auth.createSession](/references/js-client/AdminAuthResource#createSession) method, and the customer using the [auth.authenticate](/references/js-client/AuthResource#authenticate) method.
Once the user or customer is authenticated successfully, the Medusa client sets and attached the session ID in the cookie for all subsequent requests.
For example:
<CodeTabs group="client-authentication-type">
<CodeTab label="Admin User" value="user">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
await medusa.admin.AdminAuthResource.createSession({
email: "user@example.com",
password: "supersecret",
})
// send authenticated requests now
```
</CodeTab>
<CodeTab label="Customer" value="customer">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
await medusa.auth.authenticate({
email: "user@example.com",
password: "user@example.com",
})
// send authenticated requests now
```
</CodeTab>
</CodeTabs>
### API Key
You can authenticate admin users with a personal API Token.
If a user doesn't have a personal API token, create one with the [admin.users.update](/references/js-client/AdminUsersResource#update) method or the [Update User API route](https://docs.medusajs.com/api/admin#users_postusersuser):
<CodeTabs group="client-type">
<CodeTab label="JS Client" value="js-client">
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.users.update(userId, {
api_token,
})
.then(({ user }) => {
console.log(user.api_token)
})
```
</CodeTab>
<CodeTab label="cURL" value="curl">
```bash
curl -L -X POST '<BACKEND_URL>/admin/users/<USER_ID>' \\
-H 'Cookie: connect.sid={sid}' \\
-H 'Content-Type: application/json' \\
--data-raw '{
"api_token": "{api_token}"
}'
```
</CodeTab>
</CodeTabs>
Then, initialize the Medusa client passing it the `apiKey` option:
```ts
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
apiKey: "{api_token}",
})
```
---
## Publishable API Key
Publishable API Keys allow you to send a request to Store API routes with a pre-defined scope. You can associate the publishable API key with one or more resources, such as sales channels, then include the publishable API key in the header of your requests.
The Medusa application infers the scope of the current request based on the publishable API key. At the moment, publishable API keys only work with sales channels.
It's highly recommended to create a publishable API key and pass it as an initialization option of the Medusa client.
You can learn more about publishable API keys and how to use them in [this documentation](../commerce-modules/sales-channel/publishable-api-keys/page.mdx).
### Create a Publishable API Key
{/* TODO add link [Medusa Admin](!user-guide!/settings/developer/api-key-management) */}
You can create a publishable API key either using the [Admin API Routes](https://docs.medusajs.com/api/admin#publishable-api-keys), or using the Medusa Admin.
### Use a Publishable API Key
To use the publishable API key, pass it as an option to the Medusa client:
```ts
const medusa = new Medusa({
maxRetries: 3,
baseUrl: "https://api.example.com",
publishableApiKey,
})
```
---
## HTTP Compression
If you've enabled HTTP Compression in your Medusa configurations, and you want to disable it for some requests, you can pass the `x-no-compression` header in the `customHeaders` parameter which is available in all methods.
For example:
```ts
medusa.products.list({}, {
"x-no-compression": true,
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
---
## Expanding Fields
In many methods you'll find an `expand` property that can be accepted within one of the method's parameters. You can use the `expand` property to unpack an entity's relations and return them in the response.
<Note type="warning">
The relations you pass to `expand` replace any relations that are expanded by default in the request.
</Note>
### Expanding One Relation
For example, when you retrieve products, you can retrieve their collection by passing to the `expand` query parameter the value `collection`:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
expand: "collection",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
### Expanding Multiple Relations
You can expand more than one relation by separating the relations in the `expand` query parameter with a comma.
For example, to retrieve both the variants and the collection of products, pass to the `expand` query parameter the value `variants,collection`:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
expand: "variants,collection",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
### Prevent Expanding Relations
Some requests expand relations by default. You can prevent that by passing
an empty expand value to retrieve an entity without any extra relations.
For example:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
expand: "",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
This would retrieve each product with only its properties, without any
relations like `collection`.
---
## Selecting Fields
In many methods you'll find a `fields` property that can be accepted within one of the method's parameters. You can use the `fields` property to specify which
fields in the entity should be returned in the response.
<Note type="warning">
If you pass a `fields` query parameter, only the fields you
pass in the value along with the `id` of the entity will be returned in the
response.
</Note>
The `fields` query parameter does not affect the expanded relations. You'll have to use the [Expand parameter](#expanding-fields) instead.
### Selecting One Field
For example, when you retrieve a list of products, you can retrieve only the titles of the products by passing `title` as a value to the `fields` query parameter:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
fields: "title",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
As mentioned above, the expanded relations such as `variants` will still be returned as they're not affected by the `fields` parameter.
You can ensure that only the `title` field is returned by passing an empty value to the `expand` query parameter. For example:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
fields: "title",
expand: "",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
### Selecting Multiple Fields
You can pass more than one field by separating the field names in the `fields` query parameter with a comma.
For example, to select the `title` and `handle` of products:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
fields: "title,handle",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
### Retrieve Only the ID
You can pass an empty `fields` query parameter to return only the ID of an entity.
For example:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
fields: "",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
You can also pair with an empty `expand` query parameter to ensure that the
relations aren't retrieved as well. For example:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
fields: "",
expand: "",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
---
## Pagination
### Query Parameters
In listing methods, such as list customers or list products, you can control the pagination using the query parameters `limit` and `offset`.
`limit` is used to specify the maximum number of items that can be return in the response. `offset` is used to specify how many items to skip before returning the resulting entities.
You can use the `offset` query parameter to change between pages. For example, if the limit is `50`, at page one the offset should be `0`; at page two the offset should be `50`, and so on.
For example, to limit the number of products returned in the list products method:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
limit: 5,
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
### Response Fields
In the response of listing methods, aside from the entities retrieved,
there are three pagination-related fields returned:
- `limit`: the maximum number of items that can be returned in the response.
- `offset`: the number of items that were skipped before the entities in the result.
- `count`: the total number of available items of this entity. It can be used to determine how many pages are there.
For example, if the `count` is 100 and the `limit` is 50, you can divide the `count` by the `limit` to get the number of pages: `100/50 = 2 pages`.
### Sort Order
The `order` field available on methods supporting pagination allows you to sort the retrieved items by an attribute of that item. For example, you can sort products by their `created_at` attribute by setting `order` to `created_at`:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
order: "created_at",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
By default, the sort direction will be ascending. To change it to descending, pass a dash (`-`) before the attribute name. For example:
```ts
import Medusa from "@medusajs/medusa-js"
const medusa = new Medusa({
baseUrl: MEDUSA_BACKEND_URL,
maxRetries: 3,
})
// must be previously logged in or use api token
medusa.admin.products.list({
order: "-created_at",
})
.then(({ products, limit, offset, count }) => {
console.log(products.length)
})
```
This sorts the products by their `created_at` attribute in the descending order.

808
www/apps/resources/app/medusa-react/page.mdx
View File

@@ -1,808 +0,0 @@
import { Table, CodeTabs, CodeTab } from "docs-ui"
export const metadata = {
title: `Medusa React`,
}
# {metadata.title}
<Note type="soon">
Medusa JS Client doesn't support Medusa v2 yet.
</Note>
[Medusa React](https://www.npmjs.com/package/medusa-react) is a React library that provides a set of utilities and hooks for interacting seamlessly with the Medusa backend.
For example, if you're creating a storefront with frameworks like Nuxt, you can send requests to the backend using this client. You can also use it in your Medusa Admin customizations.
This reference provides details on the available hooks, providers, and utilities, including examples of each.
## Installation
In the directory holding your React-based storefront or admin dashboard, run the following command to install Medusa React:
```bash npm2yarn
npm install medusa-react @tanstack/react-query@4.22 @medusajs/medusa
```
In addition to the `medusa-react` library, you need the following libraries:
1. `@tanstack/react-query`: `medusa-react` is built on top of [Tanstack Query v4.22](https://tanstack.com/query/v4/docs/react/overview). You’ll learn later in this reference how you can use Mutations and Queries with Medusa React.
2. `@medusajs/medusa`: The core Medusa package. This is used to import types used by Medusa React and while developing with it.
<Note>
Part of the Medusa roadmap is to move the types into a separate package, removing the need to install the core Medusa package in your storefront or admin dashboard. You can check other items on our roadmap in [GitHub Discussions](https://github.com/medusajs/medusa/discussions/categories/roadmap).
</Note>
---
## Usage
To use the hooks exposed by Medusa React, include the `MedusaProvider` somewhere up in your component tree.
The `MedusaProvider` requires two props:
1. `baseUrl`: The URL to your Medusa backend
2. `queryClientProviderProps`: An object used to set the Tanstack Query client. The object requires a `client` property, which should be an instance of [QueryClient](https://tanstack.com/query/v4/docs/react/reference/QueryClient).
Learn about other optional props in [this reference](/references/medusa-react/providers/medusa)
For example:
```tsx title="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. So, the `Storefront` component and its child components can now use hooks exposed by Medusa React.
<Details summaryContent="Troubleshooting: Could not find a declaration file for module 'medusa-react'">
If you import `medusa-react` in your code and see the following TypeScript error:
```bash
Could not find a declaration file for module 'medusa-react'
```
Make sure to set `moduleResolution` in your `tsconfig.json` to `nodenext` or `node`:
```json title="tsconfig.json"
{
"compilerOptions": {
"moduleResolution": "nodenext",
// ...
},
// ...
}
```
</Details>
## How to Use this Reference
You'll find in the sidebar three main categories to explore:
- Hooks: Includes all hooks used to send requests to the backend. Hooks are also split into Admin hooks that send requests to the admin, and Store hooks, that send requests to the store.
- Providers: Includes React providers helpful for your development using Medusa React.
- Utilities: Utility functions that are mainly useful for displaying product and variant pricing.
---
## Queries and Mutations
Since Medusa React is built on top of Tanstack Queries, hooks can either be queries or mutations.
### Queries
To fetch data from the Medusa backend (in other words, perform `GET` requests), you can use [Queries](https://tanstack.com/query/v4/docs/react/guides/queries).
Query hooks simply wrap around Tanstack Query's `useQuery` hook to fetch data from your Medusa backend.
For example, to fetch products from your Medusa backend:
```tsx title="src/Products.ts"
import { Product } from "@medusajs/medusa"
import { useProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useProducts()
return isLoading ? (
<div>
Loading...
</div>
) : (
<ul>
{products?.map((product: Product) => (
<li key={product.id}>
{product.title}
</li>
))}
</ul>
)
}
export default Products
```
In the example above, you import the `useProducts` hook from `medusa-react`.
This hook, and every other query hook exposed by `medusa-react`, returns everything that `useQuery` [returns in Tanstack Query](https://tanstack.com/query/v4/docs/react/reference/useQuery), except for the `data` field. Instead of the `data` field, the response data is flattened and is part of the hooks’ returned fields (see `products` in the example above).
You can learn more about using queries in [Tanstack Query’s documentation](https://tanstack.com/query/v4/docs/react/guides/queries).
### Mutations
To create, update, or delete data on the Medusa backend (in other words, perform `POST`, `PUT`, and `DELETE` requests), you can use [Mutations](https://tanstack.com/query/v4/docs/react/guides/mutations).
Mutation hooks wrap around Tanstack Query's `useMutation` to mutate data on your Medusa backend.
For example, to create a cart:
```tsx title="src/Cart.ts"
import { useCreateCart } from "medusa-react"
const Cart = () => {
const createCart = useCreateCart()
const handleClick = () => {
createCart.mutate({}) // create an empty cart
}
return (
<div>
{createCart.isLoading && <div>Loading...</div>}
{!createCart.data?.cart && (
<button onClick={handleClick}>
Create cart
</button>
)}
{createCart.data?.cart?.id && (
<div>Cart ID: {createCart.data?.cart.id}</div>
)}
</div>
)
}
export default Cart
```
In the example above, you import the `useCreateCart` hook from `medusa-react`. This hook, and every other mutation hook exposed by `medusa-react`, returns everything that [useMutation](https://tanstack.com/query/v4/docs/react/reference/useMutation) returns. You can also pass the same options you would pass to `useMutation` to mutation hooks exposed by `medusa-react`.
To create a cart, you call the `createCart.mutate` method. In the underlying logic, this method sends a `POST` request to the Medusa backend to create a cart.
If the request accepts any parameters, they can be passed as parameters to the `mutate` request. For example:
```ts
createCart.mutate({
region_id,
})
```
Instead of using `mutate`, you can use `mutateAsync` to receive a Promise that resolves on success or throws on error.
Learn more about how you can use mutations in [Tanstack Query’s documentation](https://tanstack.com/query/v4/docs/react/guides/mutations).
---
## Authentication
### Admin Authentication
There are two ways to authenticate an admin user:
1. Using the [useAdminLogin hook](/references/medusa-react/hooks/admin/auth#useadminlogin). This hook tries to authenticate the user by their email and password credential and, if successful, attaches the cookie session ID to subsequent requests.
2. Using the `apiKey` option of the [MedusaProvider](/references/medusa-react/providers/medusa#medusaprovider) if the admin has an API key. If the admin doesn't have an API key, you can create one using the [useAdminUpdateUser hook](/references/medusa-react/hooks/admin/users#useAdminUpdateUser) or the [Update User API route](https://docs.medusajs.com/api/admin#users_postusersuser).
For example:
<CodeTabs group="admin-auth">
<CodeTab label="useAdminLogin hook" value="useadminlogin">
```ts
import React from "react"
import { useAdminLogin } from "medusa-react"
const Login = () => {
const adminLogin = useAdminLogin()
// ...
const handleLogin = () => {
adminLogin.mutate({
email: "user@example.com",
password: "supersecret",
}, {
onSuccess: ({ user }) => {
console.log(user)
// send authenticated requests now
}
})
}
// ...
}
export default Login
```
</CodeTab>
<CodeTab label="apikey Option" value="apikey">
```tsx
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"
apiKey={process.env.API_KEY}
>
<Storefront />
</MedusaProvider>
)
}
export default App
```
</CodeTab>
</CodeTabs>
### Customer Authentication
To authenticate a customer, use the [useMedusa hook](/references/medusa-react/providers/medusa#usemedusa) to access the underlying [Medusa JS Client](../js-client/page.mdx) instance and use one of its [authentication methods](../js-client/page.mdx#authentication), such as the [authenticate](/references/js-client/AuthResource#authenticate) method.
For example:
```tsx
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
// send authenticated requests now
refetchCustomer()
})
.catch(() => {
// an error occurred.
})
}
// ...
}
```
<Note>
The refetch method is available through [Tanstack Query's useQuery hook](https://tanstack.com/query/v4/docs/react/reference/useQuery). It allows you to refetch data if a change occurs. In this case, you refetch the logged-in customer after authentication.
</Note>
---
## Publishable API Key
Publishable API Keys allow you to send a request to Store API routes with a pre-defined scope. You can associate the publishable API key with one or more resources, such as sales channels, then include the publishable API key in the header of your requests.
The Medusa backend will infer the scope of the current request based on the publishable API key. At the moment, publishable API keys only work with sales channels.
It's highly recommended to create a publishable API key and pass it as an initialization option of the Medusa client.
You can learn more about publishable API keys and how to use them in [this documentation](../commerce-modules/sales-channel/publishable-api-keys/page.mdx).
### Create a Publishable API Key
{/* TODO add link [Medusa Admin](!user-guide!/settings/developer/api-key-management) */}
You can create a publishable API key either using the [Admin API Routes](https://docs.medusajs.com/api/admin#publishable-api-keys), or using the Medusa Admin.
### Use a Publishable API Key
To use the publishable API key, pass it as a prop to the [MedusaProvider](/references/medusa-react/providers/medusa#medusaprovider).
For example:
```tsx
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"
publishableApiKey={process.env.PUB_API_KEY}
>
<Storefront />
</MedusaProvider>
)
}
export default App
```
---
## HTTP Compression
If you've enabled HTTP Compression in your Medusa backend configurations, and you want to disable it for your requests with Medusa React, you can pass the `x-no-compression` header in the `customHeaders` prop of the [MedusaProvider](/references/medusa-react/providers/medusa#medusaprovider).
For example:
```tsx
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"
customHeaders={{
"x-no-compression": true,
}}
>
<Storefront />
</MedusaProvider>
)
}
export default App
```
---
## Expanding Fields
In many hooks you'll find an `expand` property that can be accepted within one of the hooks's parameters. You can use the `expand` property to unpack an entity's relations and return them in the response.
<Note type="warning">
The relations you pass to `expand` replace any relations that are expanded by default in the request.
</Note>
### Expanding One Relation
For example, when you retrieve products, you can retrieve their collection by passing to the `expand` query parameter the value `collection`:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
expand: "collection",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
### Expanding Multiple Relations
You can expand more than one relation by separating the relations in the `expand` query parameter with a comma.
For example, to retrieve both the variants and the collection of products, pass to the `expand` query parameter the value `variants,collection`:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
expand: "variants,collection",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
### Prevent Expanding Relations
Some requests expand relations by default. You can prevent that by passing an empty expand value to retrieve an entity without any extra relations.
For example:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
expand: "",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
This would retrieve each product with only its properties, without any relations like `collection`.
---
## Selecting Fields
In many hooks you'll find a `fields` property that can be accepted within one of the hooks's parameters. You can use the `fields` property to specify which
fields in the entity should be returned in the response.
<Note type="warning">
If you pass a `fields` query parameter, only the fields you pass in the value along with the `id` of the entity will be returned in the response.
</Note>
The `fields` query parameter does not affect the expanded relations. You'll have to use the [Expand parameter](#expanding-fields) instead.
### Selecting One Field
For example, when you retrieve a list of products, you can retrieve only the titles of the products by passing `title` as a value to the `fields` query parameter:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
fields: "title",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
As mentioned above, the expanded relations such as `variants` will still be returned as they're not affected by the `fields` parameter.
You can ensure that only the `title` field is returned by passing an empty value to the `expand` query parameter. For example:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
fields: "title",
expand: "",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
### Selecting Multiple Fields
You can pass more than one field by separating the field names in the `fields` query parameter with a comma.
For example, to select the `title` and `handle` of products:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
fields: "title,handle",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
### Retrieve Only the ID
You can pass an empty `fields` query parameter to return only the ID of an entity.
For example:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
fields: "",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.id}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
You can also pair with an empty `expand` query parameter to ensure that the relations aren't retrieved as well. For example:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const { products, isLoading } = useAdminProducts({
fields: "",
expand: "",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.id}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
---
## Pagination
### Query Parameters
In listing hooks, such as list customers or list products, you can control the pagination using the query parameters `limit` and `offset`.
`limit` is used to specify the maximum number of items that can be return in the response. `offset` is used to specify how many items to skip before returning the resulting entities.
You can use the `offset` query parameter to change between pages. For example, if the limit is `50`, at page one the offset should be `0`; at page two the offset should be `50`, and so on.
For example, to limit the number of products retrieved:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const {
products,
limit,
offset,
isLoading,
} = useAdminProducts({
limit: 20,
offset: 0,
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
### Response Fields
In the response of listing hooks, aside from the entities retrieved, there are three pagination-related fields returned:
- `limit`: the maximum number of items that can be returned in the response.
- `offset`: the number of items that were skipped before the entities in the result.
- `count`: the total number of available items of this entity. It can be used to determine how many pages are there.
For example, if the `count` is `100` and the `limit` is `50`, you can divide the `count` by the `limit` to get the number of pages: `100/50 = 2 pages`.
### Sort Order
The `order` field, available on hooks supporting pagination, allows you to sort the retrieved items by an attribute of that item. For example, you can sort products by their `created_at` attribute by setting `order` to `created_at`:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const {
products,
isLoading,
} = useAdminProducts({
order: "created_at",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
By default, the sort direction will be ascending. To change it to descending, pass a dash (`-`) before the attribute name. For example:
```tsx
import React from "react"
import { useAdminProducts } from "medusa-react"
const Products = () => {
const {
products,
isLoading,
} = useAdminProducts({
order: "-created_at",
})
return (
<div>
{isLoading && <span>Loading...</span>}
{products && !products.length && <span>No Products</span>}
{products && products.length > 0 && (
<ul>
{products.map((product) => (
<li key={product.id}>{product.title}</li>
))}
</ul>
)}
</div>
)
}
export default Products
```
This sorts the products by their `created_at` attribute in the descending order.

61
www/apps/resources/app/page.mdx
View File

@@ -152,25 +152,7 @@ Follow the [Medusa Book](https://medusa-docs-v2-git-docs-v2-medusajs.vercel.app)
## SDKs and Tools
<Note type="soon">
Support for v2 in SDK and tools is coming soon.
</Note>
<CardList itemsPerRow={2} items={[
{
startIcon: <JavascriptEx />,
title: "Medusa JS Client",
href: "/js-client",
showLinkIcon: false
},
{
startIcon: <ReactJsEx />,
title: "Medusa React",
href: "/medusa-react",
showLinkIcon: false
},
{
startIcon: <CommandLineSolid />,
title: "Medusa CLI",
@@ -183,45 +165,4 @@ Support for v2 in SDK and tools is coming soon.
href: "/nextjs-starter",
showLinkIcon: false
},
]} />
{/* ## Recipes
<CardList items={[
{
startIcon: <ShoppingCartSolid />,
title: "Ecommerce",
href: "/recipes/ecommerce",
showLinkIcon: false
},
{
startIcon: <BuildingStorefront />,
title: "Marketplace",
href: "/recipes/marketplace",
showLinkIcon: false
},
{
startIcon: <CreditCardSolid />,
title: "Subscriptions",
href: "/recipes/subscriptions",
showLinkIcon: false
},
{
startIcon: <PuzzleSolid />,
title: "Integrate Ecommerce Stack",
href: "/recipes/integrate-ecommerce-stack",
showLinkIcon: false
},
{
startIcon: <ClockSolid />,
title: "Commerce Automation",
href: "/recipes/commerce-automation",
showLinkIcon: false
},
{
startIcon: <CheckCircleSolid />,
title: "Order Management System",
href: "/recipes/oms",
showLinkIcon: false
}
]} /> */}
]} />

8
www/apps/resources/generated/files-map.mjs
View File

@@ -679,10 +679,6 @@ export const filesMap = [
"filePath": "/www/apps/resources/app/integrations/page.mdx",
"pathname": "/integrations"
},
{
"filePath": "/www/apps/resources/app/js-client/page.mdx",
"pathname": "/js-client"
},
{
"filePath": "/www/apps/resources/app/medusa-cli/page.mdx",
"pathname": "/medusa-cli"
@@ -691,10 +687,6 @@ export const filesMap = [
"filePath": "/www/apps/resources/app/medusa-container-resources/page.mdx",
"pathname": "/medusa-container-resources"
},
{
"filePath": "/www/apps/resources/app/medusa-react/page.mdx",
"pathname": "/medusa-react"
},
{
"filePath": "/www/apps/resources/app/nextjs-starter/page.mdx",
"pathname": "/nextjs-starter"

960
www/apps/resources/generated/sidebar.mjs
View File

@@ -6447,966 +6447,6 @@ export const generatedSidebar = [
"title": "Medusa CLI",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/js-client",
"title": "Medusa JS Client",
"isChildSidebar": true,
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AddressesResource",
"title": "admin",
"hasTitleStyling": true,
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminAuthResource",
"title": "auth",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminBatchJobsResource",
"title": "batchJobs",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminCollectionsResource",
"title": "collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminCurrenciesResource",
"title": "currencies",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminCustomResource",
"title": "custom",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminCustomerGroupsResource",
"title": "customerGroups",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminCustomersResource",
"title": "customers",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminDiscountsResource",
"title": "discounts",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminDraftOrdersResource",
"title": "draftOrders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminGiftCardsResource",
"title": "giftCards",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminInventoryItemsResource",
"title": "inventoryItems",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminInvitesResource",
"title": "invites",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminNotesResource",
"title": "notes",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminNotificationsResource",
"title": "notifications",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminOrderEditsResource",
"title": "orderEdits",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminOrdersResource",
"title": "orders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminPaymentCollectionsResource",
"title": "paymentCollections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminPaymentsResource",
"title": "payments",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminPriceListResource",
"title": "priceLists",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminProductCategoriesResource",
"title": "productCategories",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminProductTagsResource",
"title": "productTags",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminProductTypesResource",
"title": "productTypes",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminProductsResource",
"title": "products",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminPublishableApiKeyResource",
"title": "publishableApiKeys",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminRegionsResource",
"title": "regions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminReservationsResource",
"title": "reservations",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminReturnReasonsResource",
"title": "returnReasons",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminReturnsResource",
"title": "returns",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminSalesChannelsResource",
"title": "salesChannels",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminShippingOptionsResource",
"title": "shippingOptions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminShippingProfilesResource",
"title": "shippingProfiles",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminStockLocationsResource",
"title": "stockLocations",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminStoresResource",
"title": "store",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminSwapsResource",
"title": "swaps",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminTaxRatesResource",
"title": "taxRates",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminUploadsResource",
"title": "uploads",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminUsersResource",
"title": "users",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AdminVariantsResource",
"title": "variants",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"title": "Store",
"hasTitleStyling": true,
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AuthResource",
"title": "auth",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"title": "carts",
"path": "/references/js-client/CartsResource",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/LineItemsResource",
"title": "lineItems",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/CollectionsResource",
"title": "collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/CustomersResource",
"title": "customers",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/AddressesResource",
"title": "addresses",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/PaymentMethodsResource",
"title": "paymentMethods",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/GiftCardsResource",
"title": "giftCards",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/OrderEditsResource",
"title": "orderEdits",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/OrdersResource",
"title": "orders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/PaymentCollectionsResource",
"title": "paymentCollections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/PaymentMethodsResource",
"title": "paymentMethods",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductCategoriesResource",
"title": "productCategories",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductTagsResource",
"title": "productTags",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductTypesResource",
"title": "productTypes",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductTypesResource",
"title": "productTypes",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductsResource",
"title": "products",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ProductVariantsResource",
"title": "variants",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/RegionsResource",
"title": "regions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ReturnReasonsResource",
"title": "returnReasons",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ReturnsResource",
"title": "returns",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/ShippingOptionsResource",
"title": "shippingOptions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/js-client/SwapsResource",
"title": "swaps",
"children": []
}
]
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/medusa-react",
"title": "Medusa React",
"isChildSidebar": true,
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks",
"title": "Hooks",
"hasTitleStyling": true,
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin",
"title": "Admin",
"autogenerate_path": "/references/medusa_react/Hooks/Admin",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/auth",
"title": "Auth",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/batch_jobs",
"title": "Batch Jobs",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/claims",
"title": "Claims",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/currencies",
"title": "Currencies",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/custom",
"title": "Custom",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/customer_groups",
"title": "Customer Groups",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/customers",
"title": "Customers",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/discounts",
"title": "Discounts",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/draft_orders",
"title": "Draft Orders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/gift_cards",
"title": "Gift Cards",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/inventory_items",
"title": "Inventory Items",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/invites",
"title": "Invites",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/notes",
"title": "Notes",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/notifications",
"title": "Notifications",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/order_edits",
"title": "Order Edits",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/orders",
"title": "Orders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/payment_collections",
"title": "Payment Collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/payments",
"title": "Payments",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/price_lists",
"title": "Price Lists",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/product_categories",
"title": "Product Categories",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/product_collections",
"title": "Product Collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/product_tags",
"title": "Product Tags",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/product_types",
"title": "Product Types",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/product_variants",
"title": "Product Variants",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/products",
"title": "Products",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/publishable_api_keys",
"title": "Publishable API Keys",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/regions",
"title": "Regions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/reservations",
"title": "Reservations",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/return_reasons",
"title": "Return Reasons",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/returns",
"title": "Returns",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/sales_channels",
"title": "Sales Channels",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/shipping_options",
"title": "Shipping Options",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/shipping_profiles",
"title": "Shipping Profiles",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/stock_locations",
"title": "Stock Locations",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/stores",
"title": "Stores",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/swaps",
"title": "Swaps",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/tax_rates",
"title": "Tax Rates",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/uploads",
"title": "Uploads",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/admin/users",
"title": "Users",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store",
"title": "Store",
"autogenerate_path": "/references/medusa_react/Hooks/Store",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/carts",
"title": "Carts",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/customers",
"title": "Customers",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/gift_cards",
"title": "Gift Cards",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/line_items",
"title": "Line Items",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/order_edits",
"title": "Order Edits",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/orders",
"title": "Orders",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/payment_collections",
"title": "Payment Collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/product_categories",
"title": "Product Categories",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/product_collections",
"title": "Product Collections",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/product_tags",
"title": "Product Tags",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/product_types",
"title": "Product Types",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/products",
"title": "Products",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/regions",
"title": "Regions",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/return_reasons",
"title": "Return Reasons",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/returns",
"title": "Returns",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/shipping_options",
"title": "Shipping Options",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/hooks/store/swaps",
"title": "Swaps",
"children": []
}
]
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/providers",
"title": "Providers",
"hasTitleStyling": true,
"autogenerate_path": "/references/medusa_react/Providers",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/providers/cart",
"title": "Cart",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/providers/medusa",
"title": "Medusa",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/providers/session_cart",
"title": "Session_Cart",
"children": []
}
]
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities",
"title": "Utilities",
"hasTitleStyling": true,
"autogenerate_path": "/references/medusa_react/Utilities/functions",
"children": [
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities/computeAmount",
"title": "computeAmount",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities/computeVariantPrice",
"title": "computeVariantPrice",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities/formatAmount",
"title": "formatAmount",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities/formatVariantPrice",
"title": "formatVariantPrice",
"children": []
},
{
"loaded": true,
"isPathHref": true,
"path": "/references/medusa-react/utilities/getVariantPrice",
"title": "getVariantPrice",
"children": []
}
]
}
]
},
{
"loaded": true,
"isPathHref": true,

306
www/apps/resources/sidebar.mjs
View File

@@ -1361,312 +1361,6 @@ export const sidebar = sidebarAttachHrefCommonOptions([
path: "/medusa-cli",
title: "Medusa CLI",
},
{
path: "/js-client",
title: "Medusa JS Client",
isChildSidebar: true,
children: [
{
path: "/references/js-client/AddressesResource",
title: "admin",
hasTitleStyling: true,
children: [
{
path: "/references/js-client/AdminAuthResource",
title: "auth",
},
{
path: "/references/js-client/AdminBatchJobsResource",
title: "batchJobs",
},
{
path: "/references/js-client/AdminCollectionsResource",
title: "collections",
},
{
path: "/references/js-client/AdminCurrenciesResource",
title: "currencies",
},
{
path: "/references/js-client/AdminCustomResource",
title: "custom",
},
{
path: "/references/js-client/AdminCustomerGroupsResource",
title: "customerGroups",
},
{
path: "/references/js-client/AdminCustomersResource",
title: "customers",
},
{
path: "/references/js-client/AdminDiscountsResource",
title: "discounts",
},
{
path: "/references/js-client/AdminDraftOrdersResource",
title: "draftOrders",
},
{
path: "/references/js-client/AdminGiftCardsResource",
title: "giftCards",
},
{
path: "/references/js-client/AdminInventoryItemsResource",
title: "inventoryItems",
},
{
path: "/references/js-client/AdminInvitesResource",
title: "invites",
},
{
path: "/references/js-client/AdminNotesResource",
title: "notes",
},
{
path: "/references/js-client/AdminNotificationsResource",
title: "notifications",
},
{
path: "/references/js-client/AdminOrderEditsResource",
title: "orderEdits",
},
{
path: "/references/js-client/AdminOrdersResource",
title: "orders",
},
{
path: "/references/js-client/AdminPaymentCollectionsResource",
title: "paymentCollections",
},
{
path: "/references/js-client/AdminPaymentsResource",
title: "payments",
},
{
path: "/references/js-client/AdminPriceListResource",
title: "priceLists",
},
{
path: "/references/js-client/AdminProductCategoriesResource",
title: "productCategories",
},
{
path: "/references/js-client/AdminProductTagsResource",
title: "productTags",
},
{
path: "/references/js-client/AdminProductTypesResource",
title: "productTypes",
},
{
path: "/references/js-client/AdminProductsResource",
title: "products",
},
{
path: "/references/js-client/AdminPublishableApiKeyResource",
title: "publishableApiKeys",
},
{
path: "/references/js-client/AdminRegionsResource",
title: "regions",
},
{
path: "/references/js-client/AdminReservationsResource",
title: "reservations",
},
{
path: "/references/js-client/AdminReturnReasonsResource",
title: "returnReasons",
},
{
path: "/references/js-client/AdminReturnsResource",
title: "returns",
},
{
path: "/references/js-client/AdminSalesChannelsResource",
title: "salesChannels",
},
{
path: "/references/js-client/AdminShippingOptionsResource",
title: "shippingOptions",
},
{
path: "/references/js-client/AdminShippingProfilesResource",
title: "shippingProfiles",
},
{
path: "/references/js-client/AdminStockLocationsResource",
title: "stockLocations",
},
{
path: "/references/js-client/AdminStoresResource",
title: "store",
},
{
path: "/references/js-client/AdminSwapsResource",
title: "swaps",
},
{
path: "/references/js-client/AdminTaxRatesResource",
title: "taxRates",
},
{
path: "/references/js-client/AdminUploadsResource",
title: "uploads",
},
{
path: "/references/js-client/AdminUsersResource",
title: "users",
},
{
path: "/references/js-client/AdminVariantsResource",
title: "variants",
},
],
},
{
title: "Store",
hasTitleStyling: true,
children: [
{
path: "/references/js-client/AuthResource",
title: "auth",
},
{
title: "carts",
path: "/references/js-client/CartsResource",
children: [
{
path: "/references/js-client/LineItemsResource",
title: "lineItems",
},
],
},
{
path: "/references/js-client/CollectionsResource",
title: "collections",
},
{
path: "/references/js-client/CustomersResource",
title: "customers",
children: [
{
path: "/references/js-client/AddressesResource",
title: "addresses",
},
{
path: "/references/js-client/PaymentMethodsResource",
title: "paymentMethods",
},
],
},
{
path: "/references/js-client/GiftCardsResource",
title: "giftCards",
},
{
path: "/references/js-client/OrderEditsResource",
title: "orderEdits",
},
{
path: "/references/js-client/OrdersResource",
title: "orders",
},
{
path: "/references/js-client/PaymentCollectionsResource",
title: "paymentCollections",
},
{
path: "/references/js-client/PaymentMethodsResource",
title: "paymentMethods",
},
{
path: "/references/js-client/ProductCategoriesResource",
title: "productCategories",
},
{
path: "/references/js-client/ProductTagsResource",
title: "productTags",
},
{
path: "/references/js-client/ProductTypesResource",
title: "productTypes",
},
{
path: "/references/js-client/ProductTypesResource",
title: "productTypes",
},
{
path: "/references/js-client/ProductsResource",
title: "products",
children: [
{
path: "/references/js-client/ProductVariantsResource",
title: "variants",
},
],
},
{
path: "/references/js-client/RegionsResource",
title: "regions",
},
{
path: "/references/js-client/ReturnReasonsResource",
title: "returnReasons",
},
{
path: "/references/js-client/ReturnsResource",
title: "returns",
},
{
path: "/references/js-client/ShippingOptionsResource",
title: "shippingOptions",
},
{
path: "/references/js-client/SwapsResource",
title: "swaps",
},
],
},
],
},
{
path: "/medusa-react",
title: "Medusa React",
isChildSidebar: true,
children: [
{
path: "/references/medusa-react/hooks",
title: "Hooks",
hasTitleStyling: true,
children: [
{
path: "/references/medusa-react/hooks/admin",
title: "Admin",
autogenerate_path: "/references/medusa_react/Hooks/Admin",
},
{
path: "/references/medusa-react/hooks/store",
title: "Store",
autogenerate_path: "/references/medusa_react/Hooks/Store",
},
],
},
{
path: "/references/medusa-react/providers",
title: "Providers",
hasTitleStyling: true,
autogenerate_path: "/references/medusa_react/Providers",
},
{
path: "/references/medusa-react/utilities",
title: "Utilities",
hasTitleStyling: true,
autogenerate_path: "/references/medusa_react/Utilities/functions",
},
],
},
{
path: "/nextjs-starter",
title: "Next.js Starter",

60886
www/utils/generated/typedoc-json-output/js-client.json
View File

File diff suppressed because it is too large Load Diff

115703
www/utils/generated/typedoc-json-output/medusa-react.json
View File

File diff suppressed because it is too large Load Diff

4
www/utils/packages/typedoc-generate-references/src/constants/merger-custom-options/index.ts
View File

@@ -2,9 +2,7 @@ import { FormattingOptionsType } from "types"
import authProviderOptions from "./auth-provider.js"
import fileOptions from "./file.js"
import fulfillmentProviderOptions from "./fulfillment-provider.js"
import jsClientOptions from "./js-client.js"
import medusaConfigOptions from "./medusa-config.js"
import medusaReactOptions from "./medusa-react.js"
import medusaOptions from "./medusa.js"
import notificationOptions from "./notification.js"
import paymentProviderOptions from "./payment-provider.js"
@@ -18,9 +16,7 @@ const mergerCustomOptions: FormattingOptionsType = {
...dmlOptions,
...fileOptions,
...fulfillmentProviderOptions,
...jsClientOptions,
...medusaConfigOptions,
...medusaReactOptions,
...medusaOptions,
...notificationOptions,
...paymentProviderOptions,

32
www/utils/packages/typedoc-generate-references/src/constants/merger-custom-options/js-client.ts
View File

@@ -1,32 +0,0 @@
import { FormattingOptionsType } from "types"
import baseSectionsOptions from "../base-section-options.js"
const jsClientOptions: FormattingOptionsType = {
"^js_client": {
sections: {
...baseSectionsOptions,
member_declaration_title: false,
},
reflectionGroups: {
Constructors: false,
},
parameterComponentExtraProps: {
expandUrl:
"https://docs.medusajs.com/js-client/overview#expanding-fields",
},
maxLevel: 4,
},
"^js_client/classes/": {
frontmatterData: {
slug: "/references/js-client/{{alias}}",
},
},
"^js_client/.*AdminOrdersResource": {
maxLevel: 2,
},
"^js_client/.*LineItemsResource": {
maxLevel: 3,
},
}
export default jsClientOptions

98
www/utils/packages/typedoc-generate-references/src/constants/merger-custom-options/medusa-react.ts
View File

@@ -1,98 +0,0 @@
import { FormattingOptionsType } from "types"
const medusaReactOptions: FormattingOptionsType = {
"^medusa_react": {
parameterComponentExtraProps: {
expandUrl:
"https://docs.medusajs.com/medusa-react/overview#expanding-fields",
},
},
"^modules/medusa_react\\.mdx": {
reflectionGroups: {
Variables: false,
Functions: false,
},
reflectionCategories: {
Mutations: false,
Queries: false,
Other: false,
},
},
"^medusa_react/(medusa_react\\.Hooks|.*medusa_react\\.Hooks\\.Admin|.*medusa_react\\.Hooks\\.Store|medusa_react\\.Providers)/page\\.mdx":
{
reflectionGroups: {
Functions: false,
},
},
"^medusa_react/Providers/.*": {
expandMembers: true,
frontmatterData: {
slug: "/references/medusa-react/providers/{{alias-lower}}",
sidebar_label: "{{alias}}",
},
reflectionTitle: {
suffix: " Provider Overview",
},
},
"^medusa_react/medusa_react\\.Utilities": {
expandMembers: true,
reflectionTitle: {
prefix: "Medusa React ",
},
},
"^medusa_react/Utilities/.*": {
expandMembers: true,
frontmatterData: {
slug: "/references/medusa-react/utilities/{{alias}}",
},
},
"^medusa_react/medusa_react\\.Hooks/page\\.mdx": {
frontmatterData: {
slug: "/references/medusa-react/hooks",
},
},
"^medusa_react/Hooks/Admin/.*Admin/page\\.mdx": {
frontmatterData: {
slug: "/references/medusa-react/hooks/admin",
},
},
"^medusa_react/Hooks/Admin/.*": {
frontmatterData: {
slug: "/references/medusa-react/hooks/admin/{{alias-lower}}",
},
},
"^medusa_react/Hooks/Store/.*Store/page\\.mdx": {
frontmatterData: {
slug: "/references/medusa-react/hooks/store",
},
},
"^medusa_react/Hooks/Store/.*": {
frontmatterData: {
slug: "/references/medusa-react/hooks/store/{{alias-lower}}",
},
},
"^medusa_react/medusa_react\\.Providers/page\\.mdx": {
frontmatterData: {
slug: "/references/medusa-react/providers",
},
},
"^medusa_react/medusa_react\\.Utilities/page\\.mdx": {
frontmatterData: {
slug: "/references/medusa-react/utilities",
},
},
"^medusa_react/Hooks/.*Admin\\.Inventory_Items": {
maxLevel: 4,
},
"^medusa_react/Hooks/.*Admin\\.Products": {
maxLevel: 4,
},
"^medusa_react/Hooks/.*Admin\\.Stock_Locations": {
maxLevel: 5,
},
"^medusa_react/Hooks/.*Admin\\.Users": {
maxLevel: 5,
},
}
export default medusaReactOptions

2
www/utils/packages/typedoc-generate-references/tsconfig.json
View File

@@ -11,7 +11,7 @@
"skipLibCheck": true,
"resolveJsonModule": true,
},
"include": ["src", "src/constants/merger-custom-options"],
"include": ["src"],
"ts-node": {
"esm": true,
"experimentalSpecifierResolution": "node",