feat: display keys for useSWRInfinite

koba04 · Aug 14, 2021 · b0340bb · b0340bb
1 parent 813d6f4
commit b0340bb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/swr-devtools/src/components/CacheData.tsx b/packages/swr-devtools/src/components/CacheData.tsx
@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from "react";
 import styled from "styled-components";
-import type { SWRCacheData } from "../swr-cache";
+import { getDisplayCacheKey, SWRCacheData } from "../swr-cache";
 
 type Props = {
   data: SWRCacheData;
@@ -9,7 +9,7 @@ type Props = {
 export const CacheData = React.memo(({ data }: Props) => (
   <>
     <Title>
-      {data.key}&nbsp;
+      {getDisplayCacheKey(data.key)}&nbsp;
       <TimestampText>{data.timestampString}</TimestampText>
     </Title>
     <DataWrapper>

diff --git a/packages/swr-devtools/src/components/Panel.tsx b/packages/swr-devtools/src/components/Panel.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { SWRCacheData } from "../swr-cache";
+import { getDisplayCacheKey, SWRCacheData } from "../swr-cache";
 import { PanelType, ItemKey } from "./SWRDevTool";
 import { CacheData } from "./CacheData";
 
@@ -36,7 +36,7 @@ export const Panel = ({
               }
             >
               <CacheItemButton onClick={() => onSelectItem({ key, timestamp })}>
-                {key} ({timestampString})
+                {getDisplayCacheKey(key)} ({timestampString})
               </CacheItemButton>
             </CacheItem>
           ))}

diff --git a/packages/swr-devtools/src/swr-cache.ts b/packages/swr-devtools/src/swr-cache.ts
@@ -30,8 +30,22 @@ export const injectSWRCache = (
 export const isMetaCache = (key: string) => {
   return (
     // ctx and len are keys used in use-swr-infinite
-    /^(?:validating|err|ctx|len)@/.test(key) ||
+    /^(?:validating|err|context|len)@/.test(key) ||
     // v1 (beta)
     /^\$(?:req|err|ctx|len)\$/.test(key)
   );
 };
+
+const isInfiniteCache = (key: string) => {
+  return /^arg@"many"@"/.test(key);
+};
+
+const getInfiniteCacheKey = (key: string) => {
+  // TODO: support v1 style cache keys
+  const match = key.match(/^arg@"many"@"(?<cacheKey>.*)?"/);
+  return match?.groups?.cacheKey ?? key;
+};
+
+export const getDisplayCacheKey = (key: string) => {
+  return isInfiniteCache(key) ? "[Infinite] " + getInfiniteCacheKey(key) : key;
+};