stormy-gold•2y ago

Custom api endpoint for fetching items

Hi guys, I'm new to Refine - I wanted to know if it's possible to prevent the default fetch url to invoke when we goto a specific page? For example, I have a resource user and on the list page - localhost:3000/users I want to fetch the users from api/users/latest and not api/users

18 Replies

kapa.ai•2y ago

Hi @krockstar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can customize the fetch URL for a specific page in Refine. You can achieve this by using a custom data provider and overriding the getList method for the specific resource. Here's an example of how you can create a custom data provider:

import baseDataProvider from "@refinedev/simple-rest";

const customDataProvider = (apiUrl) => {
  const baseProvider = baseDataProvider(apiUrl);

  return {
    ...baseProvider,
    getList: async (resource, params) => {
      if (resource === "users") {
        const customUrl = `${apiUrl}/users/latest`;
        // Fetch data from customUrl and return the result
      } else {
        return baseProvider.getList(resource, params);
      }
    },
  };
};

import baseDataProvider from "@refinedev/simple-rest";

const customDataProvider = (apiUrl) => {
  const baseProvider = baseDataProvider(apiUrl);

  return {
    ...baseProvider,
    getList: async (resource, params) => {
      if (resource === "users") {
        const customUrl = `${apiUrl}/users/latest`;
        // Fetch data from customUrl and return the result
      } else {
        return baseProvider.getList(resource, params);
      }
    },
  };
};

Then, use this custom data provider in your <Refine> component:

import { Refine } from "@refinedev/core";
import customDataProvider from "./customDataProvider";

function App() {
  return (
    <Refine
      dataProvider={customDataProvider("https://api.example.com")}
      // other props
    />
  );
}

export default App;

import { Refine } from "@refinedev/core";
import customDataProvider from "./customDataProvider";

function App() {
  return (
    <Refine
      dataProvider={customDataProvider("https://api.example.com")}
      // other props
    />
  );
}

export default App;

This will fetch users from api/users/latest instead of api/users when you visit the list page at localhost:3000/users. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

stormy-goldOP•2y ago

@kapa.ai but what about the const customUrl? Where is that used?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Apologies for the confusion in my previous response. I missed providing the implementation for fetching data from the custom URL. Here's the updated custom data provider with the implementation for fetching data from customUrl:

import { DataProvider } from "@refinedev/core";
import httpClient from "your-http-client"; // Replace with your preferred HTTP client

const customDataProvider = (apiUrl) => {
  const dataProvider = DataProvider(apiUrl);

  return {
    ...dataProvider,
    getList: async (resource, params) => {
      if (resource === "users") {
        const customUrl = `${apiUrl}/users/latest`;
        // Fetch data from customUrl and return the result
        const { data } = await httpClient.get(customUrl, params);
        return {
          data,
          total: data.length,
        };
      } else {
        return dataProvider.getList(resource, params);
      }
    },
  };
};

import { DataProvider } from "@refinedev/core";
import httpClient from "your-http-client"; // Replace with your preferred HTTP client

const customDataProvider = (apiUrl) => {
  const dataProvider = DataProvider(apiUrl);

  return {
    ...dataProvider,
    getList: async (resource, params) => {
      if (resource === "users") {
        const customUrl = `${apiUrl}/users/latest`;
        // Fetch data from customUrl and return the result
        const { data } = await httpClient.get(customUrl, params);
        return {
          data,
          total: data.length,
        };
      } else {
        return dataProvider.getList(resource, params);
      }
    },
  };
};

In this updated example, the customUrl is used to fetch data using the httpClient.get() method. The fetched data is then returned as the result of the getList method for the "users" resource. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

fascinating-indigo•2y ago

Hey @krockstar You can do this simply by changing the resource prop. If you use Antd;

useTable({
    resource: "users/latest",
});

useTable({
    resource: "users/latest",
});

If you use React-Table;

useTable({
    refineCoreProps: {
        resource: "users/latest",
    }
});

useTable({
    refineCoreProps: {
        resource: "users/latest",
    }
});

stormy-goldOP•2y ago

Awesome, I used useDataGrid! Thanks for this, however refine adds ?_end=10&_start=0 to the api call as query params. However, I want it to be ?current=1&pageSize=25. I'm passing -

useDataGrid({    
    resource: "users/latest",    
    dataProviderName: "myApi",    
    pagination: {      
      current: 2,      
      pageSize: 25,    
    },   
});

useDataGrid({    
    resource: "users/latest",    
    dataProviderName: "myApi",    
    pagination: {      
      current: 2,      
      pageSize: 25,    
    },   
});

Is there some other way to achieve this? @kapa.ai how to not send _end and _start as query params to an api call?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To prevent sending _start and _end as query params in an API call, you can create a custom data provider and modify the getList method to exclude these parameters. Here's an example of how you can create a custom data provider:

