You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: client/README.md
+76
Original file line number
Diff line number
Diff line change
@@ -77,6 +77,82 @@ We're using [React Query](https://react-query.tanstack.com/overview) to query th
77
77
78
78
Check out the existing implementation using `api.ts` files and integration with the `DataTable` component.
79
79
80
+
React Query is a higher level package which manages caching and provides useful hooks for implementation. The API communication is using the package `graphql-request`. For this we've implemented a wrapper around `request` within the component `GqlContext` in order to catch gql errors and raise them up to React Query. The api is returning valid (200) responses with an error object when there is an error. React Query is expecting an error to be raised - so the implementation in `GqlContext` is interrogating responses and checking for errors.
81
+
82
+
When using `useQuery`, caching is handled for you. Provide a cache key as in the example usages here. When using a mutation we typically don't want to cache the response, so no cacheKey is used.
83
+
84
+
Cache keys are simply an object which is used as a stable reference for the cache. We are using a hierarchy for the cache keys and pass in an array of strings as the actual key. For example, in the outbound shipments, we have a base key of the string `outbound`. For a specific invoice, the cache key consists of the base, the store ID and the invoice ID. If you invalidate the base cache key of 'outbound' then the cache will be cleared for all invoices. To be more targeted, you could invalidate for a specific invoice, or for all invoices in a store.
85
+
86
+
An example of the pattern of hooks we've implemented when working with api calls is shown below. This is a simplified version of the outbound shipment implementation:
87
+
88
+
```
89
+
api/
90
+
├─ hooks/
91
+
│ ├─ document/
92
+
│ │ ├─ ...
93
+
│ │ ├─ index.ts
94
+
│ │ ├─ useOutbound.ts
95
+
│ ├─ line/
96
+
│ │ ├─ index.ts
97
+
│ │ ├─ useOutboundLines.ts
98
+
│ └─ utils/
99
+
│ ├─ index.ts
100
+
│ └─ useOutboundApi.ts
101
+
├─ api.ts
102
+
├─ index.ts
103
+
├─ operations.generated.ts
104
+
└─ operations.graphql
105
+
106
+
```
107
+
108
+
The cache keys are created in `use_____Api.ts`. For example, in `useOutboundApi.ts` there is the following:
109
+
110
+
```
111
+
const keys = {
112
+
base: () => ['outbound'] as const,
113
+
detail: (id: string) => [...keys.base(), storeId, id] as const,
114
+
list: () => [...keys.base(), storeId, 'list'] as const,
115
+
paramList: (params: ListParams) => [...keys.list(), params] as const,
and you will see the keys being referenced in other hooks, like so:
122
+
123
+
```
124
+
const api = useOutboundApi();
125
+
useQuery(api.keys.paramList(queryParams), ...
126
+
```
127
+
128
+
129
+
where the file `hooks/index.ts` has something like this in it:
130
+
131
+
```
132
+
import { Utils } from './utils';
133
+
import { Lines } from './line';
134
+
import { Document } from './document';
135
+
136
+
export const useOutbound = {
137
+
utils: {
138
+
api: Utils.useOutboundApi,
139
+
...
140
+
},
141
+
142
+
document: {
143
+
get: Document.useOutbound,
144
+
...
145
+
},
146
+
147
+
line: {
148
+
stockLines: Lines.useOutboundLines,
149
+
...
150
+
},
151
+
};
152
+
```
153
+
154
+
The queries are implemented in `api.ts`. If you need to modify the shape of the data returned, then the preferred approach is to implement that in the api query. If required, this can also be done in the hook which calls the query, though this isn't idiomatic.
155
+
80
156
## Localisation
81
157
82
158
We're using [react-i18next](https://react.i18next.com/) for localisations. Collections of translatable items are grouped into namespaces so that we can reduce bundle sizes and keep files contained to specific areas. The namespace files are json files - kept separate from the main bundles and downloaded on demand. These are also cached locally in the browser.
* Sort query result is sorted descending or ascending (if not provided the default is
2340
+
* Sort query result is sorted descending or ascending (if not provided the default is
2359
2341
* ascending)
2360
2342
*/
2361
2343
desc?: InputMaybe<Scalars['Boolean']>;
@@ -2500,23 +2482,14 @@ export type RequisitionNodeOtherPartyArgs = {
2500
2482
};
2501
2483
2502
2484
exportenumRequisitionNodeStatus{
2503
-
/** New requisition when manually created */
2504
2485
Draft='DRAFT',
2505
-
/**
2506
-
* Response requisition: When supplier finished fulfilling requisition, locked for future editing
2507
-
* Request requisition: When response requisition is finalised
2508
-
*/
2509
2486
Finalised='FINALISED',
2510
-
/** New requisition when automatically created, only applicable to response requisition when it's duplicated in supplying store from request requisition */
2511
2487
New='NEW',
2512
-
/** Request requisition is sent and locked for future editing, only applicable to request requisition */
2513
2488
Sent='SENT'
2514
2489
}
2515
2490
2516
2491
exportenumRequisitionNodeType{
2517
-
/** Requisition created by store that is ordering stock */
2518
2492
Request='REQUEST',
2519
-
/** Supplying store requisition in response to request requisition */
0 commit comments