conscious-sapphire•16mo 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•16mo 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•16mo 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•16mo ago

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

magic-amber•16mo ago

Hey @YechiamTK, there’s no built in support but it should be fairly easy to achieve by swizzling simple rest data provider 🙏

conscious-sapphire•16mo ago

Oh simple rest provider is swizz-able? Awesome