Simple REST

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.

import { Refine } from "@refinedev/core";
import dataProvider from "@refinedev/simple-rest";
import axios from "axios";

const httpClient = axios.create();

const App = () => {
  return (
    <Refine
      // `httpClient` is optional.
      dataProvider={(dataProvider("<API_URL>"), httpClient)}
      /* ... */
    />
  );
};

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:

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

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",
  },
});

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",
    },
  },
});

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("https://api.fake-rest.refine.dev")}
         /* ... */
       />
     );
   };