Multiple dataprovider usage

[damla]

Hello,

In my project, which consists of multiple backend services, we have a separate NestJS project acting as our BFF (Backend for Frontend). Since each service behaves differently — such as returning different data structures or requiring different query parameters — we maintain separate data providers accordingly.

At this point, I have a question regarding the best approach to structuring these data providers: should we organize them based on services (i.e., per backend service), or should we structure them based on resources/pages on the UI? There are cases where a single page interacts with multiple backend services, which leads to challenges such as the need for manual cache invalidation.

So, my core question is:
When working with multiple data providers, is it better to create new providers per resource or per backend service?

Personally, I find service-based organizations more reasonable in terms of the maintainability and configurability of data providers. I would appreciate your insights on this matter.

[alicanerdurmaz]

I would prefer creating a separate data provider for each service.

<Refine /> Usage Example

import { Refine } from "@refinedev/core";

import authApi          from "./providers/auth";       
import userApi          from "./providers/user";         
import inventoryApi     from "./providers/inventory";    
import ordersApi        from "./providers/orders";        
import notificationsApi from "./providers/notifications"; 
import analyticsApi     from "./providers/analytics";     

export default function App() {
  return (
    <Refine
      dataProvider={{
        default: authApi,
        users:   userApi,
        stock:   inventoryApi,
        orders:  ordersApi,
        notifications:   notificationsApi,
        stats:   analyticsApi,
      }}
      resources={[
        { name: "login" }, // authApi (default)
        { name: "users",           meta: { dataProviderName: "users" } },
        { name: "products",        meta: { dataProviderName: "stock" } },
        { name: "orders",          meta: { dataProviderName: "orders" } },
        { name: "notifications",   meta: { dataProviderName: "notifications" } },
        { name: "sales_reports",   meta: { dataProviderName: "stats" } },
      ]}
    />
  );
}

Data Hook Usage Example

If the dataProviderName is defined in the resource declaration,
you don't need to explicitly pass dataProviderName in every hook usage.

/* Product + Sales Report on the same screen */
const { data: product } = useOne({
  resource: "products",
  id: params.id,            
  dataProviderName: "stock",
});

const { data: report } = useOne({
  resource: "sales_reports",
  id: params.id,
  dataProviderName: "stats",  
});