sunny-green
sunny-green2y ago

Fetch instead of axios

Heya, quick question - is it possible to provide the dataProvider with fetch instance rather than axios instance? (from how it looks it seems not, but wanted to confirm)
5 Replies
kapa.ai
kapa.ai2y ago
Hi @YechiamTK. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
kapa.ai
kapa.ai2y ago
---------------------- Yes, it is possible to use fetch instead of axios when creating a custom data provider in refine. In the provided extracts, there is an example of using fetch for error handling in a custom data provider:
import { DataProvider, HttpError } from "@refinedev/core";

export const dataProvider = (apiUrl: string): DataProvider => ({
getOne: async ({ resource, id }) => {
try {
const response = await fetch(
`https://api.example.com/${resource}/${id}`,
);

if (!response.ok) {
const error: HttpError = {
message: response.statusText,
statusCode: response.status,
};
return Promise.reject(error);
}

return {
data: response.data,
};
} catch (error) {
const error: HttpError = {
message: error?.message || "Something went wrong",
statusCode: error?.status || 500,
};
return Promise.reject(error);
}
},
// ...
});
import { DataProvider, HttpError } from "@refinedev/core";

export const dataProvider = (apiUrl: string): DataProvider => ({
getOne: async ({ resource, id }) => {
try {
const response = await fetch(
`https://api.example.com/${resource}/${id}`,
);

if (!response.ok) {
const error: HttpError = {
message: response.statusText,
statusCode: response.status,
};
return Promise.reject(error);
}

return {
data: response.data,
};
} catch (error) {
const error: HttpError = {
message: error?.message || "Something went wrong",
statusCode: error?.status || 500,
};
return Promise.reject(error);
}
},
// ...
});
Source: https://refine.dev/docs/api-reference/core/providers/data-provider (https://refine.dev/docs/api-reference/core/providers/data-provider) You can replace axios with fetch and modify the custom data provider accordingly to suit your needs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Data Provider | refine
The data provider acts as a data layer for your app that makes the HTTP requests and encapsulates how the data is retrieved. refine consumes these methods via data hooks.
kapa.ai
kapa.ai2y ago
<@239743886581301248> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange
genetic-orange2y ago
Hey @YechiamTK, there’s no built in support but it should be fairly easy to achieve by swizzling simple rest data provider 🙏
sunny-green
sunny-greenOP2y ago
Oh simple rest provider is swizz-able? Awesome