caching

how to cache the data from a table from a getList?

5 Replies

Hi @SeeMe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine uses React Query for data fetching and caching. When you fetch data using the useList hook, Refine automatically caches the data. It uses structured keys to identify and cache server responses for queries and mutations. These keys also help optimize performance by reusing cached data when needed. Here is an example of how to use the useList hook:

import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 );  
};

import { useList, HttpError } from "@refinedev/core";  
  
interface IProduct {  
 id: number;  
 name: string;  
 material: string;  
}  
  
const ProductList: React.FC = () => {  
 const { data, isLoading, isError } = useList<IProduct, HttpError>({  
 resource: "products",  
 });  
  
 const products = data?.data ?? [];  
  
 if (isLoading) {  
 return <div>Loading...</div>;  
 }  
  
 if (isError) {  
 return <div>Something went wrong!</div>;  
 }  
  
 return (  
 <ul>  
 {products.map((product) => (  
 <li key={product.id}>  
 <h4>  
 {product.name} - ({product.material})  
 </h4>  
 </li>  
 ))}  
 </ul>  
 );  
};

By default, Refine has 5 minutes of cache time and 0 seconds of stale time for queries. This means that if a query is re-used in 5 minutes, it will be populated with cached data and in the meantime, it will be refetched in the background. If the query is not re-used in 5 minutes, it will be refetched immediately. For more information, you can refer to the Refine documentation on state management (https://refine.dev/docs/guides-concepts/general-concepts#state-management) and useList hook (https://refine.dev/docs/data/hooks/use-list). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

stormy-gold•4mo ago

how to cahea with const { dataGridProps } = useDataGrid({ resource: 'listings', meta: { pagination: { current: 1, pageSize: 25, mode: 'server' } }, }); const { dataGridProps } = useDataGrid({ resource: 'listings', meta: { pagination: { current: 1, pageSize: 25, mode: 'server' } }, });@kapa.ai kapa.ai @kapa.ai how to cache with const { dataGridProps } = useDataGrid({ resource: 'listings', meta: { pagination: { current: 1, pageSize: 25, mode: 'server' } }, });

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useDataGrid hook in Refine uses the useList hook under the hood to fetch data, which means it also benefits from the caching mechanism provided by React Query. When you fetch data using the useDataGrid hook, the data is automatically cached by React Query. Here is an example of how to use the useDataGrid hook:

import { useDataGrid } from "@refinedev/mui";  
import { DataGrid, GridColDef } from "@mui/x-data-grid";  

const Table: React.FC = () => {  
 const { dataGridProps } = useDataGrid({
    resource: 'listings',
    meta: { pagination: { current: 1, pageSize: 25, mode: 'server' } },
  });  
 const columns: GridColDef[] = [  
 {  
 field: "id",  
 headerName: "ID",  
 },  
 {  
 field: "name",  
 headerName: "Name",  
 },  
 {  
 field: "Age",  
 headerName: "Age",  
 },  
 ];  

 return <DataGrid {...dataGridProps} columns={columns} autoHeight />;  
};  

export default Table;

import { useDataGrid } from "@refinedev/mui";  
import { DataGrid, GridColDef } from "@mui/x-data-grid";  

const Table: React.FC = () => {  
 const { dataGridProps } = useDataGrid({
    resource: 'listings',
    meta: { pagination: { current: 1, pageSize: 25, mode: 'server' } },
  });  
 const columns: GridColDef[] = [  
 {  
 field: "id",  
 headerName: "ID",  
 },  
 {  
 field: "name",  
 headerName: "Name",  
 },  
 {  
 field: "Age",  
 headerName: "Age",  
 },  
 ];  

 return <DataGrid {...dataGridProps} columns={columns} autoHeight />;  
};  

export default Table;

In this example, the useDataGrid hook fetches data from the 'listings' resource and provides the necessary props for the DataGrid component. The fetched data is automatically cached by React Query. For more information, you can refer to the Refine documentation on useDataGrid hook (https://refine.dev/docs/ui-integrations/material-ui/hooks/use-data-grid/) and useList hook (https://refine.dev/docs/data/hooks/use-list). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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