Resources having me confused
I tried using useList, but it didn't call the route I added in the list.
instead its calling a
/campaigns?_end=10&_start=0&
route
this is how I called the useList:
and this is my resource:
16 Replies
Hi @script4559. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The
useList
hook in Refine automatically detects the resource
parameter from the current route. However, it seems like you're expecting it to use the list
property from your resources
array as the API endpoint. This is not how Refine works.
In Refine, the list
property in the resources
array is used to define the route in your application where the list view for that resource will be displayed, not the API endpoint. The actual API endpoint is determined by the dataProvider
you're using.
The useList
hook will call the getList
method of your dataProvider
with the resource
parameter you've provided. This getList
method should then make a GET
request to the appropriate API endpoint. The resource
parameter is usually used as part of the API endpoint path, but how it's used exactly depends on how you've implemented your dataProvider
.
If you want to change the API endpoint that's called when you use the useList
hook, you'll need to modify your dataProvider
's getList
method.
Here's an example of how you might implement the getList
method in your dataProvider
:
In this example, if you call useList({ resource: "campaigns" })
, it will make a GET
request to /api/campaigns
.
For more information on how to create a data provider, you can refer to the Creating a Data Provider (https://refine.dev/docs/core/providers/data-provider/#creating-a-data-provider) section of the Refine documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•10mo ago
@kapa.ai How can I access the "cancel" and "save" button in my create route?
I want to make the modal 3 steps before finally submitting the form.
Let me check the knowledge base for you. One moment! :books:
----------------------
In Refine, you can access the "cancel" and "save" buttons using the
useForm
or useModalForm
hooks. These hooks provide saveButtonProps
and cancelButtonProps
which contain all the props needed by the "submit" and "cancel" buttons respectively.
Here's an example of how you can use these props:
In this example, the "Save" button will be disabled and show a loading indicator while the form is being submitted, and the "Cancel" button will reset the form to its initial values when clicked.
For a multi-step form, you can use the useStepsForm
hook. This hook provides a steps
object with currentStep
and gotoStep
properties that you can use to control which step of the form is currently shown.
Here's an example of how you can use useStepsForm
to create a multi-step form:
In this example, you can use currentStep
to determine which step of the form to render, and gotoStep
to navigate between steps.
For more information, refer to the useForm
(https://refine.dev/docs/ui-integrations/mantine/hooks/use-form/#how-can-i-change-the-form-data-before-submitting-it-to-the-api), useModalForm
(https://refine.dev/docs/packages/react-hook-form/use-modal-form/#savebuttonprops), and useStepsForm
(https://refine.dev/docs/api-reference/mantine/hooks/form/useStepsForm/#how-can-i-change-the-form-data-before-submitting-it-to-the-api) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•10mo ago
@kapa.ai its a modal form so my hook is useModalForm. How can I do steps with modal form
Let me check the knowledge base for you. One moment! :books:
----------------------
To create a multi-step form within a modal, you can use the
useStepsForm
hook in conjunction with useModalForm
. The useStepsForm
hook allows you to split your form into multiple sections using an Ant Design Steps component, which can be used to manage your form.
Here's an example of how you can use useStepsForm
to create a multi-step form:
In this example, you can use currentStep
to determine which step of the form to render, and gotoStep
to navigate between steps.
For more information, refer to the useStepsForm
(https://refine.dev/docs/ui-integrations/ant-design/hooks/use-steps-form/) documentation.
To use this within a modal, you can use the useModalForm
hook. This hook allows you to manage a form inside of your modal component. It returns Ant Design Form and Modal props.
Here's an example of how you can use useModalForm
:
For more information, refer to the useModalForm
(https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation.
Please note that you would need to manage the state of the steps within the modal yourself, as useModalForm
does not inherently support multi-step forms.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•10mo ago
@kapa.ai what about the cancel button, how can I get it?
Let me check the knowledge base for you. One moment! :books:
----------------------
The
useModalForm
and useForm
hooks in Refine provide cancelButtonProps
which contain all the props needed by the "cancel" button.
Here's an example of how you can use these props:
In this example, the "Cancel" button will reset the form to its initial values when clicked.
For more information, refer to the useModalForm
(https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•10mo ago
@kapa.ai I created a modal form using
useModalForm
then added a step form to it which I did myself, now how can I call the validation function of the form when i click my next button?Let me check the knowledge base for you. One moment! :books:
----------------------
To manually trigger form validation in Refine, you can use the
trigger
method from the useForm
or useModalForm
hooks. This method allows you to manually trigger validation for specified fields or all fields.
Here's an example of how you can use the trigger
method:
In this example, when the "Next" button is clicked, it will trigger validation for all fields in the form. If the form is valid, it will proceed to the next step.
For more information, refer to the useModalForm
(https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/) documentation.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@584066183989428345> kapa.ai is still learning and improving, please let us know how it did by reacting below
genetic-orange•10mo ago
@kapa.ai my api endpoint routes does not follow the standard REST Api way of having one route to hand all methods(post, get, put, etc.). How can I make data provider work for me?