From b0340bbbb43330914b67955e9a07126deee9f199 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Sun, 15 Aug 2021 00:32:29 +0900
Subject: [PATCH] feat: display keys for useSWRInfinite

---
 .../swr-devtools/src/components/CacheData.tsx    |  4 ++--
 packages/swr-devtools/src/components/Panel.tsx   |  4 ++--
 packages/swr-devtools/src/swr-cache.ts           | 16 +++++++++++++++-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/swr-devtools/src/components/CacheData.tsx b/packages/swr-devtools/src/components/CacheData.tsx
index 06caa8a..1a04b76 100644
--- 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
index 28241be..45b10e6 100644
--- 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
index 49a0850..e5eee39 100644
--- 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;
+};