stormy-gold•14mo ago

Add additional parameters to useForm hook with Mantine UI

I'm trying to add additional data to a useForm hook when the user creates a new post that is not relevant for the user and should not be shown in the form but must be sent to the API or it will not work. I found the meta option which as far as I understand should do exactly that. I'm using Mantine as UI framework so it is wrapped in refineCoreProps, but it doesn't work. The request does not include any additional parameter in the POST request. Any ideas what I'm doing wrong?


const {
        getInputProps,
        saveButtonProps,
        setFieldValue,
        refineCore: { formLoading },
      } = useForm({
          initialValues: { 
            id: "",
            title: "",
          },
          refineCoreProps: {
            meta: {
              apiKey: "thisIsATest"
            },
            resource: "posts",
          },
      });

5 Replies

kapa.ai•14mo ago

Hi @fuss132. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The meta property you're using is indeed intended for passing additional information to data provider methods. However, it seems like you're trying to include this additional data in the POST request when creating a new post. The meta property doesn't directly add data to the POST request, but it provides additional information to the data provider methods. In your case, you need to handle this meta data in your data provider's create method. Here's an example of how you can do this:

useForm({  
 refineCoreProps: {  
 meta: {  
 apiKey: "thisIsATest",  
 },  
 resource: "posts",
 },  
});  
  
const myDataProvider = {  
 //...  
 create: async ({ resource, variables, meta }) => {  
 const apiKey = meta?.apiKey ?? {};  
 const url = `${apiUrl}/${resource}`;  
  
 const { data } = await httpClient.post(url, { ...variables, apiKey }, { headers });  
  
 return {  
 data,  
 };  
 },  
 //...  
};

useForm({  
 refineCoreProps: {  
 meta: {  
 apiKey: "thisIsATest",  
 },  
 resource: "posts",
 },  
});  
  
const myDataProvider = {  
 //...  
 create: async ({ resource, variables, meta }) => {  
 const apiKey = meta?.apiKey ?? {};  
 const url = `${apiUrl}/${resource}`;  
  
 const { data } = await httpClient.post(url, { ...variables, apiKey }, { headers });  
  
 return {  
 data,  
 };  
 },  
 //...  
};

In this example, the apiKey from the meta object is added to the POST request. Please adjust this according to your API's requirements. For more information, please refer to the meta section of the General Concepts documentation → (https://refine.dev/docs/api-reference/general-concepts/#meta) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

stormy-goldOP•14mo ago

@kapa.ai This is going into the right direction. I'm using supabase and the default data provider for it in refine. How can I add this metadata for it?

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The Supabase data provider in refine handles the CRUD operations for you, so you don't have to manually define the create method as in the previous example. However, if you need to add additional data to the POST request, you might need to extend the default Supabase data provider. Here's an example of how you can do this:

import { dataProvider as supabaseDataProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

const myDataProvider = {
  ...supabaseDataProvider(supabaseClient),
  create: async ({ resource, variables, meta }) => {
    const apiKey = meta?.apiKey ?? {};
    const newVariables = { ...variables, apiKey };
    return supabaseDataProvider(supabaseClient).create({ resource, variables: newVariables });
  },
};

// In your App.tsx
<Refine dataProvider={myDataProvider} /* ... */ >
  {/* ... */}
</Refine>

import { dataProvider as supabaseDataProvider } from "@refinedev/supabase";
import { supabaseClient } from "utility";

const myDataProvider = {
  ...supabaseDataProvider(supabaseClient),
  create: async ({ resource, variables, meta }) => {
    const apiKey = meta?.apiKey ?? {};
    const newVariables = { ...variables, apiKey };
    return supabaseDataProvider(supabaseClient).create({ resource, variables: newVariables });
  },
};

// In your App.tsx
<Refine dataProvider={myDataProvider} /* ... */ >
  {/* ... */}
</Refine>

In this example, we're extending the create method of the default Supabase data provider to include the apiKey from the meta object in the POST request. Please adjust this according to your API's requirements. For more information, please refer to the Supabase data provider documentation → (https://refine.dev/docs/packages/documentation/data-providers/supabase/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

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

Add additional parameters to useForm hook with Mantine UI

Did you find this page helpful?