Document caching, add option to disable cache

mui · Feb 21, 2025 · 1e7bc4d · 1e7bc4d
1 parent 66a50ab
commit 1e7bc4d
Show file tree

Hide file tree

Showing 32 changed files with 636 additions and 56 deletions.
diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.js b/docs/data/toolpad/core/components/crud/CrudAdvanced.js
@@ -5,7 +5,14 @@ import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { Create, CrudProvider, Edit, List, Show } from '@toolpad/core/Crud';
+import {
+  Create,
+  CrudProvider,
+  DataSourceCache,
+  Edit,
+  List,
+  Show,
+} from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -183,6 +190,8 @@ export const notesDataSource = {
   },
 };
 
+const notesCache = new DataSourceCache();
+
 function matchPath(pattern, pathname) {
   const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`);
   const match = pathname.match(regex);
@@ -263,7 +272,7 @@ function CrudAdvanced(props) {
       <DashboardLayout defaultSidebarCollapsed>
         <PageContainer title={title}>
           {/* preview-start */}
-          <CrudProvider dataSource={notesDataSource}>
+          <CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
             {router.pathname === listPath ? (
               <List
                 initialPageSize={10}
@@ -287,11 +296,7 @@ function CrudAdvanced(props) {
               />
             ) : null}
             {editNoteId ? (
-              <Edit
-                id={editNoteId}
-                onSubmitSuccess={handleEdit}
-                resetOnSubmit={false}
-              />
+              <Edit id={editNoteId} onSubmitSuccess={handleEdit} />
             ) : null}
           </CrudProvider>
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
@@ -9,6 +9,7 @@ import {
   CrudProvider,
   DataModel,
   DataSource,
+  DataSourceCache,
   Edit,
   List,
   Show,
@@ -196,6 +197,8 @@ export const notesDataSource: DataSource<Note> = {
   },
 };
 
+const notesCache = new DataSourceCache();
+
 function matchPath(pattern: string, pathname: string): string | null {
   const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`);
   const match = pathname.match(regex);
