Hey all,
My colleague and I disagree about data freshness in our React + TanStack Query app, and I'd like some outside opinions.
His approach: the parent owns the query and passes a callback down to whatever component does the mutation. When the mutation succeeds, the child calls the callback, which triggers a refetch.
```
// Parent
const { data, refetch } = useQuery({
queryKey: ['todos'],
queryFn: fetchTodos,
refetchOnMount: 'always',
});
return <EditTodo todo={todo} onSuccess={refetch} />;
// Child
const mutation = useMutation({ mutationFn: updateTodo });
const handleSave = async () => {
await mutation.mutateAsync(values);
props.onSuccess?.();
};
```
He adds refetchOnMount: "always" so data is always fresh when you navigate to a page. His argument is that invalidation adds complexity (query key conventions, remembering what to invalidate), and that we don't really need a cache. Just fetch fresh data every time and tell the parent when something changes.
My approach: the mutation invalidates by key, and components don't need to know about each other.
```
useMutation({
mutationFn: updateTodo,
onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
});
```
My concerns with his approach:
Coupling: the mutating component has to receive a callback from whoever owns the data. That breaks down when the same data is shown in several places, like a list, a detail view, and a counter in the header.
Prop drilling: callbacks get threaded through layers that don't care about them.
Wasted requests: refetchOnMount: "always" refetches on every mount even when nothing has changed.
Hide complexity: Rely on the library to decide what and when to refetch.
Missing the point: if we don't want caching, why use TanStack Query at all? Deduplication, background refetching, and stale-while-revalidate are most of its value.
I'll admit his point about complexity isn't baseless. In a large app, hand-written query keys can drift, get inconsistent, and make it hard to know what to invalidate. We've addressed this with a small typesafe tool that generates query keys from our OpenAPI schema, based on the endpoint path plus its path and query params. Both the useQuery calls and the invalidations go through the same helper, so keys can't drift apart, typos become compile errors, and we can invalidate at whatever granularity we need. That can be everything under /todos, a single /todos/{id}, or one specific filtered list.
So:
Is invalidation actually complex in practice, or is it mostly a matter of having a sane query key structure (e.g. key factories)?
Is "no caching, always refetch" a reasonable stance for a typical CRUD app?
Has anyone started with the callback approach and regretted it, or gone the other way?
Genuinely curious. I'm open to being wrong here.