Data Fetching

In this step, we'll be learning about the basics of data fetching in Refine. <Refine /> component accepts a dataProvider prop which is used to handle all the data fetching and mutation operations with a simple interface. While Refine supports many data providers out of the box, for sake of this tutorial, we'll be creating our own data provider and connecting it to a fake REST API.

To learn more about the supported data providers, refer to the Supported Data Providers section in the Data Fetching guide.

Creating a Data Provider​

We'll be implementing each method one-by-one, ensuring thorough coverage of all details. We'll use fetch for API requests, but you're free to choose any library.

First, we'll create a src/providers/data-provider.ts file in our project, which will contain all the methods we need to implement for our data provider.

To see an empty data provider, check out the src/providers/data-provider.ts in the right panel.

Then, we'll pass our data provider to <Refine /> component in src/App.tsx file with the dataProvider prop.

Update your src/App.tsx file by adding the following lines:

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

import { dataProvider } from "./providers/data-provider";

export default function App(): JSX.Element {
  return (
    <Refine dataProvider={dataProvider}>
      <WelcomePage />
    </Refine>
  );
}

In the next step, we'll be learning about the fetching a record using Refine's useOne hook, and also about implementing the getOne method in our data provider.