API Platform example, simple REST

dangerous-fuchsia · 2023-04-29T17:35:05.083Z

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

K

kapa.ai•4/29/23, 5:35 PM

Hi @heinzmandala. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•4/29/23, 5:35 PM

----------------------
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

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/29/23, 5:35 PM

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

D

dangerous-fuchsiaOP•4/29/23, 5:46 PM

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

K

kapa.ai•4/29/23, 5:46 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•4/29/23, 5:47 PM

----------------------
Sure! Here's an example of building an

authProvider

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)}
    />
  );
};

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

authProvider

is then passed to the

<Refine>

<Refine>

component.

K

kapa.ai•4/29/23, 5:47 PM

You can find more information about creating an

authProvider

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

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•4/29/23, 5:47 PM

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

B

brilliant-lime•5/1/23, 11:43 AM

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