@khanacademy/wonder-blocks-data 5.0.1 → 6.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/es/index.js +771 -372
- package/dist/index.js +1191 -550
- package/legacy-docs.md +3 -0
- package/package.json +2 -2
- package/src/__docs__/_overview_.stories.mdx +18 -0
- package/src/__docs__/_overview_graphql.stories.mdx +35 -0
- package/src/__docs__/_overview_ssr_.stories.mdx +185 -0
- package/src/__docs__/_overview_testing_.stories.mdx +123 -0
- package/src/__docs__/exports.clear-shared-cache.stories.mdx +20 -0
- package/src/__docs__/exports.data-error.stories.mdx +23 -0
- package/src/__docs__/exports.data-errors.stories.mdx +23 -0
- package/src/{components/data.md → __docs__/exports.data.stories.mdx} +15 -18
- package/src/__docs__/exports.fulfill-all-data-requests.stories.mdx +24 -0
- package/src/__docs__/exports.gql-error.stories.mdx +23 -0
- package/src/__docs__/exports.gql-errors.stories.mdx +20 -0
- package/src/__docs__/exports.gql-router.stories.mdx +29 -0
- package/src/__docs__/exports.has-unfulfilled-requests.stories.mdx +20 -0
- package/src/{components/intercept-requests.md → __docs__/exports.intercept-requests.stories.mdx} +16 -1
- package/src/__docs__/exports.intialize-cache.stories.mdx +29 -0
- package/src/__docs__/exports.remove-all-from-cache.stories.mdx +24 -0
- package/src/__docs__/exports.remove-from-cache.stories.mdx +25 -0
- package/src/__docs__/exports.request-fulfillment.stories.mdx +36 -0
- package/src/__docs__/exports.scoped-in-memory-cache.stories.mdx +92 -0
- package/src/__docs__/exports.serializable-in-memory-cache.stories.mdx +112 -0
- package/src/__docs__/exports.status.stories.mdx +31 -0
- package/src/{components/track-data.md → __docs__/exports.track-data.stories.mdx} +15 -0
- package/src/__docs__/exports.use-cached-effect.stories.mdx +41 -0
- package/src/__docs__/exports.use-gql.stories.mdx +73 -0
- package/src/__docs__/exports.use-hydratable-effect.stories.mdx +43 -0
- package/src/__docs__/exports.use-server-effect.stories.mdx +38 -0
- package/src/__docs__/exports.use-shared-cache.stories.mdx +30 -0
- package/src/__docs__/exports.when-client-side.stories.mdx +33 -0
- package/src/__docs__/types.cached-response.stories.mdx +29 -0
- package/src/__docs__/types.error-options.stories.mdx +21 -0
- package/src/__docs__/types.gql-context.stories.mdx +20 -0
- package/src/__docs__/types.gql-fetch-fn.stories.mdx +24 -0
- package/src/__docs__/types.gql-fetch-options.stories.mdx +24 -0
- package/src/__docs__/types.gql-operation-type.stories.mdx +24 -0
- package/src/__docs__/types.gql-operation.stories.mdx +67 -0
- package/src/__docs__/types.response-cache.stories.mdx +33 -0
- package/src/__docs__/types.result.stories.mdx +39 -0
- package/src/__docs__/types.scoped-cache.stories.mdx +27 -0
- package/src/__docs__/types.valid-cache-data.stories.mdx +23 -0
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -80
- package/src/__tests__/generated-snapshot.test.js +0 -24
- package/src/components/__tests__/data.test.js +149 -128
- package/src/components/data.js +22 -112
- package/src/components/intercept-requests.js +1 -1
- package/src/hooks/__tests__/__snapshots__/use-shared-cache.test.js.snap +8 -8
- package/src/hooks/__tests__/use-cached-effect.test.js +507 -0
- package/src/hooks/__tests__/use-gql-router-context.test.js +133 -0
- package/src/hooks/__tests__/use-gql.test.js +1 -30
- package/src/hooks/__tests__/use-hydratable-effect.test.js +708 -0
- package/src/hooks/__tests__/use-server-effect.test.js +39 -11
- package/src/hooks/use-cached-effect.js +225 -0
- package/src/hooks/use-gql-router-context.js +50 -0
- package/src/hooks/use-gql.js +22 -52
- package/src/hooks/use-hydratable-effect.js +206 -0
- package/src/hooks/use-request-interception.js +20 -23
- package/src/hooks/use-server-effect.js +12 -5
- package/src/hooks/use-shared-cache.js +13 -11
- package/src/index.js +53 -3
- package/src/util/__tests__/__snapshots__/serializable-in-memory-cache.test.js.snap +19 -0
- package/src/util/__tests__/merge-gql-context.test.js +74 -0
- package/src/util/__tests__/request-fulfillment.test.js +23 -42
- package/src/util/__tests__/request-tracking.test.js +26 -7
- package/src/util/__tests__/result-from-cache-response.test.js +19 -5
- package/src/util/__tests__/scoped-in-memory-cache.test.js +6 -85
- package/src/util/__tests__/serializable-in-memory-cache.test.js +398 -0
- package/src/util/__tests__/ssr-cache.test.js +52 -52
- package/src/util/abort-error.js +15 -0
- package/src/util/data-error.js +58 -0
- package/src/util/get-gql-data-from-response.js +3 -2
- package/src/util/gql-error.js +19 -11
- package/src/util/merge-gql-context.js +34 -0
- package/src/util/request-fulfillment.js +49 -46
- package/src/util/request-tracking.js +69 -15
- package/src/util/result-from-cache-response.js +12 -16
- package/src/util/scoped-in-memory-cache.js +24 -47
- package/src/util/serializable-in-memory-cache.js +49 -0
- package/src/util/ssr-cache.js +9 -8
- package/src/util/status.js +30 -0
- package/src/util/types.js +18 -1
- package/docs.md +0 -122
package/docs.md
DELETED
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
## fulfillAllDataRequests
|
|
2
|
-
|
|
3
|
-
When performing server-side rendering (SSR), the data requests that are being
|
|
4
|
-
made via the `Data` component can be tracked by rendering the React tree
|
|
5
|
-
inside the `TrackData` component. After this has occurred, the tracked requests
|
|
6
|
-
can be fulfilled using `fulfillAllDataRequests`.
|
|
7
|
-
|
|
8
|
-
This method returns a promise that resolves to a copy of the data that was
|
|
9
|
-
cached by fulfilling the tracked requests. In the process, it clears the
|
|
10
|
-
record of tracked requests so that new requests can be tracked and fulfilled
|
|
11
|
-
if so required.
|
|
12
|
-
|
|
13
|
-
The returned copy of the data cache can be used with the `initializeCache`
|
|
14
|
-
method to prepare the data cache before a subsequent render. This is useful on
|
|
15
|
-
the server to then SSR a more complete result, and again on the client, to
|
|
16
|
-
rehydrate that result.
|
|
17
|
-
|
|
18
|
-
### Usage
|
|
19
|
-
|
|
20
|
-
```js static
|
|
21
|
-
fulfillAllDataRequests(): Promise<ResponseCache>;
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## initializeCache
|
|
25
|
-
|
|
26
|
-
Wonder Blocks Data caches data in its response cache for hydration. This cache
|
|
27
|
-
can be initialized with data using the `initializeCache` method.
|
|
28
|
-
The `initializeCache` method can only be called when the hydration cache is
|
|
29
|
-
empty.
|
|
30
|
-
|
|
31
|
-
Usually, the data to be passed to `initializeCache` will be obtained by
|
|
32
|
-
calling `fulfillAllDataRequests` after tracking data requests
|
|
33
|
-
(see [TrackData](#trackdata)) during server-side rendering.
|
|
34
|
-
|
|
35
|
-
Combine with `removeFromCache` or `removeAllFromCache` to support your testing
|
|
36
|
-
needs.
|
|
37
|
-
|
|
38
|
-
### Usage
|
|
39
|
-
|
|
40
|
-
```js static
|
|
41
|
-
initializeCache(sourceCache: ResponseCache): void;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
#### Function arguments
|
|
45
|
-
|
|
46
|
-
| Argument | Flow Type | Default | Description |
|
|
47
|
-
| --- | --- | --- | --- |
|
|
48
|
-
| `sourceData` | `ResponseCache` | _Required_ | The source cache that will be used to initialize the response cache. |
|
|
49
|
-
|
|
50
|
-
## removeFromCache
|
|
51
|
-
|
|
52
|
-
Removes an entry from the cache. The given handler and options identify the entry to be removed.
|
|
53
|
-
|
|
54
|
-
If an item is removed, this returns `true`; otherwise, `false`.
|
|
55
|
-
|
|
56
|
-
This can be used after `initializeCache` to manipulate the cache prior to hydration.
|
|
57
|
-
This can be useful during testing.
|
|
58
|
-
|
|
59
|
-
### Usage
|
|
60
|
-
|
|
61
|
-
```js static
|
|
62
|
-
removeFromCache(id: string): boolean;
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
#### Function arguments
|
|
66
|
-
|
|
67
|
-
| Argument | Flow Type | Default | Description |
|
|
68
|
-
| --- | --- | --- | --- |
|
|
69
|
-
| `id` | `string` | _Required_ | The id of the item to be removed. |
|
|
70
|
-
|
|
71
|
-
## removeAllFromCache
|
|
72
|
-
|
|
73
|
-
Removes all entries that match a given predicate from the cache. If no predicate is given, all cached entries for the given handler are removed.
|
|
74
|
-
|
|
75
|
-
This returns the count of entries removed.
|
|
76
|
-
|
|
77
|
-
This can be used after `initializeCache` to manipulate the cache prior to hydration.
|
|
78
|
-
This can be useful during testing (especially to clear the cache so that it can be initialized again).
|
|
79
|
-
If the predicate is not given, all items are removed.
|
|
80
|
-
|
|
81
|
-
### Usage
|
|
82
|
-
|
|
83
|
-
```js static
|
|
84
|
-
removeAllFromCache(predicate?: (key: string, entry: $ReadOnly<CachedResponse<TData>>) => boolean): number;
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
#### Function arguments
|
|
88
|
-
|
|
89
|
-
| Argument | Flow Type | Default | Description |
|
|
90
|
-
| --- | --- | --- | --- |
|
|
91
|
-
| `predicate` | `(key: string, entry: $ReadOnly<CachedResponse<TData>>) => boolean)` | _Optional_ | A predicate to identify which entries to remove. If absent, all data is removed; if present, any entries for which the predicate returns `true` will be returned. |
|
|
92
|
-
|
|
93
|
-
## Types
|
|
94
|
-
|
|
95
|
-
### ResponseCache
|
|
96
|
-
|
|
97
|
-
```js static
|
|
98
|
-
type CachedResponse =
|
|
99
|
-
| {|
|
|
100
|
-
data: any,
|
|
101
|
-
|}
|
|
102
|
-
| {|
|
|
103
|
-
error: string,
|
|
104
|
-
|};
|
|
105
|
-
|
|
106
|
-
type ResponseCache = {
|
|
107
|
-
[id: string]: CachedResponse,
|
|
108
|
-
...,
|
|
109
|
-
};
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
An example is of the response cache is shown below.
|
|
113
|
-
|
|
114
|
-
```js static
|
|
115
|
-
const responseCache = {
|
|
116
|
-
DATA_ID_1: {error: "It go 💥boom 😢"},
|
|
117
|
-
DATA_ID_2: {data: ["array", "of", "data"]},
|
|
118
|
-
DATA_ID_3: {data: {some: "data"}},
|
|
119
|
-
};
|
|
120
|
-
```
|
|
121
|
-
|
|
122
|
-
In this example, the cache contains data retrieved for three different requests.
|