wise-white•2y 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•2y 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•2y 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•2y ago

<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below

flat-fuchsia•2y 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.

wise-whiteOP•2y 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•2y ago

Let me check the knowledge base for you. One moment! :books:

kapa.ai•2y 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•2y ago

<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below

wise-whiteOP•2y 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>

Use query parameters to set the initial form values

Did you find this page helpful?