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:
Example for 2:
Example 3:
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
})
}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 }
}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,
})
}
