Fetch instead of axios

verbal-lime · 2023-05-01T07:51:35.678Z

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)

K

kapa.ai•5/1/23, 7:51 AM

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

K

kapa.ai•5/1/23, 7:52 AM

----------------------
Yes, it is possible to use

fetch

fetch

instead of

axios

axios

axios

axios when creating a custom data provider in refine. In the provided extracts, there is an example of using

fetch

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

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

axios

axios

axios with

fetch

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

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

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

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.

K

kapa.ai•5/1/23, 7:52 AM

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

E

efficient-indigo•5/1/23, 7:57 AM

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

Eefficient-indigo Hey @YechiamTK, there’s no built in support but it should be fairly easy to achi...

V

verbal-limeOP•5/1/23, 7:58 AM

Oh simple rest provider is swizz-able? Awesome