fair-rose•3mo ago

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

kapa.ai•3mo ago

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:

import { RestfulProvider, GraphqlProvider, SupabaseProvider } from "@refinedev/core";

const dataProvider = {
    "posts": new GraphqlProvider("<https://api.example.com/graphql">),
    "products": new RestfulProvider("<https://api.example.com/restful">),
    "users": new SupabaseProvider("<https://api.example.com/supabase">),
};

<Refine dataProvider={dataProvider} />;

import { RestfulProvider, GraphqlProvider, SupabaseProvider } from "@refinedev/core";

const dataProvider = {
    "posts": new GraphqlProvider("<https://api.example.com/graphql">),
    "products": new RestfulProvider("<https://api.example.com/restful">),
    "users": new SupabaseProvider("<https://api.example.com/supabase">),
};

<Refine dataProvider={dataProvider} />;

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

kapa.ai•3mo ago

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

fair-rose•3mo ago

@kapa.ai is this the right way to use data provider

message.txt

kapa.ai•3mo ago

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:

import { Refine } from "@refinedev/core";  
import dataProvider from "./dataProvider";  
  
const App = () => (  
 <Refine  
 /* ... */  
 dataProvider={dataProvider}  
 />  
);

import { Refine } from "@refinedev/core";  
import dataProvider from "./dataProvider";  
  
const App = () => (  
 <Refine  
 /* ... */  
 dataProvider={dataProvider}  
 />  
);

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:

import { RestfulProvider, GraphqlProvider, SupabaseProvider } from "@refinedev/core";

const dataProvider = {
    "posts": new GraphqlProvider("<https://api.example.com/graphql">),
    "products": new RestfulProvider("<https://api.example.com/restful">),
    "users": new SupabaseProvider("<https://api.example.com/supabase">),
};

<Refine dataProvider={dataProvider} />;

import { RestfulProvider, GraphqlProvider, SupabaseProvider } from "@refinedev/core";

const dataProvider = {
    "posts": new GraphqlProvider("<https://api.example.com/graphql">),
    "products": new RestfulProvider("<https://api.example.com/restful">),
    "users": new SupabaseProvider("<https://api.example.com/supabase">),
};

<Refine dataProvider={dataProvider} />;

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

kapa.ai•3mo ago

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