@@ -284,7 +287,10 @@ export default function CrudAdvanced(props: DemoProps) {
       <DashboardLayout defaultSidebarCollapsed>
         <PageContainer title={title}>
           {/* preview-start */}
-          <CrudProvider<Note> dataSource={notesDataSource}>
+          <CrudProvider<Note>
+            dataSource={notesDataSource}
+            dataSourceCache={notesCache}
+          >
             {router.pathname === listPath ? (
               <List<Note>
                 initialPageSize={10}
@@ -308,11 +314,7 @@ export default function CrudAdvanced(props: DemoProps) {
               />
             ) : null}
             {editNoteId ? (
-              <Edit<Note>
-                id={editNoteId}
-                onSubmitSuccess={handleEdit}
-                resetOnSubmit={false}
-              />
+              <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
             ) : null}
           </CrudProvider>
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx.preview b/docs/data/toolpad/core/components/crud/CrudAdvanced.tsx.preview
@@ -1,4 +1,7 @@
-<CrudProvider<Note> dataSource={notesDataSource}>
+<CrudProvider<Note>
+  dataSource={notesDataSource}
+  dataSourceCache={notesCache}
+>
   {router.pathname === listPath ? (
     <List<Note>
       initialPageSize={10}
@@ -22,10 +25,6 @@
     />
   ) : null}
   {editNoteId ? (
-    <Edit<Note>
-      id={editNoteId}
-      onSubmitSuccess={handleEdit}
-      resetOnSubmit={false}
-    />
+    <Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
   ) : null}
 </CrudProvider>
diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.js b/docs/data/toolpad/core/components/crud/CrudBasic.js
@@ -5,7 +5,7 @@ import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { Crud } from '@toolpad/core/Crud';
+import { Crud, DataSourceCache } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -183,6 +183,8 @@ export const notesDataSource = {
   },
 };
 
+const notesCache = new DataSourceCache();
+
 function matchPath(pattern, pathname) {
   const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`);
   const match = pathname.match(regex);
@@ -225,6 +227,7 @@ function CrudBasic(props) {
           {/* preview-start */}
           <Crud
             dataSource={notesDataSource}
+            dataSourceCache={notesCache}
             rootPath="/notes"
             initialPageSize={10}
             defaultValues={{ title: 'New note' }}

diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.tsx b/docs/data/toolpad/core/components/crud/CrudBasic.tsx
@@ -4,7 +4,7 @@ import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { Crud, DataModel, DataSource } from '@toolpad/core/Crud';
+import { Crud, DataModel, DataSource, DataSourceCache } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -188,6 +188,8 @@ export const notesDataSource: DataSource<Note> = {
   },
 };
 
+const notesCache = new DataSourceCache();
+
 function matchPath(pattern: string, pathname: string): string | null {
   const regex = new RegExp(`^${pattern.replace(/:[^/]+/g, '([^/]+)')}$`);
   const match = pathname.match(regex);
@@ -238,6 +240,7 @@ export default function CrudBasic(props: DemoProps) {
           {/* preview-start */}
           <Crud<Note>
             dataSource={notesDataSource}
+            dataSourceCache={notesCache}
             rootPath="/notes"
             initialPageSize={10}
             defaultValues={{ title: 'New note' }}

diff --git a/docs/data/toolpad/core/components/crud/CrudBasic.tsx.preview b/docs/data/toolpad/core/components/crud/CrudBasic.tsx.preview
@@ -1,5 +1,6 @@
 <Crud<Note>
   dataSource={notesDataSource}
+  dataSourceCache={notesCache}
   rootPath="/notes"
   initialPageSize={10}
   defaultValues={{ title: 'New note' }}

diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.js b/docs/data/toolpad/core/components/crud/CrudCreate.js
@@ -5,7 +5,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { Create } from '@toolpad/core/Crud';
+import { Create, DataSourceCache } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -90,6 +90,8 @@ export const peopleDataSource = {
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 function CrudCreate(props) {
   const { window } = props;
 
@@ -114,6 +116,7 @@ function CrudCreate(props) {
           {/* preview-start */}
           <Create
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialValues={{ age: 18 }}
             onSubmitSuccess={handleSubmitSuccess}
             resetOnSubmit

diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.tsx b/docs/data/toolpad/core/components/crud/CrudCreate.tsx
@@ -4,7 +4,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { DataModel, DataSource, Create } from '@toolpad/core/Crud';
+import { DataModel, DataSource, Create, DataSourceCache } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -97,6 +97,8 @@ export const peopleDataSource: DataSource<Person> &
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 interface DemoProps {
   /**
    * Injected by the documentation to work in an iframe.
@@ -129,6 +131,7 @@ export default function CrudCreate(props: DemoProps) {
           {/* preview-start */}
           <Create<Person>
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialValues={{ age: 18 }}
             onSubmitSuccess={handleSubmitSuccess}
             resetOnSubmit

diff --git a/docs/data/toolpad/core/components/crud/CrudCreate.tsx.preview b/docs/data/toolpad/core/components/crud/CrudCreate.tsx.preview
@@ -1,5 +1,6 @@
 <Create<Person>
   dataSource={peopleDataSource}
+  dataSourceCache={peopleCache}
   initialValues={{ age: 18 }}
   onSubmitSuccess={handleSubmitSuccess}
   resetOnSubmit

diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.js b/docs/data/toolpad/core/components/crud/CrudEdit.js
@@ -5,7 +5,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { Edit } from '@toolpad/core/Crud';
+import { DataSourceCache, Edit } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -113,6 +113,8 @@ export const peopleDataSource = {
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 function CrudEdit(props) {
   const { window } = props;
 
@@ -138,6 +140,7 @@ function CrudEdit(props) {
           <Edit
             id={1}
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             onSubmitSuccess={handleSubmitSuccess}
           />
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.tsx b/docs/data/toolpad/core/components/crud/CrudEdit.tsx
@@ -4,7 +4,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { DataModel, DataSource, Edit } from '@toolpad/core/Crud';
+import { DataModel, DataSource, DataSourceCache, Edit } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -120,6 +120,8 @@ export const peopleDataSource: DataSource<Person> &
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 interface DemoProps {
   /**
    * Injected by the documentation to work in an iframe.
@@ -153,6 +155,7 @@ export default function CrudEdit(props: DemoProps) {
           <Edit<Person>
             id={1}
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             onSubmitSuccess={handleSubmitSuccess}
           />
           {/* preview-end */}

diff --git a/docs/data/toolpad/core/components/crud/CrudEdit.tsx.preview b/docs/data/toolpad/core/components/crud/CrudEdit.tsx.preview
@@ -1,5 +1,6 @@
 <Edit<Person>
   id={1}
   dataSource={peopleDataSource}
+  dataSourceCache={peopleCache}
   onSubmitSuccess={handleSubmitSuccess}
 />
diff --git a/docs/data/toolpad/core/components/crud/CrudList.js b/docs/data/toolpad/core/components/crud/CrudList.js
@@ -5,7 +5,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { List } from '@toolpad/core/Crud';
+import { DataSourceCache, List } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -139,6 +139,8 @@ export const peopleDataSource = {
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 function CrudList(props) {
   const { window } = props;
 
@@ -175,6 +177,7 @@ function CrudList(props) {
           {/* preview-start */}
           <List
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialPageSize={4}
             onRowClick={handleRowClick}
             onCreateClick={handleCreateClick}

diff --git a/docs/data/toolpad/core/components/crud/CrudList.tsx b/docs/data/toolpad/core/components/crud/CrudList.tsx
@@ -4,7 +4,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { DataModel, DataSource, List } from '@toolpad/core/Crud';
+import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -146,6 +146,8 @@ export const peopleDataSource: DataSource<Person> &
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 interface DemoProps {
   /**
    * Injected by the documentation to work in an iframe.
@@ -190,6 +192,7 @@ export default function CrudList(props: DemoProps) {
           {/* preview-start */}
           <List<Person>
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialPageSize={4}
             onRowClick={handleRowClick}
             onCreateClick={handleCreateClick}

diff --git a/docs/data/toolpad/core/components/crud/CrudList.tsx.preview b/docs/data/toolpad/core/components/crud/CrudList.tsx.preview
@@ -1,5 +1,6 @@
 <List<Person>
   dataSource={peopleDataSource}
+  dataSourceCache={peopleCache}
   initialPageSize={4}
   onRowClick={handleRowClick}
   onCreateClick={handleCreateClick}

diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.js b/docs/data/toolpad/core/components/crud/CrudListDataGrid.js
@@ -6,7 +6,7 @@ import { DataGridPro } from '@mui/x-data-grid-pro';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { List } from '@toolpad/core/Crud';
+import { DataSourceCache, List } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
@@ -140,6 +140,8 @@ export const peopleDataSource = {
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 function CrudListDataGrid(props) {
   const { window } = props;
 
@@ -176,6 +178,7 @@ function CrudListDataGrid(props) {
           {/* preview-start */}
           <List
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialPageSize={4}
             onRowClick={handleRowClick}
             onCreateClick={handleCreateClick}

diff --git a/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx b/docs/data/toolpad/core/components/crud/CrudListDataGrid.tsx
@@ -5,7 +5,7 @@ import { DataGridPro } from '@mui/x-data-grid-pro';
 import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
-import { DataModel, DataSource, List } from '@toolpad/core/Crud';
+import { DataModel, DataSource, DataSourceCache, List } from '@toolpad/core/Crud';
 import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
@@ -147,6 +147,8 @@ export const peopleDataSource: DataSource<Person> &
   },
 };
 
+const peopleCache = new DataSourceCache();
+
 interface DemoProps {
   /**
    * Injected by the documentation to work in an iframe.
@@ -191,6 +193,7 @@ export default function CrudListDataGrid(props: DemoProps) {
           {/* preview-start */}
           <List<Person>
             dataSource={peopleDataSource}
+            dataSourceCache={peopleCache}
             initialPageSize={4}
             onRowClick={handleRowClick}
             onCreateClick={handleCreateClick}