Skip to content
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.

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

useSuspenseQuery ignores staleTime functions #8172

Closed
afdca opened this issue Oct 12, 2024 · 0 comments · Fixed by #8174
Closed

useSuspenseQuery ignores staleTime functions #8172

afdca opened this issue Oct 12, 2024 · 0 comments · Fixed by #8174

Comments

@afdca
Copy link

afdca commented Oct 12, 2024

Describe the bug

useSuspenseQuery ignores the staleTime config parameter when it is a function instead of a number.

// staleTime number - ✅ works
useSuspenseQuery({
  staleTime: Infinity,
  // ...
})

// staleTime function - ❌ does not work: staleTime value defaults to a value of 1 second instead
useSuspenseQuery({
  staleTime: () => Infinity,
  // ...
})

Your minimal, reproducible example

https://codesandbox.io/p/github/afdca/tanstack-query-suspense-staletime/master

Steps to reproduce

  • open the demo link, then open the Tanstack query devtools in the demo
  • notice the staleTime function query goes stale after 1 second
  • notice the staleTime number query never goes stale
  • notice how both queries are set up in the code:
  useSuspenseQuery({
    queryFn: () => true,
    queryKey: ["staleTime function"],
    staleTime: () => Infinity, // Function
  })

  useSuspenseQuery({
    queryFn: () => true,
    queryKey: ["staleTime number"],
    staleTime: Infinity, // Number
  })

Expected behavior

useSuspenseQuery should not ignore the staleTime config parameter when it is a function.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • OS - Windows 11
  • Browser - Firefox 131.0.2 and Chrome 129.0.6668.100
  • React - v18.3.1

Tanstack Query adapter

react-query

TanStack Query version

v5.59.12

TypeScript version

v5.6.3

Additional context

The issue seems to come from the ensureSuspenseTimers function: https://github.com/TanStack/query/blob/main/packages/react-query/src/suspense.ts#L27

export const ensureSuspenseTimers = (
  defaultedOptions: DefaultedQueryObserverOptions<any, any, any, any, any>,
) => {
  if (defaultedOptions.suspense) {
    // Always set stale time when using suspense to prevent
    // fetching again when directly mounting after suspending
    if (typeof defaultedOptions.staleTime !== 'number') { // ❗🚩Issue here
      defaultedOptions.staleTime = 1000
    }
    if (typeof defaultedOptions.gcTime === 'number') {
      defaultedOptions.gcTime = Math.max(defaultedOptions.gcTime, 1000)
    }
  }
}

The following fix should work:

if (typeof defaultedOptions.staleTime !== 'number' && typeof defaultedOptions.staleTime !== 'function') { 
  defaultedOptions.staleTime = 1000
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants