@@ -17,7 +17,7 @@ to represent the data expected.
17
17
18
18
- ` Entity ` - represents a single unique object (denormalized)
19
19
- ` schema.Union(Entity) ` - polymorphic objects (A | B)
20
- - ` {[key:string]: Schema} ` - immutable objects (lacking primary key)
20
+ - ` {[key:string]: Schema} ` - immutable objects
21
21
- ` schema.Invalidate(Entity) ` - to delete an Entity
22
22
23
23
### List
@@ -42,7 +42,6 @@ to represent the data expected.
42
42
- Every ` Entity ` subclass ** defines defaults** for _ all_ non-optional serialised fields.
43
43
- Override ` pk() ` only when the primary key ≠ ` id ` .
44
44
- ` pk() ` return type is ` number | string | undefined `
45
- - if ` pk() ` cannot be determined, use ` {[key:string]: Schema} ` schema instead
46
45
- Always define nested Entities to be used in ` static schema `
47
46
- When designing APIs, prefer nesting entities
48
47
- use ` static schema ` to deserialize
@@ -75,7 +74,6 @@ export class Todo extends Entity {
75
74
completed = false ;
76
75
77
76
static key = ' Todo' ;
78
- // optional
79
77
static schema = {
80
78
user: User ,
81
79
}
@@ -102,6 +100,11 @@ const todo = useSuspense(TodoResource.get, { id: 5 });
102
100
const todoList = useSuspense (TodoResource .getList );
103
101
// GET https://jsonplaceholder.typicode.com/todos?userId=1
104
102
const todoListByUser = useSuspense (TodoResource .getList , { userId: 1 });
103
+ // subscriptions
104
+ const todo = useLive (TodoResource .get , { id: 5 });
105
+ // without fetch
106
+ const todo = useCache (TodoResource .get , { id: 5 });
107
+ const todo = useQuery (Todo , { id: 5 });
105
108
```
106
109
107
110
#### Mutations
@@ -124,24 +127,30 @@ const deleteTodo = id => ctrl.fetch(TodoResource.delete, { id });
124
127
const getNextPage = (page ) => ctrl .fetch (TodoResource .getList .getPage , { userId: 1 , page })
125
128
```
126
129
130
+ #### Type-safe imperative actions
131
+
132
+ ` Controller ` is returned from ` useController() ` . It has: ctrl.fetch(), ctrl.fetchIfStale(), ctrl.expireAll(), ctrl.invalidate(), ctrl.invalidateAll(), ctrl.setResponse(), ctrl.set().
133
+
127
134
#### Programmatic queries
128
135
129
136
``` ts
130
137
const queryRemainingTodos = new schema .Query (
131
138
TodoResource .getList .schema ,
132
139
entries => entries .filter (todo => ! todo .completed ).length ,
133
140
);
141
+
142
+ const allRemainingTodos = useQuery (queryRemainingTodos );
143
+ const firstUserRemainingTodos = useQuery (queryRemainingTodos , { userId: 1 });
134
144
```
135
145
136
146
``` ts
137
147
const groupTodoByUser = new schema .Query (
138
148
TodoResource .getList .schema ,
139
149
todos => Object .groupBy (todos , todo => todo .userId ),
140
150
);
151
+ const todosByUser = useQuery (groupTodoByUser );
141
152
```
142
153
143
- For more detailed usage, refer to the [ @data-client/react guide] ( .github/instructions/react.instructions.md ) .
144
-
145
154
---
146
155
147
156
## 4. Custom RestEndpoint patterns
@@ -160,6 +169,7 @@ export const getTicker = new RestEndpoint({
160
169
- ` path ` params ▶️ 1st arg shape.
161
170
- ` method ` ≠ ` GET ` ⇒ 2nd arg = body (unless ` body: undefined ` ).
162
171
- Provide ` searchParams ` / ` body ` _ values_ purely for ** type inference** .
172
+ - Use ` RestGenerics ` when inheriting from ` RestEndpoint ` .
163
173
164
174
### getOptimisticResponse()
165
175
@@ -224,9 +234,13 @@ export const IssueResource = resource({
224
234
225
235
## 8. Best Practices & Notes
226
236
237
+ - When asked to browse or navigate to a web address, actual visit the address
227
238
- Always set up ` schema ` on every resource/entity/collection for normalization.
228
239
- Prefer ` RestEndpoint ` over ` resource ` for defining single endpoints or when full CRUD endpoints don't exist
229
240
- Normalize deeply nested or relational data by defining proper schemas.
241
+ - ` useDebounce(query, timeout); ` when rendering async data based on user field inputs
242
+ - ` [handleSubmit, loading, error] = useLoading() ` when tracking mutation loads like submitting an async form
243
+ - Prefer smaller React components that do one thing.
230
244
231
245
## 9. Common Mistakes to Avoid
232
246
0 commit comments