3.2. Data Provider

This post explains the data provider concept and its use in refine. It demonstrates the use of data hooks in order to access data provider methods from inside a UI component. It also provides a list of supported data providers in refine, such as the Simple REST API.

What is a Data Provider?

The data provider object represents the data layer or context of our refine app from which HTTP requests are carried out and retrieved data is encapsulated. It contains a specific set of methods that should be defined to carry out CRUD actions against resources accessible from a backend API.

A typical data provider has the following methods:

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

const dataProvider: DataProvider = {
    create: ({ resource, variables, meta }) => Promise,
    deleteOne: ({ resource, id, variables, meta }) => Promise,
    getList: ({ resource, pagination, sorters, filters, meta }) => Promise,
    getOne: ({ resource, id, meta }) => Promise,
    update: ({ resource, id, variables, meta }) => Promise,
    getApiUrl: () => "",
};

The data provider methods are used to perform data retrieval and mutation operations from consumer components. Consumer components are able to access and invoke these methods via a myriad of data hooks refine core and its supplementary packages provide.

Normally, for a custom backend API of our own, we should define the methods of the dataProvider object from scratch. For our React admin panel app though, we don't need to worry about defining a data provider ourselves because we are using Simple Rest API data provider shipped by the @refinedev/simple-rest supplementary package.

For more details, refer to the refine-simple-rest source code →

refine offers built-in data provider support for the most popular API providers.

Data providers are geared to communicate with REST, GraphQL, RPC, and SOAP based APIs. A data provider can be considered as an adapter between refine and the API endpoints.

Using a Data Provider in refine

In the previous units, our REST API was consumed from the default Inferencer-generated pages. To enable refine to communicate with the API, we first had to register the data provider using the dataProvider prop of <Refine />:

src/App.tsx

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

<Refine dataProvider={dataProvider("https://api.fake-rest.refine.dev")} />;

Please refer to the <Refine /> component's dataProvider prop documentation for more detailed information.

Using Data Hooks to Access Data Provider Methods

We use refine's data hooks when we need to fetch data from the API. These data hooks internally manage the overhead of accessing data provider methods. The required parameters accepted by a data provider method need to be passed to the data hooks that are used inside a component and the response from the API is returned.

For instance, a typical use of refine's useList() data hook when we want to get all records from the blog_posts resource looks like this:

src/pages/posts/index.tsx

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

const postUseListResult = useList({
    resource: "blog_posts",
    sorters: [
        {
            field: "id",
            order: "desc",
        },
    ],
    filters: [
        {
            field: "title",
            operator: "contains",
            value: "hello",
        },
    ],
});

In the above code, the useList() hook accepts a parameter object which basically configures the query to the backend server. These parameters are forwarded to the data provider's getList() method internally. The return value is then passed to components for presenting the data. We elaborate on presentation of the data with the Material UI <DataGrid /> component in Unit 4.1.

Supported Data Providers

refine supports many data providers. To include them in your project, you can use npm install [packageName] or you can select the preferred data provider with the npm create refine-app@latest projectName during the project creation phase with CLI. This will allow you to easily use these data providers in your project.

Community ❤️

If you have created a custom data provider and would like to share it with the community, please don't hesitate to get in touch with us. We would be happy to include it on this page for others to use.

Checklist

I understand what is data provider and how it works.

I understand that data provider methods are accessible from UI components via corresponding data hooks.

I learned that refine offers built-in data providers for the most popular systems.

What is a Data Provider?​

Using a Data Provider in refine​

Using Data Hooks to Access Data Provider Methods​

Supported Data Providers​

Checklist

What is a Data Provider?

Using a Data Provider in refine

Using Data Hooks to Access Data Provider Methods

Supported Data Providers