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

docs: added medusa-react snippets in how-to guides (#3091)

Browse Source 
* added medusa-react snippets

* added more code snippets

* added medusa-react snippets

* docs: added medusa-react snippets to storefront how-to

* docs: added medusa-react snippets in admin how-to

* docs: fixed incorrect link
This commit is contained in:
Shahed Nasser
2023-01-23 21:04:09 +02:00
committed by GitHub
parent 7418a0025c
commit a248bf6e4f
23 changed files with 3032 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content/medusa-react/overview.md
+11 -6
View File
@@ -55,7 +55,7 @@ import React from "react"
const queryClient = new QueryClient()
function App() {
const App = () => {
return (
<MedusaProvider
queryClientProviderProps={{ client: queryClient }}
@@ -73,6 +73,15 @@ In the example above, you wrap the `Storefront` component with the `MedusaProvid
The `Storefront` component and its child components can now use hooks exposed by Medusa React.
### MedusaProvider Optional Props
You can also pass the following props to Medusa Provider:
| Props | Default | Description |
| ------------------- | ------------------------- | --------------------------------------------------------- |
| `apiKey` | `''` | Optional API key used for authenticating admin requests. |
| `publishableApiKey` | `''` | Optional publishable API key used for storefront requests.|
### Queries
To fetch data from the Medusa server (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 server.
@@ -80,8 +89,6 @@ To fetch data from the Medusa server (in other words, perform `GET` requests), y
For example, to fetch products from your Medusa server:
```tsx title=src/Products.ts
import * as React from "react"
import { Product } from "@medusajs/medusa"
import { useProducts } from "medusa-react"
@@ -127,8 +134,6 @@ To create, update, or delete data on the Medusa server (in other words, perform
For example, to create a cart:
```tsx title=src/Cart.ts
import * as React from "react"
import { useCreateCart } from "medusa-react"
const Cart = () => {
@@ -451,7 +456,7 @@ import React from "react"
const queryClient = new QueryClient()
function App() {
const App = () => {
return (
<MedusaProvider
queryClientProviderProps={{ client: queryClient }}