Skip to content

Commit 0c41770

Browse files
GildasGildas
Gildas
authored and
Gildas
committed
[Doc] Offline Support Documentation
1 parent bd7e28f commit 0c41770

3 files changed

Lines changed: 190 additions & 0 deletions

File tree

‎packages/react-admin/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,12 @@
2424
"build": "zshy --silent"
2525
},
2626
"devDependencies": {
27+
"@tanstack/query-async-storage-persister": "5.90.2",
2728
"@tanstack/react-query": "^5.90.2",
29+
"@tanstack/react-query-persist-client": "5.90.2",
30+
"data-generator-retail": "^5.14.1",
2831
"expect": "^27.4.6",
32+
"ra-data-fakerest": "^5.14.1",
2933
"react-router": "^6.28.1",
3034
"react-router-dom": "^6.28.1",
3135
"typescript": "^5.1.3",

‎packages/react-admin/src/offline.stories.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import * as React from 'react';
2+
import fakeRestDataProvider from 'ra-data-fakerest';
3+
import generateData from 'data-generator-retail';
4+
import Admin from './Admin';
5+
import { Resource, useIsOffline } from 'ra-core';
6+
import {
7+
AppBar,
8+
Button,
9+
Create,
10+
DataTable,
11+
DateInput,
12+
Edit,
13+
Layout,
14+
List,
15+
NumberField,
16+
NumberInput,
17+
ReferenceField,
18+
ReferenceInput,
19+
Show,
20+
SimpleForm,
21+
SimpleShowLayout,
22+
TextField,
23+
TextInput,
24+
TitlePortal,
25+
} from 'ra-ui-materialui';
26+
import { onlineManager, QueryClient } from '@tanstack/react-query';
27+
import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
28+
import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
29+
30+
export default {
31+
title: 'react-admin/offline',
32+
};
33+
34+
export const FullApp = () => {
35+
const dataProvider = fakeRestDataProvider(generateData(), true, 350);
36+
37+
const queryClient = new QueryClient({
38+
defaultOptions: {
39+
queries: {
40+
gcTime: 1000 * 60 * 60 * 24, // 24 hours
41+
},
42+
},
43+
});
44+
45+
const asyncStoragePersister = createAsyncStoragePersister({
46+
storage: localStorage,
47+
});
48+
49+
return (
50+
<PersistQueryClientProvider
51+
client={queryClient}
52+
persistOptions={{ persister: asyncStoragePersister }}
53+
>
54+
<Admin
55+
dataProvider={dataProvider}
56+
queryClient={queryClient}
57+
layout={CustomLayout}
58+
>
59+
<Resource
60+
name="products"
61+
list={ProductList}
62+
edit={ProductEdit}
63+
create={ProductCreate}
64+
show={ProductShow}
65+
/>
66+
</Admin>
67+
</PersistQueryClientProvider>
68+
);
69+
};
70+
71+
const ProductList = () => (
72+
<List>
73+
<DataTable>
74+
<DataTable.Col source="reference" />
75+
<DataTable.Col source="category_id">
76+
<ReferenceField source="category_id" reference="categories" />
77+
</DataTable.Col>
78+
</DataTable>
79+
</List>
80+
);
81+
82+
const ProductEdit = () => (
83+
<Edit>
84+
<ProductForm />
85+
</Edit>
86+
);
87+
88+
const ProductCreate = () => (
89+
<Create
90+
mutationMode="optimistic"
91+
transform={data => ({
92+
id: crypto.randomUUID(),
93+
...data,
94+
})}
95+
>
96+
<ProductForm />
97+
</Create>
98+
);
99+
100+
const ProductForm = () => (
101+
<SimpleForm>
102+
<TextInput source="reference" />
103+
<ReferenceInput source="category_id" reference="categories" />
104+
<TextInput source="description" />
105+
<NumberInput source="width" />
106+
<NumberInput source="height" />
107+
<NumberInput source="price" />
108+
<TextInput source="thumbnail" />
109+
<TextInput source="image" />
110+
<DateInput source="stock" />
111+
<NumberInput source="sales" />
112+
</SimpleForm>
113+
);
114+
115+
const ProductShow = () => (
116+
<Show>
117+
<SimpleShowLayout>
118+
<TextField source="id" />
119+
<TextField source="reference" />
120+
<ReferenceField source="category_id" reference="categories" />
121+
<TextField source="description" />
122+
<NumberField source="width" />
123+
<NumberField source="height" />
124+
<NumberField source="price" />
125+
<TextField source="thumbnail" />
126+
<TextField source="image" />
127+
<NumberField source="stock" />
128+
<NumberField source="sales" />
129+
</SimpleShowLayout>
130+
</Show>
131+
);
132+
133+
const CustomLayout = ({ children }) => (
134+
<Layout appBar={CustomAppBar}>{children}</Layout>
135+
);
136+
137+
const CustomAppBar = () => {
138+
const isOffline = useIsOffline();
139+
return (
140+
<AppBar color="primary">
141+
<TitlePortal />
142+
<Button
143+
onClick={() => {
144+
onlineManager.setOnline(isOffline);
145+
}}
146+
>
147+
{isOffline ? 'Simulate online' : 'Simulate offline'}
148+
</Button>
149+
</AppBar>
150+
);
151+
};

‎yarn.lock‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5272,6 +5272,16 @@ __metadata:
52725272
languageName: node
52735273
linkType: hard
52745274

5275+
"@tanstack/query-async-storage-persister@npm:5.90.2":
5276+
version: 5.90.2
5277+
resolution: "@tanstack/query-async-storage-persister@npm:5.90.2"
5278+
dependencies:
5279+
"@tanstack/query-core": "npm:5.90.2"
5280+
"@tanstack/query-persist-client-core": "npm:5.90.2"
5281+
checksum: ab091d443b558ad159b245036097bc60675cac8a4f3ebde0a485caff11f0dc768619dddb5c1fcfbd1716732e89a3a06e223d465ece590242aeea40c3ed4f03dc
5282+
languageName: node
5283+
linkType: hard
5284+
52755285
"@tanstack/query-core@npm:5.90.2":
52765286
version: 5.90.2
52775287
resolution: "@tanstack/query-core@npm:5.90.2"
@@ -5286,6 +5296,15 @@ __metadata:
52865296
languageName: node
52875297
linkType: hard
52885298

5299+
"@tanstack/query-persist-client-core@npm:5.90.2":
5300+
version: 5.90.2
5301+
resolution: "@tanstack/query-persist-client-core@npm:5.90.2"
5302+
dependencies:
5303+
"@tanstack/query-core": "npm:5.90.2"
5304+
checksum: 696b5e23da9bb7f8737b537fc75286591a8727b0592c89fcada92903d6f1f1b2128fd85fc3f7a5157b00689750d34761446c7cd21fb200b0eef94987a10c5560
5305+
languageName: node
5306+
linkType: hard
5307+
52895308
"@tanstack/react-query-devtools@npm:^5.90.2":
52905309
version: 5.90.2
52915310
resolution: "@tanstack/react-query-devtools@npm:5.90.2"
@@ -5298,6 +5317,18 @@ __metadata:
52985317
languageName: node
52995318
linkType: hard
53005319

5320+
"@tanstack/react-query-persist-client@npm:5.90.2":
5321+
version: 5.90.2
5322+
resolution: "@tanstack/react-query-persist-client@npm:5.90.2"
5323+
dependencies:
5324+
"@tanstack/query-persist-client-core": "npm:5.90.2"
5325+
peerDependencies:
5326+
"@tanstack/react-query": ^5.90.2
5327+
react: ^18 || ^19
5328+
checksum: 0f51fb72f23f4c209c4ac2f80f330c1dd979ae0b13a54703f4536470ae04c882530a085609f1b911ebf6f29414abd058592c274cea3a9394f92290259a589a71
5329+
languageName: node
5330+
linkType: hard
5331+
53015332
"@tanstack/react-query@npm:^5.90.2":
53025333
version: 5.90.2
53035334
resolution: "@tanstack/react-query@npm:5.90.2"
@@ -19859,9 +19890,13 @@ __metadata:
1985919890
"@emotion/styled": "npm:^11.14.0"
1986019891
"@mui/icons-material": "npm:^5.16.12 || ^6.0.0 || ^7.0.0"
1986119892
"@mui/material": "npm:^5.16.12 || ^6.0.0 || ^7.0.0"
19893+
"@tanstack/query-async-storage-persister": "npm:5.90.2"
1986219894
"@tanstack/react-query": "npm:^5.90.2"
19895+
"@tanstack/react-query-persist-client": "npm:5.90.2"
19896+
data-generator-retail: "npm:^5.14.1"
1986319897
expect: "npm:^27.4.6"
1986419898
ra-core: "npm:^5.14.1"
19899+
ra-data-fakerest: "npm:^5.14.1"
1986519900
ra-i18n-polyglot: "npm:^5.14.1"
1986619901
ra-language-english: "npm:^5.14.1"
1986719902
ra-ui-materialui: "npm:^5.14.1"

0 commit comments

Comments
 (0)