chore: reorganize docs apps (#7228)
* reorganize docs apps * add README * fix directory * add condition for old docs
This commit is contained in:
Shahed Nasser
+111
File diff suppressed because one or more lines are too long
+92
@@ -0,0 +1,92 @@
|
||||
---
|
||||
slug: /references/medusa-react/providers/medusa
|
||||
sidebar_label: Medusa
|
||||
---
|
||||
|
||||
import { TypeList } from "docs-ui"
|
||||
|
||||
# Medusa Provider Overview
|
||||
|
||||
## useMedusa
|
||||
|
||||
This hook gives you access to context of [MedusaProvider](page.mdx#medusaprovider). It's useful if you want access to the
|
||||
[Medusa JS Client](https://docs.medusajs.com/js-client/overview).
|
||||
|
||||
### Example
|
||||
|
||||
```ts
|
||||
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
|
||||
|
||||
<TypeList types={[{"name":"client","type":"`Medusa`","description":"The Medusa JS Client instance.","optional":false,"defaultValue":"","expandable":false,"children":[]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="useMedusa"/>
|
||||
|
||||
___
|
||||
|
||||
## 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
|
||||
|
||||
```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.
|
||||
|
||||
The `Storefront` component and its child components can now use hooks exposed by Medusa React.
|
||||
|
||||
### Parameters
|
||||
|
||||
<TypeList types={[{"name":"param0","type":"[MedusaProviderProps](../../interfaces/medusa_react.MedusaProviderProps/page.mdx)","description":"Props of the provider.","optional":false,"defaultValue":"","expandable":false,"children":[{"name":"baseUrl","type":"`string`","description":"The URL to your Medusa backend.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"queryClientProviderProps","type":"`QueryClientProviderProps`","description":"An object used to set the Tanstack Query client. The object requires a `client` property, \nwhich should be an instance of [QueryClient](https://tanstack.com/query/v4/docs/react/reference/QueryClient).","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"apiKey","type":"`string`","description":"API key used for authenticating admin requests. Follow [this guide](https://docs.medusajs.com/api/admin#authentication) to learn how to create an API key for an admin user.","optional":true,"defaultValue":"","expandable":false,"children":[]},{"name":"publishableApiKey","type":"`string`","description":"Publishable API key used for storefront requests. You can create a publishable API key either using the \n[admin APIs](https://docs.medusajs.com/development/publishable-api-keys/admin/manage-publishable-api-keys) or the \n[Medusa admin](https://docs.medusajs.com/user-guide/settings/publishable-api-keys#create-publishable-api-key).","optional":true,"defaultValue":"","expandable":false,"children":[]},{"name":"maxRetries","type":"`number`","description":"Number of times to retry a request if it fails.","optional":true,"defaultValue":"3","expandable":false,"children":[]},{"name":"customHeaders","type":"`Record<string, any>`","description":"An object of custom headers to pass with every request. Each key of the object is the name of the header, and its value is the header's value.","optional":true,"defaultValue":"`{}`","expandable":false,"children":[]},{"name":"medusaClient","type":"`Medusa`","description":"An instance of the Medusa JS Client. If you don't provide an instance, one will be created using the `baseUrl`, `apiKey`, \n`publishableApiKey`, `maxRetries`, and `customHeaders` props.","optional":true,"defaultValue":"","expandable":false,"children":[]}]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="MedusaProvider"/>
|
||||
|
||||
### Returns
|
||||
|
||||
<TypeList types={[{"name":"Element","type":"`Element`","optional":false,"defaultValue":"","description":"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`\nhigher in the component tree.","expandable":false,"children":[]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="MedusaProvider"/>
|
||||
+80
@@ -0,0 +1,80 @@
|
||||
---
|
||||
slug: /references/medusa-react/providers/session_cart
|
||||
sidebar_label: Session_Cart
|
||||
---
|
||||
|
||||
import { TypeList } from "docs-ui"
|
||||
|
||||
# Session Cart Provider Overview
|
||||
|
||||
## SessionCartProvider
|
||||
|
||||
Unlike the [CartProvider](../medusa_react.Providers.Cart/page.mdx#cartprovider), `SessionProvider` never interacts with the Medusa backend. It can be used to implement the user experience related to managing a cart’s items.
|
||||
Its state variables are JavaScript objects living in the browser, but are in no way communicated with the backend.
|
||||
|
||||
You can use the `SessionProvider` as a lightweight client-side cart functionality. It’s not stored in any database or on the Medusa backend.
|
||||
|
||||
To use `SessionProvider`, you first have to insert it somewhere in your component tree below the [MedusaProvider](../medusa_react.Providers.Medusa/page.mdx#medusaprovider). Then, in any of the child components,
|
||||
you can use the [useSessionCart](page.mdx#usesessioncart) hook to get access to client-side cart item functionalities.
|
||||
|
||||
### Example
|
||||
|
||||
```tsx title="src/App.ts"
|
||||
import { SessionProvider, 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"
|
||||
>
|
||||
<SessionProvider>
|
||||
<Storefront />
|
||||
</SessionProvider>
|
||||
</MedusaProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
```
|
||||
|
||||
### Parameters
|
||||
|
||||
<TypeList types={[{"name":"param0","type":"[SessionCartProviderProps](../../interfaces/medusa_react.SessionCartProviderProps/page.mdx)","description":"Props of the provider.","optional":false,"defaultValue":"","expandable":false,"children":[{"name":"initialState","type":"[SessionCartState](../../interfaces/medusa_react.SessionCartState/page.mdx)","description":"An optional initial value to be used for the session cart.","optional":true,"defaultValue":"","expandable":false,"children":[{"name":"region","type":"[RegionInfo](../../types/medusa_react.RegionInfo/page.mdx)","description":"The region of the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"items","type":"[Item](../../interfaces/medusa_react.Item/page.mdx)[]","description":"The items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"totalItems","type":"`number`","description":"The total items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"total","type":"`number`","description":"The total amount of the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]}]}]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="SessionCartProvider"/>
|
||||
|
||||
### Returns
|
||||
|
||||
<TypeList types={[{"name":"Element","type":"`Element`","optional":false,"defaultValue":"","description":"Unlike the [CartProvider](../medusa_react.Providers.Cart/page.mdx#cartprovider), `SessionProvider` never interacts with the Medusa backend. It can be used to implement the user experience related to managing a cart’s items. \nIts state variables are JavaScript objects living in the browser, but are in no way communicated with the backend.\n\nYou can use the `SessionProvider` as a lightweight client-side cart functionality. It’s not stored in any database or on the Medusa backend.\n\nTo use `SessionProvider`, you first have to insert it somewhere in your component tree below the [MedusaProvider](../medusa_react.Providers.Medusa/page.mdx#medusaprovider). Then, in any of the child components, \nyou can use the [useSessionCart](page.mdx#usesessioncart) hook to get access to client-side cart item functionalities.","expandable":false,"children":[]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="SessionCartProvider"/>
|
||||
|
||||
___
|
||||
|
||||
## useSessionCart
|
||||
|
||||
This hook exposes the context of [SessionCartProvider](page.mdx#sessioncartprovider).
|
||||
|
||||
### Example
|
||||
|
||||
The following example assumes that you've added `SessionCartProvider` previously in the React components tree:
|
||||
|
||||
```tsx title="src/Products.ts"
|
||||
const Products = () => {
|
||||
const { addItem } = useSessionCart()
|
||||
// ...
|
||||
|
||||
function addToCart(variant: ProductVariant) {
|
||||
addItem({
|
||||
variant: variant,
|
||||
quantity: 1,
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Returns
|
||||
|
||||
<TypeList types={[{"name":"region","type":"[RegionInfo](../../types/medusa_react.RegionInfo/page.mdx)","description":"The region of the cart.","optional":false,"defaultValue":"","expandable":false,"children":[{"name":"currency_code","type":"`string`","description":"","optional":false,"defaultValue":"","expandable":false,"children":[]}]},{"name":"items","type":"[Item](../../interfaces/medusa_react.Item/page.mdx)[]","description":"The items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[{"name":"variant","type":"ConvertDateToString<Omit<ProductVariant, \"beforeInsert\">>","description":"The product variant represented by this item in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"quantity","type":"`number`","description":"The quantity added in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"total","type":"`number`","description":"The total amount of the item in the cart.","optional":true,"defaultValue":"","expandable":false,"children":[]}]},{"name":"totalItems","type":"`number`","description":"The total items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"total","type":"`number`","description":"The total amount of the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"setRegion","type":"(`region`: [RegionInfo](../../types/medusa_react.RegionInfo/page.mdx)) => `void`","description":"A state function used to set the region.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"addItem","type":"(`item`: [Item](../../interfaces/medusa_react.Item/page.mdx)) => `void`","description":"This function adds an item to the session cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"removeItem","type":"(`id`: `string`) => `void`","description":"This function removes an item from the session cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"updateItem","type":"(`id`: `string`, `item`: Partial<[Item](../../interfaces/medusa_react.Item/page.mdx)>) => `void`","description":"This function updates an item in the session cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"setItems","type":"(`items`: [Item](../../interfaces/medusa_react.Item/page.mdx)[]) => `void`","description":"A state function used to set the items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"updateItemQuantity","type":"(`id`: `string`, `quantity`: `number`) => `void`","description":"This function updates an item's quantity in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"incrementItemQuantity","type":"(`id`: `string`) => `void`","description":"This function increments the item's quantity in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"decrementItemQuantity","type":"(`id`: `string`) => `void`","description":"This function decrements the item's quantity in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"getItem","type":"(`id`: `string`) => `undefined` \\| [Item](../../interfaces/medusa_react.Item/page.mdx)","description":"This function retrieves an item's details by its ID.","optional":false,"defaultValue":"","expandable":false,"children":[]},{"name":"clearItems","type":"() => `void`","description":"Removes all items in the cart.","optional":false,"defaultValue":"","expandable":false,"children":[]}]} expandUrl="https://docs.medusajs.com/medusa-react/overview#expanding-fields" sectionTitle="useSessionCart"/>
|
||||
Reference in New Issue
Block a user