Data Provider Guide | Best Practices in Refine v5

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

import dataProvider from "./dataProvider";

const App = () => (
  <Refine
    /* ... */
    dataProvider={dataProvider}
  />
);

setInitialRoutes(["/posts"]);
setRefineProps({ Sider: () => null });

// visible-block-start
import { Refine, useList } from "@refinedev/core";
import routerProvider from "@refinedev/react-router";
import dataProvider from "@refinedev/simple-rest";

import { BrowserRouter, Route, Routes } from "react-router";

import { Collapse, Tag } from "antd";

const API_URL = "https://api.fake-rest.refine.dev";
const FINE_FOODS_API_URL = "https://api.finefoods.refine.dev";

interface IPost {
  id: number;
  title: string;
  status: "published" | "draft" | "rejected";
}

interface IProduct {
  id: number;
  name: string;
  price: number;
}

const App = () => {
  return (
    <BrowserRouter>
      <Refine
        routerProvider={routerProvider}
        // highlight-start
        dataProvider={{
          // `default` is required to determine the default data provider
          default: dataProvider(API_URL),
          fineFoods: dataProvider(FINE_FOODS_API_URL),
        }}
        // highlight-end
        resources={[
          {
            // highlight-next-line
            // Refine will use the `default` data provider for this resource
            name: "posts",
            list: "/posts",
          },
          {
            name: "products",
            meta: {
              // highlight-start
              // Refine will use the `fineFoods` data provider for this resource
              dataProviderName: "fineFoods",
              // highlight-end
            },
          },
        ]}
      >
        <Routes>
          <Route path="/posts" element={<PostList />} />
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

const PostList = () => {
  const {
    result: { data: posts },
  } = useList<IPost>({
    resource: "posts",
    // highlight-start
    // Data provider can be selected through props
    dataProviderName: "default",
    // highlight-end
  });
  // highlight-start
  // We've defined the data provider for this resource as "fineFoods" in its config so we don't need to pass it here
  const {
    result: { data: products },
  } = useList<IProduct>({ resource: "products" });
  // highlight-end

  console.log({
    posts,
    products,
  });

  return (
    <Collapse defaultActiveKey={["products"]}>
      <Collapse.Panel header="Posts" key="posts">
        {posts?.map((post) => (
          <div
            key={post.title}
            style={{
              display: "flex",
              flexDirection: "row",
              gap: "0.5rem",
              marginBottom: "0.25rem",
            }}
          >
            {post.title}
            <Tag>{post.status}</Tag>
          </div>
        ))}
      </Collapse.Panel>
      <Collapse.Panel header="Products" key="products">
        {products?.map((product) => (
          <div
            key={product.name}
            style={{
              display: "flex",
              flexDirection: "row",
              gap: "0.5rem",
              marginBottom: "0.25rem",
            }}
          >
            {product.name}
            <Tag>{product.price / 10}</Tag>
          </div>
        ))}
      </Collapse.Panel>
    </Collapse>
  );
};
// visible-block-end

render(<App />);

useTable({
  meta: {
    dataProviderName: "example",
  },
});

const App = () => (
  <Refine
    dataProvider={{
      default: defaultDataProvider,
      example: exampleDataProvider,
    }}
    resources={[
      {
        // `default` data provider will be used for this resource
        name: "posts",
      },
      {
        name: "products",
        // `exampleDataProvider` data provider will be used for this resource
        meta: { dataProviderName: "exampleDataProvider" },
      },
    ]}
  />
);

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

const dataProvider: DataProvider = {
  // required methods
  getList: ({ resource, pagination, sorters, filters, meta }) => Promise,
  create: ({ resource, variables, meta }) => Promise,
  update: ({ resource, id, variables, meta }) => Promise,
  deleteOne: ({ resource, id, variables, meta }) => Promise,
  getOne: ({ resource, id, meta }) => Promise,
  getApiUrl: () => "",
  // optional methods
  getMany: ({ resource, ids, meta }) => Promise,
  createMany: ({ resource, variables, meta }) => Promise,
  deleteMany: ({ resource, ids, variables, meta }) => Promise,
  updateMany: ({ resource, ids, variables, meta }) => Promise,
  custom: ({ url, method, filters, sorters, payload, query, headers, meta }) =>
    Promise,
};

getList: async ({ resource, pagination, sorters, filters, meta }) => {
  const { currentPage, pageSize } = pagination ?? {};

  // Adjust request parameters to meet the requirements of your API
  const response = await apiClient.get(`/${resource}`, {
    params: { _page: currentPage, _limit: pageSize },
  });

  // The total row count could be sourced differently based on the provider
  const total = response.headers["x-total-count"] ?? response.data.length;

  return {
    data: response.data,
    total,
  };
};

create: async ({ resource, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

update: async ({ resource, id, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

deleteOne: async ({ resource, id, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

getOne: async ({ resource, id, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

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

export const dataProvider = (apiUrl: string): DataProvider => ({
  getApiUrl: () => apiUrl,
  // ...
});

custom: async ({
  url,
  method,
  filters,
  sorters,
  payload,
  query,
  headers,
  meta,
}) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

getMany: async ({ resource, ids, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

createMany: async ({ resource, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

deleteMany: async ({ resource, ids, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

updateMany: async ({ resource, ids, variables, meta }) => {
  // You can handle the request according to your API requirements.

  return {
    data,
  };
};

import { DataProvider, HttpError } from "@refinedev/core";

export const dataProvider = (apiUrl: string): DataProvider => ({
  getOne: async ({ resource, id }) => {
    try {
      const response = await fetch(`https://api.example.com/${resource}/${id}`);

      // highlight-start
      if (!response.ok) {
        const error: HttpError = {
          message: response.statusText,
          statusCode: response.status,
        };
        return Promise.reject(error);
      }
      // highlight-end

      return {
        data: response.data,
      };
    } catch (error) {
      // highlight-start
      const error: HttpError = {
        message: error?.message || "Something went wrong",
        statusCode: error?.status || 500,
      };
      return Promise.reject(error);
      // highlight-end
    }
  },
  // ...
});

// highlight-start
import axios from "axios";
import { DataProvider, HttpError } from "@refinedev/core";
// highlight-end
import { stringify } from "query-string";

// highlight-start
// Error handling with axios interceptors
const axiosInstance = axios.create();

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    const customError: HttpError = {
      ...error,
      message: error.response?.data?.message,
      statusCode: error.response?.status,
    };

    return Promise.reject(customError);
  },
);
// highlight-end

export const dataProvider = (apiUrl: string): DataProvider => ({
  // Methods
});

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

useOne({
  resource: "post",
  id: "1",
  meta: {
    headers: {
      "x-custom-header": "hello world",
    },
  },
});

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

export const dataProvider = (apiUrl: string): DataProvider => ({
  ...
  getOne: async ({ resource, id, variables, meta }) => {
    // highlight-next-line
    const { headers } = meta;
    const url = `${apiUrl}/${resource}/${id}`;

    // highlight-start
    httpClient.defaults.headers = {
      ...headers,
    };
    // highlight-end

    const { data } = await httpClient.get(url, variables);

    return {
      data,
    };
  },
});

import dataProvider from "@refinedev/simple-rest";

const simpleRestProvider = dataProvider("API_URL");
const myDataProvider = {
  ...simpleRestProvider,
  update: async ({ resource, id, variables }) => {
    const url = `${apiUrl}/${resource}/${id}`;

    const { data } = await httpClient.put(url, variables);

    return {
      data,
    };
  },
};

<Refine dataProvider={myDataProvider}></Refine>;