itchy-amethyst
itchy-amethyst14mo ago

Use query parameters to set the initial form values

Can I use query parameters to set the initial form values for antd's useform? For example, in app.tsx I set the create route for products as create: "/products/create/:category_id" So, when I go to the url products/create/1 I want to set 1 as the value in the form for the field category_id
9 Replies
kapa.ai
kapa.ai14mo ago
Hi @ahnaf1022. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai14mo ago
---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the refine documentation for more information on how to work with forms and other features: https://refine.dev/docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Overview | refine
What is refine?
kapa.ai
kapa.ai14mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon
extended-salmon14mo ago
Hey @ahnaf1022 Maybe a similar way can be followed. - With useParsed, the id data is taken from the url. (https://refine.dev/docs/api-reference/core/hooks/navigation/useParsed/) - It can be passed with values in useCreate. (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/#values-)
useParsed | refine
useParsed is a hook that leverages the parse method of the routerProvider to access the URL and query parameters along with the inferred resource, action and id from the URL.
useCreate | refine
useCreate is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.
itchy-amethyst
itchy-amethyst14mo ago
where should I use useCreate hook (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/#values-) and can you provide me some examples @kapa.ai
useCreate | refine
useCreate is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.
kapa.ai
kapa.ai14mo ago
Let me check the knowledge base for you. One moment! :books:
kapa.ai
kapa.ai14mo ago
---------------------- The useCreate hook is used to create new records in your data-intensive application. It returns useful properties and methods, such as the mutate method, which expects values and resource as parameters. These parameters will be passed to the create method from the dataProvider as parameters. Here's a basic example of using the useCreate hook:
import { useCreate } from "@refinedev/core";

const { mutate } = useCreate();

mutate({
resource: "products",
values: {
name: "New Product",
material: "Wood",
},
});
import { useCreate } from "@refinedev/core";

const { mutate } = useCreate();

mutate({
resource: "products",
values: {
name: "New Product",
material: "Wood",
},
});
Source: useCreate - Basic Usage (https://refine.dev/docs/api-reference/core/hooks/data/useCreate) In the example above, the useCreate hook is used to create a new product with the specified values. The resource parameter is set to "products", which indicates the resource you want to create a new record for. For more examples and information, you can refer to the useCreate documentation (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
useCreate | refine
useCreate is an extended version of TanStack Query's useMutation. It supports all the features of useMutation and adds some extra features.
kapa.ai
kapa.ai14mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
itchy-amethyst
itchy-amethyst14mo ago
Thanks, I couldn't quite figure out how to use useCreate with the create form so I instead I did something along these lines and it works how I wanted. const { params } = useParsed(); const category_id = params?.category_id <Form {...formProps} layout="vertical" style={{ marginTop: 30 }} initialValues={{ category_id: category_id }}> ... </Form>