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
Merged
merged 2 commits into from
Jun 2, 2025
Merged

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

merged 2 commits into from
Jun 2, 2025

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 1cc3d4a.

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

☁️ Nx Cloud last updated this comment at 2025-06-02 16:43:53 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 •
edited
Loading

Codecov Report

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

Project coverage is 15.68%. Comparing base (0e083c6) to head (1cc3d4a).
Report is 2 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #9215       +/-   ##
===========================================
- Coverage   45.37%   15.68%   -29.69%     
===========================================
  Files         209       34      -175     
  Lines        8267     2199     -6068     
  Branches     1864      566     -1298     
===========================================
- Hits         3751      345     -3406     
+ 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
@TkDodo
Copy link
Collaborator

TkDodo commented Jun 2, 2025

will we get static and disabled labels when we have both ?

@TkDodo TkDodo merged commit 3e7d715 into TanStack:main Jun 2, 2025
3 of 6 checks passed
@minseong0324
Copy link
Contributor Author

will we get static and disabled labels when we have both ?

Yes. with our current implementation, a query with both enabled: false and staleTime: 'static' will display both the disabled and static labels.

image

@TkDodo
Copy link
Collaborator

TkDodo commented Jun 2, 2025

Looks good 👍

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.
2 participants
@minseong0324 @TkDodo