import { DataProvider } from "@refinedev/core";
import httpClient from "your-http-client"; // Replace with your preferred HTTP client

const customDataProvider = (apiUrl) => {
  const dataProvider = DataProvider(apiUrl);

  return {
    ...dataProvider,
    getList: async (resource, params) => {
      // Remove _start and _end from params
      const { _start, _end, ...otherParams } = params;

      // Fetch data using the modified params
      const { data } = await httpClient.get(`${apiUrl}/${resource}`, {
        params: otherParams,
      });

      return {
        data,
        total: data.length,
      };
    },
  };
};

import { DataProvider } from "@refinedev/core";
import httpClient from "your-http-client"; // Replace with your preferred HTTP client

const customDataProvider = (apiUrl) => {
  const dataProvider = DataProvider(apiUrl);

  return {
    ...dataProvider,
    getList: async (resource, params) => {
      // Remove _start and _end from params
      const { _start, _end, ...otherParams } = params;

      // Fetch data using the modified params
      const { data } = await httpClient.get(`${apiUrl}/${resource}`, {
        params: otherParams,
      });

      return {
        data,
        total: data.length,
      };
    },
  };
};

Then, use this custom data provider in your <Refine> component:

import { Refine } from "@refinedev/core";
import customDataProvider from "./customDataProvider";

function App() {
  return (
    <Refine
      dataProvider={customDataProvider("https://api.example.com")}
      // other props
    />
  );
}

export default App;

import { Refine } from "@refinedev/core";
import customDataProvider from "./customDataProvider";

function App() {
  return (
    <Refine
      dataProvider={customDataProvider("https://api.example.com")}
      // other props
    />
  );
}

export default App;

This custom data provider will exclude _start and _end from the query params when making API calls. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

stormy-goldOP•2y ago

@kapa.ai is there a Typescript interface for the getList function in dataProvider?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, there is a TypeScript interface for the getList function in the dataProvider. The getList method is part of the DataProvider interface in Refine. Here's the relevant part of the DataProvider interface:

import { Pagination, CrudSorting, CrudFilters, MetaDataQuery } from "@refinedev/core";

interface DataProvider {
  getList: (
    resource: string,
    pagination?: Pagination,
    sorters?: CrudSorting,
    filters?: CrudFilters,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any[]; total: number }>;
  // Other methods...
}

import { Pagination, CrudSorting, CrudFilters, MetaDataQuery } from "@refinedev/core";

interface DataProvider {
  getList: (
    resource: string,
    pagination?: Pagination,
    sorters?: CrudSorting,
    filters?: CrudFilters,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any[]; total: number }>;
  // Other methods...
}

You can find more information about the DataProvider interface and its properties in the Refine documentation (https://refine.dev/docs/api-reference/core/providers/data-provider). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

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

stormy-goldOP•2y ago

@kapa.ai interface for DataProvider with getOne, create, update, deleteOne, getApiUrl

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The DataProvider interface in Refine includes methods like getOne, create, update, deleteOne, and getApiUrl. Here's the relevant part of the DataProvider interface:

import { BaseKey, CrudFilters, MetaDataQuery } from "@refinedev/core";

interface DataProvider {
  getOne: (
    resource: string,
    id: BaseKey,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  create: (
    resource: string,
    variables: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  update: (
    resource: string,
    id: BaseKey,
    variables: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  deleteOne: (
    resource: string,
    id: BaseKey,
    variables?: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  getApiUrl: () => string;
  // Other methods...
}

import { BaseKey, CrudFilters, MetaDataQuery } from "@refinedev/core";

interface DataProvider {
  getOne: (
    resource: string,
    id: BaseKey,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  create: (
    resource: string,
    variables: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  update: (
    resource: string,
    id: BaseKey,
    variables: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  deleteOne: (
    resource: string,
    id: BaseKey,
    variables?: any,
    meta?: MetaDataQuery,
  ) => Promise<{ data: any }>;
  getApiUrl: () => string;
  // Other methods...
}

kapa.ai•2y ago

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

stormy-goldOP•2y ago

@kapa.ai dataProvider object with getOne, create, update, deleteOne, getApiUrl

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: @krockstar That's a great question, but unfortunately I am only capable of responding to a maximum of three questions per thread. Don't hesitate to create a new thread for any further questions you have though. I'm here to help!

continuing-cyan•2y ago

Hey @krockstar, You can define like below:

import {DataProvider} from "@refinedev/core";

const dataProvider: DataProvider = {}

const getList: DataProvider["getList"] = () => {}

import {DataProvider} from "@refinedev/core";

const dataProvider: DataProvider = {}

const getList: DataProvider["getList"] = () => {}

Custom api endpoint for fetching items

Did you find this page helpful?