API Platform example, simple REST

Is there an example for using API platform and a simple REST dataProvider?

6 Replies

Hi @heinzmandala. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can check out the refine documentation for more information on data providers and examples: refine Data Providers (https://refine.dev/docs/tutorial/understanding-dataprovider/index). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@700583944378122250> kapa.ai is still learning and improving, please let us how it did by reacting below

wise-white•2y ago

@kapa.ai Can you give me an example how to build a authprovider using axios calls?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure! Here's an example of building an authProvider using axios calls. This example is taken from the extracts above:

import { AuthBindings } from "@refinedev/core";
import axios from "axios";

const axiosInstance = axios.create();

const mockUsers = [
  { username: "admin", token: "123" },
  { username: "editor", token: "321" },
];

const App = () => {
  const authProvider: AuthBindings = {
    login: async ({ username, password }) => {
      // Suppose we actually send a request to the back end here.
      const user = mockUsers.find((item) => item.username === username);

      if (user) {
        localStorage.setItem("auth", JSON.stringify(user));
        // This sets the authorization headers on Axios instance
        axiosInstance.defaults.headers.common = {
          Authorization: `Bearer ${user.token}`,
        };

        return {
          redirectTo: "/",
          success: true,
        };
      }
      return {
        success: false,
        error: {
          name: "Login Error",
          message: "Username or password is incorrect",
        },
      };
    },
    // ---
  };

  return (
    <Refine
      authProvider={authProvider}
      routerProvider={routerProvider}
      // In order to use the axios instance, we need to pass it to the dataProvider
      dataProvider={dataProvider(API_URL, axiosInstance)}
    />
  );
};

import { AuthBindings } from "@refinedev/core";
import axios from "axios";

const axiosInstance = axios.create();

const mockUsers = [
  { username: "admin", token: "123" },
  { username: "editor", token: "321" },
];

const App = () => {
  const authProvider: AuthBindings = {
    login: async ({ username, password }) => {
      // Suppose we actually send a request to the back end here.
      const user = mockUsers.find((item) => item.username === username);

      if (user) {
        localStorage.setItem("auth", JSON.stringify(user));
        // This sets the authorization headers on Axios instance
        axiosInstance.defaults.headers.common = {
          Authorization: `Bearer ${user.token}`,
        };

        return {
          redirectTo: "/",
          success: true,
        };
      }
      return {
        success: false,
        error: {
          name: "Login Error",
          message: "Username or password is incorrect",
        },
      };
    },
    // ---
  };

  return (
    <Refine
      authProvider={authProvider}
      routerProvider={routerProvider}
      // In order to use the axios instance, we need to pass it to the dataProvider
      dataProvider={dataProvider(API_URL, axiosInstance)}
    />
  );
};

In this example, we create an axios instance and use it to handle the login process. We store the user token in the local storage and set the authorization headers on the axios instance. The authProvider is then passed to the <Refine> component. You can find more information about creating an authProvider in the refine documentation (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@700583944378122250> kapa.ai is still learning and improving, please let us how it did by reacting below

genetic-orange•17mo ago

we don't have example for this https://api-platform.com/
but you can create your data provider https://refine.dev/docs/tutorial/understanding-dataprovider/index/

API Platform

The API-first framework: REST, GraphQL and real-time

1. Data Provider | refine

The Data Provider unit is optional for the tutorial. You can directly skip to the next unit, Adding CRUD PagesAdding CRUD PagesAdding CRUD PagesAdding CRUD PagesAdding CRUD Pages, if desired