feat(query-devtools): add indicator for staleTime: "static" (#9215)

Co-authored-by: Dominik Dorfmeister <[email protected]>

Author: minseong0324

packages/query-devtools/src/Devtools.tsx

@@ -1263,6 +1263,17 @@ const QueryRow: Component<{ query: Query }> = (props) => {
     (e) => e.query.queryHash === props.query.queryHash,
   )
 
+  const isStatic = createSubscribeToQueryCacheBatcher(
+    (queryCache) =>
+      queryCache()
+        .find({
+          queryKey: props.query.queryKey,
+        })
+        ?.isStatic() ?? false,
+    true,
+    (e) => e.query.queryHash === props.query.queryHash,
+  )
+
   const isStale = createSubscribeToQueryCacheBatcher(
     (queryCache) =>
       queryCache()
@@ -1337,6 +1348,9 @@ const QueryRow: Component<{ query: Query }> = (props) => {
         <Show when={isDisabled()}>
           <div class="tsqd-query-disabled-indicator">disabled</div>
         </Show>
+        <Show when={isStatic()}>
+          <div class="tsqd-query-static-indicator">static</div>
+        </Show>
       </button>
     </Show>
   )
@@ -3180,6 +3194,17 @@ const stylesFactory = (
         border-bottom: 1px solid ${t(colors.gray[300], colors.darkGray[400])};
         font-size: ${font.size.xs};
       }
+
+      & .tsqd-query-static-indicator {
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        padding: 0 ${tokens.size[2]};
+        color: ${t(colors.teal[800], colors.teal[300])};
+        background-color: ${t(colors.teal[100], colors.teal[900])};
+        border-bottom: 1px solid ${t(colors.teal[300], colors.teal[700])};
+        font-size: ${font.size.xs};
+      }
     `,
     selectedQueryRow: css`
       background-color: ${t(colors.gray[200], colors.darkGray[500])};