Skip to main content
Version: 4.xx.xx
Swizzle Ready
Source Code

Simple REST

The Simple REST data provider is a package that provides an implementation for working with REST APIs that conform to a standard API design. It is built on the foundation of the json-server package.

You can use this data provider to quickly get started with Refine and then customize it to fit your specific needs.

Installation​

npm i @refinedev/simple-rest

Usage​

Simple REST package exports a function that accepts apiUrl and httpClient parameters. While apiUrl is required to set the base URL for your API endpoints, httpClient is optional and can be used to provide a custom axios instance to handle logics like authentication, error handling, etc.

app.tsx
import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";

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

URL design​

The data provider methods are designed to work with REST APIs that follow the standard design. The following table shows the expected URL for each method:

MethodURLQuery ParametersBody
getListapiUrl / resourcepagination, sorters, filters
getOneapiUrl / resource / id
getManyapiUrl / resourceid
createapiUrl / resourcevariables
updateapiUrl / resource / idvariables
deleteOneapiUrl / resource / iddata: variables

Default HTTP methods and customizing them​

The following table shows the HTTP method used for each data provider method:

MethodHTTP Method
getListGET
getOneGET
getManyGET
createPOST
updatePATCH
deleteOneDELETE

You can customize the HTTP method used for each data provider method by passing a method property in the meta parameter when calling a hook.

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

const { mutate } = useUpdate();

mutate({
resource: "posts",
id: 1,
values: {
title: "New title",
},
meta: {
method: "put",
},
});

Passing custom headers​

You can pass custom headers to the data provider by passing a headers property in the meta parameter.

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

useOne({
resource: "posts",
id: 1,
meta: {
headers: {
"X-Custom-Header": "Custom header value",
},
},
});

Customizing the data provider
Check the guide
Please check the guide for more information on this topic.
​

In some cases, you may need to customize the data provider to work with a REST API that doesn't follow the simple-rest design. In this case, you can use the swizzle command to customize the data provider.

  1. Run the swizzle command in the project directory:

    npm run refine swizzle
  2. Select @refinedev/simple-rest from the list of available data providers.

  3. Edit the /rest-data-provider/index.ts file to customize the data provider.

  4. Pass the customized data provider to the dataProvider prop of the Refine component.

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

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

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