Invalidate queries by key from global onError handler

[alisasila]

Hey, I have some custom errors in my app that I know that if I throw them (from certain logic in my select functions that I pass to some queries), certain other queries need to be invalidated.

I've added a global onError handler to my queryClient, but can't seem to figure out how to invalidate queries by key from inside it:

export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError(error, query) {
      if (error instanceof CustomError) {
        // Invalidate certain keys based on the error type
      }
    },
  }),
})

I can't call queryClient.invalidateQueries(...) since I'm "currently" defining it, and query.invalidate() invalidates the query that got the error (but I want to invalidate other queries too).

Would appreciate the help.

[TkDodo]

I can't call queryClient.invalidateQueries(...) since I'm "currently" defining it

you can. if typescript complains, just do:

export const queryClient: QueryClient = new QueryClient(...)

[TkDodo]

you read the docs wrong. they say:

The query will ignore query client invalidateQueries and refetchQueries calls that would normally result in the query refetching.

the only way to bypass enabled: false is with refetch returned from useQuery. That is on purpose. A disabled query is disabled because not all of its dependencies are available, like for example an empty search string:

const [search, setSearch] = React.useState<string | undefined>()

const { data } = useQuery({
  queryKey: ['todos', search],
  queryFn: fetchTodos(search),
  enabled: Boolean(search),
})

It would be quite bad if this query would run because of a global invalidation or refetch.

[TkDodo]

you’re thinking, and writing, pretty imperatively. I think you want:

const autoLoginQuery = useQuery({
  queryKey: [keyNames.autoLoginKey],
  queryFn: doAutoLogin,
  retry: 1,
});

const cpeQuery = useQuery({
  queryKey: [keyNames.cpeKey],
  queryFn: getCpe,
  enabled: autoLoginQuery.isSuccess && !autoLoginQuery.isFetching,
});

this will trigger cpeQuery automatically if autoLoginQuery goes into success state. No useEffect needed.

autoLoginQuery will result in an error. When that happens, we want to trigger otherQuery

same thing really:

const otherQuery = useQuery({
  queryKey: [keyNames.otherKey],
  queryFn: getOtherData,
  enabled: autoLoginQuery.isError, // will run when autoLogin failed
});