@spoosh/plugin-prefetch 0.1.4 → 0.3.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/README.md +42 -11
- package/dist/index.d.mts +4 -4
- package/dist/index.d.ts +4 -4
- package/dist/index.js +10 -15
- package/dist/index.mjs +10 -15
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -28,14 +28,14 @@ const spoosh = new Spoosh<ApiSchema, Error>("/api").use([
|
|
|
28
28
|
const { useRead, useWrite, prefetch } = createReactSpoosh(spoosh);
|
|
29
29
|
|
|
30
30
|
// Basic prefetch
|
|
31
|
-
await prefetch((api) => api.
|
|
31
|
+
await prefetch((api) => api("posts").GET());
|
|
32
32
|
|
|
33
33
|
// Prefetch with query options
|
|
34
|
-
await prefetch((api) => api.
|
|
34
|
+
await prefetch((api) => api("posts").GET({ query: { page: 1, limit: 10 } }));
|
|
35
35
|
|
|
36
36
|
// Prefetch with plugin options (staleTime, retries, etc.)
|
|
37
37
|
await prefetch(
|
|
38
|
-
(api) => api.
|
|
38
|
+
(api) => api("users/:id").GET({ params: { id: userId } }),
|
|
39
39
|
{
|
|
40
40
|
staleTime: 60000,
|
|
41
41
|
retries: 3,
|
|
@@ -45,7 +45,7 @@ await prefetch(
|
|
|
45
45
|
// Prefetch on hover
|
|
46
46
|
<Link
|
|
47
47
|
href="/posts/1"
|
|
48
|
-
onMouseEnter={() => prefetch((api) => api.
|
|
48
|
+
onMouseEnter={() => prefetch((api) => api("posts/:id").GET({ params: { id: 1 } }))}
|
|
49
49
|
>
|
|
50
50
|
View Post
|
|
51
51
|
</Link>
|
|
@@ -64,10 +64,41 @@ await prefetch(
|
|
|
64
64
|
|
|
65
65
|
The second argument to `prefetch()` accepts any plugin options (staleTime, retries, dedupe, etc.) plus:
|
|
66
66
|
|
|
67
|
-
| Option
|
|
68
|
-
|
|
|
69
|
-
| `tags`
|
|
70
|
-
|
|
67
|
+
| Option | Type | Description |
|
|
68
|
+
| ------ | --------------------------------------- | -------------------------------------------------- |
|
|
69
|
+
| `tags` | `'all' \| 'self' \| 'none' \| string[]` | Tag mode or custom tags (replaces `additionalTags`) |
|
|
70
|
+
|
|
71
|
+
**Examples:**
|
|
72
|
+
|
|
73
|
+
```typescript
|
|
74
|
+
// Mode only - 'all' generates full hierarchy
|
|
75
|
+
await prefetch((api) => api("users/:id/posts").GET({ params: { id: '123' } }), {
|
|
76
|
+
tags: 'all' // ['users', 'users/123', 'users/123/posts']
|
|
77
|
+
});
|
|
78
|
+
|
|
79
|
+
// Mode only - 'self' generates only exact path
|
|
80
|
+
await prefetch((api) => api("users/:id/posts").GET({ params: { id: '123' } }), {
|
|
81
|
+
tags: 'self' // ['users/123/posts']
|
|
82
|
+
});
|
|
83
|
+
|
|
84
|
+
// Mode only - 'none' generates no tags
|
|
85
|
+
await prefetch((api) => api("posts").GET(), { tags: 'none' }); // []
|
|
86
|
+
|
|
87
|
+
// Custom tags only - replaces auto-generated tags
|
|
88
|
+
await prefetch((api) => api("posts").GET(), {
|
|
89
|
+
tags: ['custom', 'dashboard'] // ['custom', 'dashboard']
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// Mode + custom tags - 'all' mode combined with custom tags
|
|
93
|
+
await prefetch((api) => api("users/:id/posts").GET({ params: { id: '123' } }), {
|
|
94
|
+
tags: ['all', 'dashboard'] // ['users', 'users/123', 'users/123/posts', 'dashboard']
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
// Mode + custom tags - 'self' mode combined with custom tags
|
|
98
|
+
await prefetch((api) => api("users/:id/posts").GET({ params: { id: '123' } }), {
|
|
99
|
+
tags: ['self', 'dashboard'] // ['users/123/posts', 'dashboard']
|
|
100
|
+
});
|
|
101
|
+
```
|
|
71
102
|
|
|
72
103
|
## Features
|
|
73
104
|
|
|
@@ -77,9 +108,9 @@ Multiple calls to prefetch the same data will return the same promise, avoiding
|
|
|
77
108
|
|
|
78
109
|
```typescript
|
|
79
110
|
// These will only make ONE network request
|
|
80
|
-
prefetch((api) => api.
|
|
81
|
-
prefetch((api) => api.
|
|
82
|
-
prefetch((api) => api.
|
|
111
|
+
prefetch((api) => api("posts").GET());
|
|
112
|
+
prefetch((api) => api("posts").GET());
|
|
113
|
+
prefetch((api) => api("posts").GET());
|
|
83
114
|
```
|
|
84
115
|
|
|
85
116
|
### Memory Leak Prevention
|
package/dist/index.d.mts
CHANGED
|
@@ -52,13 +52,13 @@ declare module "@spoosh/core" {
|
|
|
52
52
|
* const { prefetch } = createReactSpoosh(client);
|
|
53
53
|
*
|
|
54
54
|
* // Basic prefetch
|
|
55
|
-
* await prefetch((api) => api.
|
|
55
|
+
* await prefetch((api) => api("posts").GET());
|
|
56
56
|
*
|
|
57
57
|
* // Prefetch with query options
|
|
58
|
-
* await prefetch((api) => api.
|
|
58
|
+
* await prefetch((api) => api("posts").GET({ query: { page: 1, limit: 10 } }));
|
|
59
59
|
*
|
|
60
60
|
* // Prefetch with plugin options (staleTime, retries, etc.)
|
|
61
|
-
* await prefetch((api) => api.
|
|
61
|
+
* await prefetch((api) => api("users/:id").GET({ params: { id: userId } }), {
|
|
62
62
|
* staleTime: 60000,
|
|
63
63
|
* retries: 3,
|
|
64
64
|
* });
|
|
@@ -66,7 +66,7 @@ declare module "@spoosh/core" {
|
|
|
66
66
|
* // Prefetch on hover
|
|
67
67
|
* <Link
|
|
68
68
|
* href="/posts/1"
|
|
69
|
-
* onMouseEnter={() => prefetch((api) => api.
|
|
69
|
+
* onMouseEnter={() => prefetch((api) => api("posts/:id").GET({ params: { id: 1 } }))}
|
|
70
70
|
* >
|
|
71
71
|
* View Post
|
|
72
72
|
* </Link>
|
package/dist/index.d.ts
CHANGED
|
@@ -52,13 +52,13 @@ declare module "@spoosh/core" {
|
|
|
52
52
|
* const { prefetch } = createReactSpoosh(client);
|
|
53
53
|
*
|
|
54
54
|
* // Basic prefetch
|
|
55
|
-
* await prefetch((api) => api.
|
|
55
|
+
* await prefetch((api) => api("posts").GET());
|
|
56
56
|
*
|
|
57
57
|
* // Prefetch with query options
|
|
58
|
-
* await prefetch((api) => api.
|
|
58
|
+
* await prefetch((api) => api("posts").GET({ query: { page: 1, limit: 10 } }));
|
|
59
59
|
*
|
|
60
60
|
* // Prefetch with plugin options (staleTime, retries, etc.)
|
|
61
|
-
* await prefetch((api) => api.
|
|
61
|
+
* await prefetch((api) => api("users/:id").GET({ params: { id: userId } }), {
|
|
62
62
|
* staleTime: 60000,
|
|
63
63
|
* retries: 3,
|
|
64
64
|
* });
|
|
@@ -66,7 +66,7 @@ declare module "@spoosh/core" {
|
|
|
66
66
|
* // Prefetch on hover
|
|
67
67
|
* <Link
|
|
68
68
|
* href="/posts/1"
|
|
69
|
-
* onMouseEnter={() => prefetch((api) => api.
|
|
69
|
+
* onMouseEnter={() => prefetch((api) => api("posts/:id").GET({ params: { id: 1 } }))}
|
|
70
70
|
* >
|
|
71
71
|
* View Post
|
|
72
72
|
* </Link>
|
package/dist/index.js
CHANGED
|
@@ -57,8 +57,8 @@ function prefetchPlugin(config = {}) {
|
|
|
57
57
|
instanceApi(context) {
|
|
58
58
|
const { api, stateManager, eventEmitter, pluginExecutor } = context;
|
|
59
59
|
const prefetch = async (selector, options = {}) => {
|
|
60
|
-
const { tags
|
|
61
|
-
let callPath =
|
|
60
|
+
const { tags } = options;
|
|
61
|
+
let callPath = "";
|
|
62
62
|
let callMethod = "";
|
|
63
63
|
let callOptions = void 0;
|
|
64
64
|
const selectorProxy = (0, import_core.createSelectorProxy)((result) => {
|
|
@@ -74,16 +74,14 @@ function prefetchPlugin(config = {}) {
|
|
|
74
74
|
selector(selectorProxy);
|
|
75
75
|
if (!callMethod) {
|
|
76
76
|
throw new Error(
|
|
77
|
-
|
|
77
|
+
'prefetch requires selecting a GET method. Example: prefetch((api) => api("posts").GET())'
|
|
78
78
|
);
|
|
79
79
|
}
|
|
80
|
-
const
|
|
81
|
-
const
|
|
82
|
-
|
|
83
|
-
resolvedPath
|
|
84
|
-
);
|
|
80
|
+
const pathSegments = callPath.split("/").filter(Boolean);
|
|
81
|
+
const resolvedPath = (0, import_core.resolvePath)(pathSegments, void 0);
|
|
82
|
+
const resolvedTags = (0, import_core.resolveTags)({ tags }, resolvedPath);
|
|
85
83
|
const queryKey = stateManager.createQueryKey({
|
|
86
|
-
path:
|
|
84
|
+
path: pathSegments,
|
|
87
85
|
method: callMethod,
|
|
88
86
|
options: callOptions
|
|
89
87
|
});
|
|
@@ -91,7 +89,7 @@ function prefetchPlugin(config = {}) {
|
|
|
91
89
|
const abortController = new AbortController();
|
|
92
90
|
const pluginContext = pluginExecutor.createContext({
|
|
93
91
|
operationType: "read",
|
|
94
|
-
path:
|
|
92
|
+
path: pathSegments,
|
|
95
93
|
method: callMethod,
|
|
96
94
|
queryKey,
|
|
97
95
|
tags: resolvedTags,
|
|
@@ -120,11 +118,8 @@ function prefetchPlugin(config = {}) {
|
|
|
120
118
|
}
|
|
121
119
|
};
|
|
122
120
|
try {
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
current = current[segment];
|
|
126
|
-
}
|
|
127
|
-
const method = current[callMethod];
|
|
121
|
+
const pathMethods = api(callPath);
|
|
122
|
+
const method = pathMethods[callMethod];
|
|
128
123
|
const mergedOptions = {
|
|
129
124
|
...callOptions,
|
|
130
125
|
...pluginContext.requestOptions
|
package/dist/index.mjs
CHANGED
|
@@ -36,8 +36,8 @@ function prefetchPlugin(config = {}) {
|
|
|
36
36
|
instanceApi(context) {
|
|
37
37
|
const { api, stateManager, eventEmitter, pluginExecutor } = context;
|
|
38
38
|
const prefetch = async (selector, options = {}) => {
|
|
39
|
-
const { tags
|
|
40
|
-
let callPath =
|
|
39
|
+
const { tags } = options;
|
|
40
|
+
let callPath = "";
|
|
41
41
|
let callMethod = "";
|
|
42
42
|
let callOptions = void 0;
|
|
43
43
|
const selectorProxy = createSelectorProxy((result) => {
|
|
@@ -53,16 +53,14 @@ function prefetchPlugin(config = {}) {
|
|
|
53
53
|
selector(selectorProxy);
|
|
54
54
|
if (!callMethod) {
|
|
55
55
|
throw new Error(
|
|
56
|
-
|
|
56
|
+
'prefetch requires selecting a GET method. Example: prefetch((api) => api("posts").GET())'
|
|
57
57
|
);
|
|
58
58
|
}
|
|
59
|
-
const
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
resolvedPath
|
|
63
|
-
);
|
|
59
|
+
const pathSegments = callPath.split("/").filter(Boolean);
|
|
60
|
+
const resolvedPath = resolvePath(pathSegments, void 0);
|
|
61
|
+
const resolvedTags = resolveTags({ tags }, resolvedPath);
|
|
64
62
|
const queryKey = stateManager.createQueryKey({
|
|
65
|
-
path:
|
|
63
|
+
path: pathSegments,
|
|
66
64
|
method: callMethod,
|
|
67
65
|
options: callOptions
|
|
68
66
|
});
|
|
@@ -70,7 +68,7 @@ function prefetchPlugin(config = {}) {
|
|
|
70
68
|
const abortController = new AbortController();
|
|
71
69
|
const pluginContext = pluginExecutor.createContext({
|
|
72
70
|
operationType: "read",
|
|
73
|
-
path:
|
|
71
|
+
path: pathSegments,
|
|
74
72
|
method: callMethod,
|
|
75
73
|
queryKey,
|
|
76
74
|
tags: resolvedTags,
|
|
@@ -99,11 +97,8 @@ function prefetchPlugin(config = {}) {
|
|
|
99
97
|
}
|
|
100
98
|
};
|
|
101
99
|
try {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
current = current[segment];
|
|
105
|
-
}
|
|
106
|
-
const method = current[callMethod];
|
|
100
|
+
const pathMethods = api(callPath);
|
|
101
|
+
const method = pathMethods[callMethod];
|
|
107
102
|
const mergedOptions = {
|
|
108
103
|
...callOptions,
|
|
109
104
|
...pluginContext.requestOptions
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spoosh/plugin-prefetch",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Prefetch plugin for Spoosh - preload data before it's needed",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@spoosh/core": ">=0.
|
|
36
|
+
"@spoosh/core": ">=0.7.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
|
-
"@spoosh/
|
|
40
|
-
"@spoosh/
|
|
39
|
+
"@spoosh/test-utils": "0.1.5",
|
|
40
|
+
"@spoosh/core": "0.7.0"
|
|
41
41
|
},
|
|
42
42
|
"scripts": {
|
|
43
43
|
"dev": "tsup --watch",
|