Cache master call

How can i extend simple rest api dataprovider so i can make a custom api to fetch some master data and cache it??

5 Replies

kapa.ai•13mo ago

Hi @dreamer9067. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To extend the Simple REST data provider and make a custom API call to fetch some master data, you can use the custom method provided by Refine. This method allows you to handle requests with custom parameters like URL, CRUD methods, and configurations. It's useful if you have non-standard REST API endpoints or want to make a connection with external resources. Here's an example of how you can define the custom method:

custom: async ({  
 url,  
 method,  
 filters,  
 sorters,  
 payload,  
 query,  
 headers,  
 meta,  
}) => {  
 // You can handle the request according to your API requirements.  
  
 return {  
 data,  
 };  
};

custom: async ({  
 url,  
 method,  
 filters,  
 sorters,  
 payload,  
 query,  
 headers,  
 meta,  
}) => {  
 // You can handle the request according to your API requirements.  
  
 return {  
 data,  
 };  
};

The custom method can be consumed using the useCustom data hook. Here's an example:

import { useCustom, useApiUrl } from "@refinedev/core";  
  
const { data, isLoading } = useCustom({  
 url: `${apiURL}/posts-unique-check`,  
 method: "get",  
 config: {  
 query: {  
 title: "Foo bar",  
 },  
 },  
});

import { useCustom, useApiUrl } from "@refinedev/core";  
  
const { data, isLoading } = useCustom({  
 url: `${apiURL}/posts-unique-check`,  
 method: "get",  
 config: {  
 query: {  
 title: "Foo bar",  
 },  
 },  
});

For caching, Refine uses React Query to manage data fetching. React Query handles important concerns like caching, invalidation, loading states, etc. To customize the Simple REST data provider, you can use the swizzle command from the @refinedev/cli package. Here's how you can do it: 1. Run the swizzle command in the project directory:

npm run refine swizzle

npm run refine swizzle

2. Select @refinedev/simple-rest from the list of available data providers. 3. Edit the /rest-data-provider/index.ts file to customize the data provider. 4. Pass the customized data provider to the dataProvider prop of the Refine component.

import { Refine } from "@refinedev/core";  
import { dataProvider } from "./rest-data-provider";  
  
const App = () => {  
 return (  
 <Refine  
 dataProvider={dataProvider}  
 /* ... */  
 />  
 );  
};

import { Refine } from "@refinedev/core";  
import { dataProvider } from "./rest-data-provider";  
  
const App = () => {  
 return (  
 <Refine  
 dataProvider={dataProvider}  
 /* ... */  
 />  
 );  
};

For more information, refer to the following documentation: - Customizing the data provider (https://refine.dev/docs/packages/documentation/data-providers/simple-rest) - Custom method (https://refine.dev/docs/api-reference/core/providers/data-provider) - useCustom data hook (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) - Simple REST data provider (https://refine.dev/docs/packages/documentation/data-providers/simple-rest) - Data Provider Logic (https://refine.dev/blog/refine-vs-react-admin) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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

deep-jade•13mo ago

@kapa.ai where is the caching implemented??

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Caching in Refine is implemented using React Query. React Query is a data fetching library that provides features like caching, synchronization, and background updates. In Refine, caching is used in various places such as access control checks and data fetching. For example, when checking for access control in your app, you can configure the staleTime and cacheTime properties to cache the access control checks. This can be done easily as Refine uses React Query. Here's an example of how you can configure caching for access control checks:

const { data } = useCan({  
 resource: "resource-you-ask-for-access",  
 action: "action-type-on-resource",  
 params: { foo: "optional-params" } },  
 queryOptions: {  
 staleTime: 5 * 60 * 1000, // 5 minutes  
 }  
);

const { data } = useCan({  
 resource: "resource-you-ask-for-access",  
 action: "action-type-on-resource",  
 params: { foo: "optional-params" } },  
 queryOptions: {  
 staleTime: 5 * 60 * 1000, // 5 minutes  
 }  
);

In this example, staleTime is set to 5 minutes. This means that the data fetched from this query will be considered fresh for 5 minutes. After this time, React Query will attempt to refetch the data in the background when the component re-renders or when the refetch method is called. By default, Refine uses 5 minutes for cacheTime and 0 minutes for staleTime for its own access control points. For more information, refer to the following documentation: - Access Control Provider (https://refine.dev/docs/api-reference/core/providers/accessControl-provider) - useCan hook (https://refine.dev/docs/api-reference/core/hooks/accessControl/useCan) - React Query (https://react-query.tanstack.com/reference/useQuery) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

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