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

docs: updated custom hooks section in Medusa React (#4566)

Browse Source 
* docs: updated custom hooks section in Medusa React

* fix eslint errors
This commit is contained in:
Shahed Nasser
2023-07-20 15:20:10 +03:00
committed by GitHub
parent 4d326fbbdf
commit 6bc8b40a6b
47 changed files with 304 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/content/admin/onboarding.md
View File

@@ -2287,54 +2287,37 @@ The next step is to retrieve the current step of the onboarding flow from the Me
In this section, you’ll implement the `TODO`s in the `OnboardingFlow` that require communicating with the backend.
There are different ways you can consume custom backend endpoints. The Medusa React library provides a utility method `createCustomAdminHooks` that allows you to create a hook similar to those available by default in the library. You can then utilize these hooks to send requests to custom backend endpoints.
There are different ways you can consume custom backend endpoints. The Medusa React library provides utility methods that allow you to create hooks similar to those available by default in the library. You can then utilize these hooks to send requests to custom backend endpoints.
Create the file `src/admin/components/shared/hooks.tsx` that exports custom hooks for the custom endpoints you created in the previous step:
```tsx title=src/admin/components/shared/hooks.tsx
import { createCustomAdminHooks } from "medusa-react"
const {
useAdminEntity: useAdminOnboardingState,
useAdminUpdateMutation: useAdminUpdateOnboardingStateMutation,
} = createCustomAdminHooks("onboarding", "onboarding_state")
export {
useAdminOnboardingState,
useAdminUpdateOnboardingStateMutation,
}
```
You can now use `useAdminOnboardingState` to retrieve the onboarding state from the backend, and `useAdminUpdateOnboardingStateMutation` to update the onboarding state in the backend.
Learn more about Medusa React in [this documentation](../medusa-react/overview.md).
Then, add the following imports at the top of `src/admin/widgets/onboarding-flow/onboarding-flow.tsx`:
Add the following imports at the top of `src/admin/widgets/onboarding-flow/onboarding-flow.tsx`:
```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx
import {
useAdminOnboardingState,
useAdminUpdateOnboardingStateMutation,
} from "../../components/shared/hooks"
useAdminCustomPost,
useAdminCustomQuery,
} from "medusa-react"
```
Next, add the following at the top of the `OnboardingFlow` component:
```tsx title=src/admin/widgets/onboarding-flow/onboarding-flow.tsx
const OnboardingFlow = (props: any) => {
const {
data,
isLoading,
} = useAdminOnboardingState<OnboardingStateRes>("")
const { mutate } = useAdminUpdateOnboardingStateMutation<
const QUERY_KEY = ["onboarding_state"]
const { data, isLoading } = useAdminCustomQuery<
undefined,
OnboardingStateRes
>("/onboarding", QUERY_KEY)
const { mutate } = useAdminCustomPost<
AdminOnboardingUpdateStateReq,
OnboardingStateRes
>("")
>("/onboarding", QUERY_KEY)
// ...
}
```
Learn more about the available custom hooks such as `useAdminCustomPost` and `useAdminCustomQuery` in the [Medusa React documentation](../medusa-react/overview.mdx#custom-hooks).
`data` now holds the current onboarding state from the backend, and `mutate` can be used to update the onboarding state in the backend.
After that, replace the declarations within `OnboardingFlow` that had a `TODO` comment with the following:

6
docs/content/admin/routes.md
View File

@@ -291,11 +291,11 @@ export default CustomPage
## Querying and Mutating Data
You might need to interact with the Medusa backend from your admin route. To do so, you can utilize the [Medusa React package](../medusa-react/overview.md). It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend.
You might need to interact with the Medusa backend from your admin route. To do so, you can utilize the [Medusa React package](../medusa-react/overview.mdx). It contains a collection of queries and mutation built on `@tanstack/react-query` that lets you interact with the Medusa backend.
:::note
Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.md).
Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.mdx).
:::
@@ -316,7 +316,7 @@ const CustomPage = () => {
export default CustomPage
```
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.md#custom-hooks).
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.mdx#custom-hooks).
---

4
docs/content/admin/widgets.md
View File

@@ -1230,7 +1230,7 @@ You will most likely need to interact with the Medusa backend from your Widgets
:::note
Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.md).
Make sure to also install the Medusa React package first if you’re intending to use it, as explained in the [Medusa React guide](../medusa-react/overview.mdx).
:::
@@ -1273,7 +1273,7 @@ export const config: WidgetConfig = {
export default ProductWidget
```
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.md#custom-hooks).
You can also use `medusa-react` to interact with custom endpoints using the [createCustomAdminHooks utility function](../medusa-react/overview.mdx#custom-hooks).
---