Replies: 3 comments 3 replies
-
check for |
Beta Was this translation helpful? Give feedback.
2 replies
-
Here is a dev-friendly middleware, inspired from @TkDodo answer import { QueryObserverLoadingResult, UseQueryResult } from '@tanstack/react-query';
export interface NoCacheDataMiddlewareOptions {
allowCachedData?: boolean;
}
export const noCachedDataMiddleware = <T>(queryResult: UseQueryResult<T>): UseQueryResult<T> => {
if (queryResult.isSuccess && !queryResult.isFetchedAfterMount) {
// We do not tolerate cached data here.
// Therefore if the data comes from the cache of an earlier query, we dont use it, and instead return a loading state.
return {
...queryResult,
...queryLoadingState, // override fields to return a loading state.
} satisfies QueryObserverLoadingResult;
}
return queryResult;
};
const queryLoadingState = {
data: undefined,
error: null,
isError: false,
isPending: true,
isLoading: true,
isLoadingError: false,
isRefetchError: false,
isSuccess: false,
status: 'pending',
} satisfies Partial<QueryObserverLoadingResult>; Usage: const result = useQuery({
queryKey: ['foobar']
queryFn: () => fetchFoobar(),
});
const activeMiddlewares = [
...(options.allowCachedData === false ? [noCachedDataMiddleware] : []),
];
return flow(activeMiddlewares)(result); // lodash's flow, but may be overkill if you just have one middleware. |
Beta Was this translation helpful? Give feedback.
1 reply
-
How to never use stale data in suspense? |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a feature that cannot tolerate stale data.
isLoading
until the request returns and provide fresh data.Is there an option for that?
I've cheched the doc and found nothing for that, although I dont think it is such a edge case usage 🤔
My current workaround is to override to
{isLoading: true, data: undefined}
when{isStale: true}
.Beta Was this translation helpful? Give feedback.
All reactions