lukemorales/query-key-factory

Vue ref is unwrapped in queryKey - Vue: No overload matches this call.

egonm12 opened this issue · 1 comments

egonm12 commented

When a ref is passed as a query key in combination with this package it throws a typescript error on useQuery:

Vue: No overload matches this call.
Overload 1 of 3,
(options: UndefinedInitialQueryOptions<string, Error, string, readonly ["value", "someQuery", string, Ref<string, string>]>, queryClient?: QueryClient | undefined): UseQueryReturnType<...>
, gave the following error.
Overload 2 of 3,
(options: DefinedInitialQueryOptions<string, Error, string, readonly ["value", "someQuery", string, Ref<string, string>]>, queryClient?: QueryClient | undefined): UseQueryDefinedReturnType<...>
, gave the following error.
Overload 3 of 3, '(options: UseQueryOptions<string, Error, string, string, readonly ["value", "someQuery", string, Ref<string, string>]>, queryClient?: QueryClient | undefined): UseQueryReturnType<...>', gave the following error.

This happens because the type of Ref is Ref<string> but it gets transformed to string under the hood causing the type mismatch. When I directly pass the args to useQuery it doesn't cause any problems. Same for when the ref is passed to queryKeys as ref.value it works fine.

import {
    createQueryKeys,
    mergeQueryKeys,
} from "@lukemorales/query-key-factory";
import {unref, type Ref, toValue,} from "vue";

export const valueQueries = createQueryKeys("value", {
    someQuery: (val: Ref<string>) => {
        return {
            queryKey: ["byTool", val],
            queryFn: async () => `My value is ${unref(val)}`,
        };
    },
    someOtherQuery: (val: Ref<string>) => {
        return {
            queryKey: ["byTool", toValue(val)] as const,
            queryFn: async () => `My value is ${unref(val)}`,
        };
    },
});

export const queries = mergeQueryKeys(valueQueries);
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
import {useQuery} from "@tanstack/vue-query";
import {queries} from "@/queries";
import {ref, unref} from "vue";

const val = ref('')

// works fine
const appQuery = useQuery({
  queryKey: ["byTool", val],
  queryFn: async () => `My value is ${unref(val)}`,
});

// error!
const someQuery = useQuery(queries.value.someQuery(val))

// works fine
const someOtherQuery = useQuery(queries.value.someOtherQuery(val))
</script>

Example repository: https://github.com/egonm12/vue-query-key-factory