React 18 and RQ 4.28.x - Refetch issue when query have stale time

[igortas]

Hi,

RQ does not force React to rerender, after succesful endpoint call, on onSuccess triggering invalidateQueries for query that have stale time.
I get stale data all the time, I need to manually refresh the page.
I dispatch action for snackbar that goes up to the page of the app, and I have there useQuery, and dont like refreshing the data.
Starts to worry me a bit, how to have stable updates and queries, refetching of queries or optimistic updates.
Everything is hard and fragile to be setup properly for something simple.

I don't have code to reproduce, but this simple scenario, mutationDispatch, onSuccess invalidate query and wait some miracle with refetching fresh data, but never happens. :/ Does not all work, if I manually setQueryData without refetch.

BR.

[louis-young]

Hi 👋

Active queries (if the query is currently being rendered via useQuery or related hooks) should be refetched if invalidated via invalidateQueries and inactive queries should be marked as stale.

It's difficult to reason about this without seeing your implementation - please could you try to reproduce this so I can take a look for you?

[igortas]

@louis-young
The problem is dynamically rendered components per tab, and because components are without props, every component have own useQuery inside, so when I try to refetch queries, the current component, is not rerendered (because once was rendered as i was clicking on the tabs) and react can't force rerendering without setting explictly key={something} so knows is new instance of the currently rendered component.

useMemo is not hurting rerendering...

  const tabs = useMemo(
    () => [
      {
        name: 'Users',
        icon: <UserMultiple size={24} />,
        component: <Users />,
      },
      {
        name: 'Roles',
        icon: <UserRole size={24} />,
        component: <Roles />,
      },
      {
        name: 'Role Assignments',
        icon: <UserEditIcon />,
        component: <RoleAssignments />,
      },
    ],
    []
  );

Rerendering if I put something like this

    <Box
          mt={8}
          key={
            alert.isSuccess
              ? Math.random()
              : null
          }
        >
          {tabs[selectedTabIndex].component}
        </Box>

[igortas]

Do these components call any React Query functions? A reproduction would be really helpful here.

Yes, inside. Every component have different variations of useQuery.
The code started to looks like i'm doing solidjs :/

[louis-young]

Then the should re-render when necessary, despite the lack of props. useQuery consumes a React Context value internally and the state of a hook changing should cause the component that consumes it to re-render.

I can't reason about this much further without a reproduction, unfortunately. Please could you try and put a reproduction together? It'd be really helpful in solving your issue.

[igortas]

@louis-young

This is the the internals from one of the components, nothing much inside there, I expect useFetchRoles to give me the new roles array I've created, and the cache is stuck, gives me stale/old data. I remove stale time too.

export default function useFetchRoles(option: 'site' | 'workspace') {
	const configuration = useGetConfiguration(option);
	const {
		data: roles = [],
		isLoading: isLoadingRoles,
		error: errorRoles,
	} = useQuery<Role[], string>(
		['roles', { configuration }],
		() => fetchRoles(configuration),
		{
			enabled: !!configuration,
		},
	);
	return {
		roles,
		errorRoles,
		isLoadingRoles,
	};
}

export default function Roles() {
// custom hook
  const { roles } = useFetchRoles('workspace');

  return (
    <>
      <Box display='flex' justifyContent='flex-end' mb={3}>
        <CreateRole />
      </Box>

      <UsersRolesTable
        data={roles.map((role) => ({
          role: role.name,
          description: role.description,
        }))}
      />
    </>
  );
}

[louis-young]

I can't reason about this much further without a reproduction, unfortunately. Please could you try and put a reproduction together? It'd be really helpful in solving your issue.

[igortas]

@louis-young I can do later today, but I write because someone to point more what can be wrong, maybe when u have reproduced code will work without problems, but as things gets more nastly I lose the rerendering too often.