Can we change staleTime and cacheTime via props or state change after query is mounted?

Are these example custom hooks implementation valid for v3/v4/v5?
1. Change stale time or cache time when query key changes in custom hook implementation
2. Change stale time or cache time without changing query key
3. Different custom hooks set different staleTime value on same query key

Example for 1:

const fetchData = async (id: string, search?: string) => 'data'

export const useData = (id: string, search?: string) => {


  const defaultStaleTime = Infinity
  const customStaleTime = 10 * 1000 //ten seconds

  const defaultCacheTime = 60 * 5 * 1000
  const customCacheTime = 15 * 1000 // 15 seconds


  const staleTime = search ? customStaleTime : defaultStaleTime
  const cacheTime = search ? customCacheTime : defaultCacheTime

  return useQuery({
    queryKey: ['users', id, search],
    queryFn: () => fetchData(id, search),
    staleTime: staleTime,
    cacheTime: cacheTime
  })

}

const fetchData = async (id: string, search?: string) => 'data'

export const useData = (id: string, search?: string) => {


  const defaultStaleTime = Infinity
  const customStaleTime = 10 * 1000 //ten seconds

  const defaultCacheTime = 60 * 5 * 1000
  const customCacheTime = 15 * 1000 // 15 seconds


  const staleTime = search ? customStaleTime : defaultStaleTime
  const cacheTime = search ? customCacheTime : defaultCacheTime

  return useQuery({
    queryKey: ['users', id, search],
    queryFn: () => fetchData(id, search),
    staleTime: staleTime,
    cacheTime: cacheTime
  })

}

const fetchData = async (id: string, search?: string) => 'data'

export const useData = (id: string, search?: string) => {


  const defaultStaleTime = Infinity
  const customStaleTime = 10 * 1000 //ten seconds

  const defaultCacheTime = 60 * 5 * 1000
  const customCacheTime = 15 * 1000 // 15 seconds


  const staleTime = search ? customStaleTime : defaultStaleTime
  const cacheTime = search ? customCacheTime : defaultCacheTime

  return useQuery({
    queryKey: ['users', id, search],
    queryFn: () => fetchData(id, search),
    staleTime: staleTime,
    cacheTime: cacheTime
  })

}

const fetchData = async (id: string, search?: string) => 'data'

export const useData = (id: string, search?: string) => {


  const defaultStaleTime = Infinity
  const customStaleTime = 10 * 1000 //ten seconds

  const defaultCacheTime = 60 * 5 * 1000
  const customCacheTime = 15 * 1000 // 15 seconds


  const staleTime = search ? customStaleTime : defaultStaleTime
  const cacheTime = search ? customCacheTime : defaultCacheTime

  return useQuery({
    queryKey: ['users', id, search],
    queryFn: () => fetchData(id, search),
    staleTime: staleTime,
    cacheTime: cacheTime
  })

}

Example for 2:

export const useData = (id: string) => {

  const [staleTime, setStaleTime] = useState<number>(Infinity)

  const query = useQuery({
    queryKey: ['users', id],
    queryFn: () => fetchData(id),
    staleTime: staleTime,

  })

  return { query, setStaleTime }
}

export const useData = (id: string) => {

  const [staleTime, setStaleTime] = useState<number>(Infinity)

  const query = useQuery({
    queryKey: ['users', id],
    queryFn: () => fetchData(id),
    staleTime: staleTime,

  })

  return { query, setStaleTime }
}

export const useData = (id: string) => {

  const [staleTime, setStaleTime] = useState<number>(Infinity)

  const query = useQuery({
    queryKey: ['users', id],
    queryFn: () => fetchData(id),
    staleTime: staleTime,

  })

  return { query, setStaleTime }
}

export const useData = (id: string) => {

  const [staleTime, setStaleTime] = useState<number>(Infinity)

  const query = useQuery({
    queryKey: ['users', id],
    queryFn: () => fetchData(id),
    staleTime: staleTime,

  })

  return { query, setStaleTime }
}

Example 3:

export const useData1 = (id: string) => {

  const staleTime1 = 3 * 60 * 1000 //3 minutes; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime1,

  })

}

export const useData2 = (id: string) => {

  const staleTime2 = 10 * 1000 //10 sec; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime2,

  })

}

export const useData1 = (id: string) => {

  const staleTime1 = 3 * 60 * 1000 //3 minutes; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime1,

  })

}

export const useData2 = (id: string) => {

  const staleTime2 = 10 * 1000 //10 sec; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime2,

  })

}

export const useData1 = (id: string) => {

  const staleTime1 = 3 * 60 * 1000 //3 minutes; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime1,

  })

}

export const useData2 = (id: string) => {

  const staleTime2 = 10 * 1000 //10 sec; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime2,

  })

}

export const useData1 = (id: string) => {

  const staleTime1 = 3 * 60 * 1000 //3 minutes; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime1,

  })

}

export const useData2 = (id: string) => {

  const staleTime2 = 10 * 1000 //10 sec; different stale time

  return useQuery({
    queryKey: ['users', id], //sameQuerykey
    queryFn: () => fetchData(id),
    staleTime: staleTime2,

  })

}

Can we change staleTime and cacheTime via props or state change after query is mounted?

Similar Threads

Similar Threads

Similar Threads