Vue useQuery type issue

[callumacrae]

This might be a bug, or might be an issue with my code - I'm not really sure.

I'm trying to wrap my useQuery calls with my own composables, but I'm struggling with the types:

type User = any;
export function useUser(
  userId: MaybeRefOrGetter<number>,
  options?: UseQueryOptions<User, AxiosError, User, readonly [string, number]>,
) {
  return useQuery({
    queryKey: ['user', toRef(userId)],
    async queryFn({ queryKey }) {
      const res = await fetch(`/api/user/${queryKey[1]}`);
      return res.json();
    },
    ...options,
  } satisfies typeof options);
}

This gives me this error from toRef(userId):

error TS2322: Type 'Ref<number> | Readonly<Ref<number>>' is not assignable to type 'number'.
  Type 'Ref<number>' is not assignable to type 'number'.

However, changing the TQueryKey arg to readonly [string, Ref<number>] results in the queryKey having the incorrect type when passed to the queryFn.

Am I doing something wrong or are the library's types incorrect?

---

Side note, the reason I'm doing this is so that I can hide all the useMutation cache invalidation logic and stuff like that in the composable file, but at the point of consumption still be able to specify my own refetch interval, callback functions etc with the correct types. This is a minimal example and doesn't make as much sense as my actual usage does!

[Mini-ghost]

The type error in your code might stem from a type deficiency within vue-query. If I modify it as follows, allowing your queryFn to receive a readonly [string, number] type for queryKey, would this be acceptable to you?

If it is, I'm willing to attempt to fix this issue.

type User = any;
export function useUser(
  userId: MaybeRefOrGetter<number>,
  options?: UseQueryOptions<User, AxiosError, User, readonly [string, MaybeRef<number>]>,
) {
  return useQuery({
    queryKey: ['user', toRef(userId)],
    async queryFn({ queryKey }) {
      const res = await fetch(`/api/user/${queryKey[1]}`);
      return res.json();
    },
    ...options,
  });
}

[callumacrae]

Following your code example where MaybeRef<number> is passed in as TQueryKey, that works for this example, but not when calling an API function that expects a number - which, unfortunately, the codebase I'm working on does:

const fetchUser = (userId: number) => fetch(`/api/user/${userId}`).then((res) => res.json());

type User = any;
export function useUser(
  userId: MaybeRefOrGetter<number>,
  options?: UseQueryOptions<User, AxiosError, User, readonly [string, MaybeRef<number>]>,
) {
  return useQuery({
    queryKey: ['user', toRef(userId)],
    queryFn({ queryKey }) {
      return fetchUser(queryKey[1]);
    },
    ...options,
  } satisfies typeof options);
}

Argument of type 'MaybeRef<number>' is not assignable to parameter of type 'number'.
  Type 'Ref<number>' is not assignable to type 'number'.

We can work around this by wrapping queryKey[1] with toValue(), but imo it would be best if queryKey had the unwrapped ref types as this is what tanstack is actually providing to the queryFn.

[Mini-ghost]

Should be fixed in https://github.com/TanStack/query/releases/tag/v4.34.4

[callumacrae]

amazing, thank you!

[callumacrae]

Just found this in the types: https://github.com/TanStack/query/blob/main/packages/vue-query/src/types.ts#L49

So it looks like as a workaround, this does work:

const fetchUser = (userId: number) => fetch(`/api/user/${userId}`).then((res) => res.json());

type User = any;
export function useUser(
  userId: MaybeRefOrGetter<number>,
  options?: UseQueryOptions<User, AxiosError, User, readonly [string, number]>,
) {
  return useQuery({
    queryKey: computed(() => ['user', toValue(userId)]),
    queryFn({ queryKey }) {
      return fetchUser(queryKey[1]);
    },
    ...options,
  } satisfies typeof options);
}

[DamianOsipiuk]

Correct. This was pointed out in another discussion recently.
Currently queryKey in queryFn context will be unwrapped properly only if a whole queryKey is a ref.
We would need to fix it by recursive unref there on type level (we already do it with the value itself).