using multiple data provider
import { AreaChartOutlined } from "@ant-design/icons";
import { Card } from "antd";
import React, { useMemo } from "react";
import { Text } from "../Props/Text";
import { Area, AreaConfig, Line } from "@ant-design/plots";
import { useList } from "@refinedev/core";
import { DASHBOARD_DEALS_CHART_QUERY } from "@/graphql/queries";
import { mapDealsData } from "@/utils/mapDeals";
import { GetFieldsFromList } from "@refinedev/nestjs-query";
export const DashboardCharts = () => {
const { data } = useList({
resource: "dealStages",
filters: [{ field: "title", operator: "in", value: ["WON", "LOST"] }],
meta: {
gqlQuery: DASHBOARD_DEALS_CHART_QUERY,
},
});
const dealData = useMemo(() => {
return mapDealsData(data?.data);
}, [data?.data]);
const config: AreaConfig = {
data: dealData,
xField: "timeText",
yField: "value",
seriesField: "state",
isStack: false,
startOnZero: false,
animation: true,
smooth: true,
legend: {
offsetY: -6,
},
yAxis: {
tickCount: 4,
label: {
formatter: (y: string) => {
return
$${Number(y) / 1000}k
;
},
},
},
tooltip: {
formatter: (data) => {
return {
name: data.state,
value: $${Number(data.value) / 1000}k
,
};
},
},
};
return (
<Card
style={{ height: "100%" }}
styles={{
header: {
padding: "8px 16px",
},
body: {
padding: "1.5rem 1rem",
},
}}
title={
<div
style={{
display: "flex",
alignItems: "center",
gap: "8px",
}}
>
<AreaChartOutlined />
<Text size="sm" style={{ marginLeft: "0.7rem" }} />
Plods & Leaves
</div>
}
>
<Area {...config} height={300} />
</Card>
);
};
how can i use different data provider in this case ?5 Replies
Hi @Simon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
In Refine, you can use multiple data providers by specifying the data provider for each resource in the resource's configuration. This allows you to use different data providers for different resources in your application.
Here's an example of how you can define multiple data providers:
In the example above, the
posts
resource will use the GraphqlProvider
, the products
resource will use the RestfulProvider
, and the users
resource will use the SupabaseProvider
.
In your case, you can specify the data provider for the dealStages
resource in its configuration. Then, when you call useList
with resource: "dealStages"
, it will use the specified data provider.
For more information, you can check out the Refine documentation on multiple data providers (https://refine.dev/docs/data/data-provider#multiple-data-providers).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@488247167497011211> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire•5mo ago
@kapa.ai is this the right way to use data provider
Let me check the knowledge base for you. One moment! :books:
----------------------
Yes, the way you've used the data provider in your code is correct. In Refine, the
dataProvider
prop is passed to the <Refine />
component to enable the application to communicate with an external API or service. The dataProvider
sends HTTP requests and receives responses via predefined methods.
Here's a basic example of how to use a data provider:
In your case, if you want to use different data providers for different resources, you can do so by specifying the data provider for each resource in the resource's configuration. Here's an example:
In this example, the posts
resource will use the GraphqlProvider
, the products
resource will use the RestfulProvider
, and the users
resource will use the SupabaseProvider
.
For more information, you can check out the Refine documentation on data providers (https://refine.dev/docs/data/data-provider).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@488247167497011211> kapa.ai is still learning and improving, please let us know how it did by reacting below