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

select-harlequin · 2024-03-06T21:30:01.300Z

In meta property there is only attribute for gqlMutation and gqlQuery

K

kapa.ai•3/6/24, 9:30 PM

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•3/6/24, 9:30 PM

----------------------
In Refine, the

useForm

useForm

hook from the Ant Design integration allows you to pass additional information to data provider methods using the

meta

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

meta

property to pass headers or other additional information to your data provider methods. In the following example, the

headers

headers

property is passed in the

meta

meta

object to the

create

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,  
 };  
 },  
 //...  
};

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

meta

object is used to pass the

headers

headers

property to the

create

create

method of the data provider. The

httpClient.post

httpClient.post

httpClient.post

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

----------------------

K

kapa.ai•3/6/24, 9:30 PM

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

S

select-harlequinOP•3/6/24, 9:35 PM

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

K

kapa.ai•3/6/24, 9:35 PM

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

K

kapa.ai•3/6/24, 9:35 PM

----------------------
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

posts

) and a GraphQL data provider for another (like

users

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} />;

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

posts

resource will use the REST data provider and

users

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

----------------------

K

kapa.ai•3/6/24, 9:35 PM

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

B

brilliant-lime•3/7/24, 2:10 PM

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

D

dangerous-fuchsia•4/15/24, 8:00 AM

@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?