Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

wants to merge 1 commit into from
+25 −0

Conversation

minseong0324
Copy link
Contributor

@minseong0324 minseong0324 commented May 29, 2025 •
edited
Loading

This PR adds a visual indicator in the DevTools for queries that use the staleTime: 'static' option. When a query is in a static state, it now displays a distinct teal label in the UI, similar to how disabled queries are currently labeled.

This PR addresses the suggestion in this comment.

Testing

I tested in examples/react/devtools-panel/src/index.tsx with the following example code.

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    staleTime: 'static', // add this line
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
      )
      return await response.json()
    },
  })

  // ... rest of the code ...
}

Screenshots

image

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented May 29, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit f820d46.

Command Status Duration Result
nx affected --targets=test:sherif,test:knip,tes... ✅ Succeeded 2m 53s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 49s View ↗

☁️ Nx Cloud last updated this comment at 2025-05-29 15:55:27 UTC

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented May 29, 2025

More templates

@tanstack/angular-query-devtools-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@9215

@tanstack/angular-query-experimental

npm i https://pkg.pr.new/@tanstack/angular-query-experimental@9215

@tanstack/eslint-plugin-query

npm i https://pkg.pr.new/@tanstack/eslint-plugin-query@9215

@tanstack/query-async-storage-persister

npm i https://pkg.pr.new/@tanstack/query-async-storage-persister@9215

@tanstack/query-broadcast-client-experimental

npm i https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@9215

@tanstack/query-core

npm i https://pkg.pr.new/@tanstack/query-core@9215

@tanstack/query-devtools

npm i https://pkg.pr.new/@tanstack/query-devtools@9215

@tanstack/query-persist-client-core

npm i https://pkg.pr.new/@tanstack/query-persist-client-core@9215

@tanstack/query-sync-storage-persister

npm i https://pkg.pr.new/@tanstack/query-sync-storage-persister@9215

@tanstack/react-query

npm i https://pkg.pr.new/@tanstack/react-query@9215

@tanstack/react-query-devtools

npm i https://pkg.pr.new/@tanstack/react-query-devtools@9215

@tanstack/react-query-next-experimental

npm i https://pkg.pr.new/@tanstack/react-query-next-experimental@9215

@tanstack/react-query-persist-client

npm i https://pkg.pr.new/@tanstack/react-query-persist-client@9215

@tanstack/solid-query

npm i https://pkg.pr.new/@tanstack/solid-query@9215

@tanstack/solid-query-devtools

npm i https://pkg.pr.new/@tanstack/solid-query-devtools@9215

@tanstack/solid-query-persist-client

npm i https://pkg.pr.new/@tanstack/solid-query-persist-client@9215

@tanstack/svelte-query

npm i https://pkg.pr.new/@tanstack/svelte-query@9215

@tanstack/svelte-query-devtools

npm i https://pkg.pr.new/@tanstack/svelte-query-devtools@9215

@tanstack/svelte-query-persist-client

npm i https://pkg.pr.new/@tanstack/svelte-query-persist-client@9215

@tanstack/vue-query

npm i https://pkg.pr.new/@tanstack/vue-query@9215

@tanstack/vue-query-devtools

npm i https://pkg.pr.new/@tanstack/vue-query-devtools@9215

commit: f820d46

@codecov Codecov
Copy link

codecov bot commented May 29, 2025

Codecov Report

Attention: Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.

Project coverage is 15.68%. Comparing base (b475d21) to head (f820d46).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9215       +/-   ##
===========================================
- Coverage   45.30%   15.68%   -29.62%     
===========================================
  Files         209       34      -175     
  Lines        8257     2199     -6058     
  Branches     1856      559     -1297     
===========================================
- Hits         3741      345     -3396     
+ Misses       4076     1621     -2455     
+ Partials      440      233      -207
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental 85.04% <ø> (ø)
@tanstack/eslint-plugin-query ∅ <ø> (∅)
@tanstack/query-async-storage-persister ∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core ∅ <ø> (∅)
@tanstack/query-devtools 3.55% <0.00%> (-0.01%) ⬇️
@tanstack/query-persist-client-core ∅ <ø> (∅)
@tanstack/query-sync-storage-persister ∅ <ø> (∅)
@tanstack/query-test-utils ∅ <ø> (∅)
@tanstack/react-query ∅ <ø> (∅)
@tanstack/react-query-devtools 10.00% <ø> (ø)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client ∅ <ø> (∅)
@tanstack/solid-query ∅ <ø> (∅)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client ∅ <ø> (∅)
@tanstack/svelte-query ∅ <ø> (∅)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client ∅ <ø> (∅)
@tanstack/vue-query ∅ <ø> (∅)
@tanstack/vue-query-devtools ∅ <ø> (∅)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@minseong0324 minseong0324 changed the title feat(query-devtools): add indicator for staleTime: "static" in devtools feat(query-devtools): add indicator for staleTime: 'static' in devtools May 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
package: query-devtools
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@minseong0324