Open steinybot opened 6 months ago
I've asked some questions related to this in https://github.com/remix-run/react-router/discussions/11328
There is a workaround which is to put this in the error boundary:
const revalidator = useRevalidator();
useEffect(() => {
revalidator.revalidate()
}, []);
Oh need to be careful with that one. It can easily lead to infinite render loops. It works in the todo-nested example but not in my app.
This workaround is much better:
// It only runs on unmount. The descendents will have unmounted first and disposed of any queries.
useEffect(() => () => {
function hasDisposedQuery() {
for (const match of matches) {
if (isObject(match.data)) {
const data = match.data
if ('queries' in data && isObject(data.queries)) {
const queries = data.queries
for (const key in queries) {
const query = queries[key];
if (isObject(query) && 'isDisposed' in query) {
return query.isDisposed === true
}
}
}
}
}
return false
}
if (hasDisposedQuery()) {
revalidator.revalidate
}
}, []);
You put this in the errorElement
on your root route.
There are some cases where queries are being disposed of and not being reloaded.
The most likely is:
errorElement
errorElement
This example reproduces it: https://github.com/steinybot/react-router-relay/tree/examples/todo-nested/disposed-queries/examples/todo-nested