rival-black
rival-black14mo ago

API Platform example, simple REST

Is there an example for using API platform and a simple REST dataProvider?
6 Replies
kapa.ai
kapa.ai14mo ago
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
kapa.ai14mo ago
<@700583944378122250> kapa.ai is still learning and improving, please let us how it did by reacting below
rival-black
rival-black14mo ago
@kapa.ai Can you give me an example how to build a authprovider using axios calls?
kapa.ai
kapa.ai14mo 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
kapa.ai14mo ago
<@700583944378122250> kapa.ai is still learning and improving, please let us how it did by reacting below
extended-salmon
extended-salmon13mo 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
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