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

In meta property there is only attribute for gqlMutation and gqlQuery
kapa.ai
kapa.ai74d 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
kapa.ai74d ago
<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
apparent-cyan
apparent-cyan74d ago
@kapa.ai So I need to have two data providers? One for graphql and one for rest?
kapa.ai
kapa.ai74d 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
kapa.ai74d ago
<@95552725294518272> kapa.ai is still learning and improving, please let us know how it did by reacting below
xenial-black
xenial-black74d ago
@chachi Yes, kapa is right. you can use 2 data provider
rising-crimson
rising-crimson35d 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?
More Posts
Wrong datetime format for AntD DatePickerI'm using AntD DatePicker component and when I'm on my edit page and want to fill the form with inituseshowhi how I can refetch the data or to have real time update, it means I want when I do changes on the Icon props@kapa.ai Hi there am using my own svgs in my side bar and I want to change there color on click ...NextJS persistency TanStack + Mantine Table sortingHey, I have made a Table with TanStack + Mantine Table and now i want to implement sorting functionkeyboard shortcutsi went thru the docs but i couldnt find anything regarding keyboard shortcuts. how can i implement tuseList or operator is not workingI have this query for global search but the or operator is returning nothing. I'm using supabase as useForm get the property datahi in Edit page I want to get the property data, in the code I provide, I get all the properties in I am able to do this with **useEffectI am able to do this with **useEffect**, but every hot reload breaks the state. Not sure why. A soluWith **useList**, why was **onSuccess**With **useList**, why was **onSuccess** deprecated?How the subscription works when enabling Live provider for graphql?Hi all, I would like to understand how Refine triggers subscriptions for instance in the CRM examplhow to hide some fields depending on one other?in the edit field i can hide the field using watch exported from useForm but i also need to hide thestop getOne api call on edit pagestop getOne api call on edit page antdNesting routesHow can I nest routes on Navbar? Let's say I have: InventoryProducts and InventoryMaterials resourceAnt Design useTable problemHello, here is my code ``` import { List, useTable } from '@refinedev/antd'; import { Table } from How Can I change the date format?``` <LocalizationProvider dateAdapter={AdapterDayjs}> <Grid container spacing={2}>Save button click but no trigger actionI have this part of component ```import React, { useCallback } from "react"; import { useTranslate, Where is the mantine option when using the CLI or refine.new?When trying to create a new NextJS Project either with the CLI or the website, mantine is not providSupabase functionsI need to use a supabase function to fetch a result of location decoding from long encoded postgis lRefine and metronicIs it possible to use the metronic theme with refine components?HandleSave mutate useUpdate & useOneI want to update and use useOne in the same handleSave code. When I put useOne inside the handleSave