clear-react-router 1.8.2 → 1.8.3
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 +15 -11
- package/dist/index.js +7 -7
- package/dist/types.d.ts +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -463,9 +463,7 @@ const UserProfile = () => {
|
|
|
463
463
|
|
|
464
464
|
### `useInvalidate()`
|
|
465
465
|
|
|
466
|
-
Returns a function that revalidates **cached** route data
|
|
467
|
-
|
|
468
|
-
Calling `invalidate()` clears the cached loader result and immediately runs both `beforeLoad` and `loader` for the specified route. This is useful after mutations or any operation that changes data used by the route.
|
|
466
|
+
Returns a function that revalidates **cached** route data. Calling `invalidate()` clears cached route data and immediately runs the corresponding route loader again.
|
|
469
467
|
|
|
470
468
|
#### Current route
|
|
471
469
|
|
|
@@ -490,12 +488,12 @@ await invalidate('/posts');
|
|
|
490
488
|
You can revalidate several routes at once by passing an array of pathnames:
|
|
491
489
|
|
|
492
490
|
```tsx
|
|
493
|
-
await invalidate([
|
|
491
|
+
await invalidate(['/posts', '/profile', '/settings']);
|
|
494
492
|
```
|
|
495
493
|
|
|
496
494
|
#### Dynamic routes
|
|
497
495
|
|
|
498
|
-
When a dynamic route pattern is provided, every cached route
|
|
496
|
+
When a dynamic route pattern is provided, every cached route that matches the pattern will be revalidated.
|
|
499
497
|
|
|
500
498
|
For example:
|
|
501
499
|
|
|
@@ -526,7 +524,7 @@ await invalidate('/posts', { withChildren: true });
|
|
|
526
524
|
await invalidate(['/posts', '/users'], { withChildren: true });
|
|
527
525
|
```
|
|
528
526
|
|
|
529
|
-
This will recursively revalidate cached routes
|
|
527
|
+
This will recursively revalidate all cached child routes.
|
|
530
528
|
|
|
531
529
|
For example, if the following routes have been visited:
|
|
532
530
|
|
|
@@ -550,17 +548,23 @@ will revalidate the cached child routes:
|
|
|
550
548
|
/post/23
|
|
551
549
|
/post/42/comments
|
|
552
550
|
```
|
|
551
|
+
#### Including `beforeLoad`
|
|
552
|
+
|
|
553
|
+
To include the `beforeLoad` function in the revalidation process, pass the `withBeforeLoad` option:
|
|
554
|
+
|
|
555
|
+
```tsx
|
|
556
|
+
await invalidate('/posts', { withBeforeLoad: true });
|
|
557
|
+
await invalidate(['/posts', '/users'], { withBeforeLoad: true });
|
|
558
|
+
```
|
|
559
|
+
|
|
553
560
|
#### Notes
|
|
554
561
|
|
|
555
|
-
* `invalidate()` re-executes both `beforeLoad` and `loader` for the invalidated route.
|
|
556
562
|
* **Only routes that already have cached data are revalidated.**
|
|
557
|
-
* Cached data is
|
|
563
|
+
* Cached data is cleared before the new loader starts.
|
|
558
564
|
* When used as an event handler, wrap the call in an arrow function:
|
|
559
565
|
|
|
560
566
|
```tsx
|
|
561
|
-
<button onClick={() => invalidate()}>
|
|
562
|
-
Refresh
|
|
563
|
-
</button>
|
|
567
|
+
<button onClick={() => invalidate()}>Refresh</button>
|
|
564
568
|
```
|
|
565
569
|
|
|
566
570
|
Passing `invalidate` directly (`onClick={invalidate}`) is not supported because React passes a `MouseEvent` object to event handlers.
|
package/dist/index.js
CHANGED
|
@@ -323,7 +323,7 @@ var createNavigate = (routerState, revalidateCache) => {
|
|
|
323
323
|
//#region runtime/invalidate.ts
|
|
324
324
|
var redirect = () => Promise.resolve();
|
|
325
325
|
var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, currentLoaderState, contextState }, revalidateCache) => {
|
|
326
|
-
const invalidatePath = async (routeItem, pathname) => {
|
|
326
|
+
const invalidatePath = async (routeItem, pathname, options) => {
|
|
327
327
|
const routePathname = routeItemDataState.getState().location.pathname;
|
|
328
328
|
timestampMap.delete(pathname);
|
|
329
329
|
const params = getParamsObject({
|
|
@@ -331,7 +331,7 @@ var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, curr
|
|
|
331
331
|
pathname
|
|
332
332
|
});
|
|
333
333
|
try {
|
|
334
|
-
if (routeItem?.beforeLoad) {
|
|
334
|
+
if (routeItem?.beforeLoad && options?.withBeforeLoad) {
|
|
335
335
|
const context = contextState.getState();
|
|
336
336
|
const setContext = contextState.setState;
|
|
337
337
|
await routeItem.beforeLoad({
|
|
@@ -357,21 +357,21 @@ var createInvalidate = ({ routeItemDataState, loaderStateRef, timestampMap, curr
|
|
|
357
357
|
});
|
|
358
358
|
if (pathname === routePathname) currentLoaderState.setState(loaderStateRef.value);
|
|
359
359
|
};
|
|
360
|
-
const invalidateItem = async (pathname,
|
|
360
|
+
const invalidateItem = async (pathname, options) => {
|
|
361
361
|
const routeItem = findRoute(pathname);
|
|
362
362
|
if (!routeItem) return;
|
|
363
363
|
const pathnameArray = [];
|
|
364
364
|
for (const [key] of timestampMap) if (comparePaths(routeItem, key)) pathnameArray.push(key);
|
|
365
|
-
await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname)));
|
|
366
|
-
if (withChildren && routeItem.children?.length) {
|
|
365
|
+
await Promise.all(pathnameArray.map((pathname) => invalidatePath(routeItem, pathname, options)));
|
|
366
|
+
if (options?.withChildren && routeItem.children?.length) {
|
|
367
367
|
const childPathList = routeItem.children.map((el) => el.path);
|
|
368
|
-
await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`,
|
|
368
|
+
await Promise.all(childPathList.map((el) => invalidateItem(`${pathname}${el}`, options)));
|
|
369
369
|
}
|
|
370
370
|
};
|
|
371
371
|
return async (pathList, options) => {
|
|
372
372
|
const routePathname = routeItemDataState.getState().location.pathname;
|
|
373
373
|
const pathnameList = Array.isArray(pathList) ? pathList : pathList ? [pathList] : [routePathname];
|
|
374
|
-
await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options
|
|
374
|
+
await Promise.all(pathnameList.map((pathname) => invalidateItem(pathname, options)));
|
|
375
375
|
};
|
|
376
376
|
};
|
|
377
377
|
//#endregion
|
package/dist/types.d.ts
CHANGED
|
@@ -138,6 +138,7 @@ export type RouterType = {
|
|
|
138
138
|
};
|
|
139
139
|
export type InvalidateOptions = {
|
|
140
140
|
withChildren?: boolean;
|
|
141
|
+
withBeforeLoad?: boolean;
|
|
141
142
|
};
|
|
142
143
|
export type RevalidateCache = ({ routeItem, pathname }: RevalidateCacheArgs) => Promise<unknown> | undefined;
|
|
143
144
|
export type Options = Partial<{
|