How do I sent REST request with useForm from refinedev/antd

In meta property there is only attribute for gqlMutation and gqlQuery

7 Replies

kapa.ai•11mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Refine, the useForm hook from the Ant Design integration allows you to pass additional information to data provider methods using the meta property. This can be used for various purposes such as customizing the data provider methods for specific use cases, generating GraphQL queries using plain JavaScript Objects (JSON), and providing additional parameters to the redirection path after the form is submitted. However, if you want to send a REST request, you can use the meta property to pass headers or other additional information to your data provider methods. In the following example, the headers property is passed in the meta object to the create method:

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

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

In this example, the meta object is used to pass the headers property to the create method of the data provider. The httpClient.post method is then used to send a POST request to the specified URL with the provided headers. For more information, you can refer to the Refine Ant Design useForm documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form#meta). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

optimistic-goldOP•11mo ago

@kapa.ai So I need to have two data providers? One for graphql and one for rest?

kapa.ai•11mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can use multiple data providers in Refine for different resources. For instance, you can use a REST data provider for one resource and a GraphQL data provider for another. Refine allows you to define a data provider for each resource. This means you can use a REST data provider for one endpoint (like posts) and a GraphQL data provider for another (like users). Here's an example of how you can define multiple data providers:

import restProvider from "@refinedev/rest";
import graphqlProvider, { GraphQLClient } from "@refinedev/graphql";

const restClient = restProvider("REST_API_URL");
const graphqlClient = new GraphQLClient("GRAPHQL_API_URL");

const dataProvider = {
    posts: restClient,
    users: graphqlProvider(graphqlClient),
    // ... other resources
};

<Refine dataProvider={dataProvider} />;

import restProvider from "@refinedev/rest";
import graphqlProvider, { GraphQLClient } from "@refinedev/graphql";

const restClient = restProvider("REST_API_URL");
const graphqlClient = new GraphQLClient("GRAPHQL_API_URL");

const dataProvider = {
    posts: restClient,
    users: graphqlProvider(graphqlClient),
    // ... other resources
};

<Refine dataProvider={dataProvider} />;

In this example, posts resource will use the REST data provider and users resource will use the GraphQL data provider. For more information, you can refer to the Refine Data Fetching documentation (https://refine.dev/docs/guides-concepts/data-fetching) and the Refine GraphQL documentation (https://refine.dev/docs/data/packages/graphql). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•11mo ago

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

exotic-emerald•11mo ago

@chachi Yes, kapa is right. you can use 2 data provider

rare-sapphire•10mo ago

@chachi have you solve this? i am trying to use the useForm from refinedev/antd, my server is graphql, the example published in https://codesandbox.io/p/devbox/black-shadow-t3dwxk?embed=1&file=%2Fsrc%2Fpages%2Fposts%2Fcreate.tsx%3A7%2C45, is using "@refinedev/nestjs-query", but i am not using nestjs-query. i havent figure out how to correctly post the information correctly, it seems from my console log it posts an object with more data not supported by my mutation input type any help?

How do I sent REST request with useForm from refinedev/antd

Did you find this page helpful?