T
TanStack•2y ago
eastern-cyan

Has anyone got @lukemorales/query-key-factory to work with vue-query?

I tried using @lukemorales/query-key-factory but I can't really get it to work with reactive data. I'm not sure if i'm missing something or if it just doesn't support reactivity. 
const test = createQueryKeys('test', {
  acceptsStatic: (someValue: number) => ({
    queryKey: [someValue],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsMaybeRef: (someRef: MaybeRef<number>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsRef: (someRef: Ref<number>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsUndefinedMaybeRef: (someRef: MaybeRef<number | undefined>) => ({ // Not valid because can't use undefined in a queryKey
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }), 
  acceptsUndefinedRef: (someRef: Ref<number | undefined>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),  
})

useQuery(test.acceptsStatic(1)) // Works fine
const myRef = ref(1)
useQuery(test.acceptsMaybeRef(myRef)) // Works fine?
useQuery(test.acceptsRef(myRef)) // No overload matches this call
const myUndefinedRef = ref<number | undefined>(undefined)
useQuery(test.acceptsUndefinedRef(myUndefinedRef)) // No overload matches this call
const test = createQueryKeys('test', {
  acceptsStatic: (someValue: number) => ({
    queryKey: [someValue],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsMaybeRef: (someRef: MaybeRef<number>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsRef: (someRef: Ref<number>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),
  acceptsUndefinedMaybeRef: (someRef: MaybeRef<number | undefined>) => ({ // Not valid because can't use undefined in a queryKey
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }), 
  acceptsUndefinedRef: (someRef: Ref<number | undefined>) => ({
    queryKey: [someRef],
    queryFn: () => Promise.resolve('yes'),
  }),  
})

useQuery(test.acceptsStatic(1)) // Works fine
const myRef = ref(1)
useQuery(test.acceptsMaybeRef(myRef)) // Works fine?
useQuery(test.acceptsRef(myRef)) // No overload matches this call
const myUndefinedRef = ref<number | undefined>(undefined)
useQuery(test.acceptsUndefinedRef(myUndefinedRef)) // No overload matches this call
I have noticed that regardless of what I do the library seems to return the InvalidSchema$1 type. See the below resolved type after copy-pasting the example from https://www.npmjs.com/package/@lukemorales/query-key-factory#fine-grained-declaration-colocated-by-features 
(alias) createQueryKeys<"users", {
    all: null;
    detail: (userId: string) => {
        queryKey: [string];
        queryFn: () => Promise<string>;
    };
}>(queryDef: "users", schema: InvalidSchema$1<{  // I don't know what InvalidSchema$1 is supposed to indicate
    all: null;
    detail: (userId: string) => {
        queryKey: [string];
        queryFn: () => Promise<...>;
    };
}>): QueryKeyFactoryResult<...> (+1 overload)
(alias) createQueryKeys<"users", {
    all: null;
    detail: (userId: string) => {
        queryKey: [string];
        queryFn: () => Promise<string>;
    };
}>(queryDef: "users", schema: InvalidSchema$1<{  // I don't know what InvalidSchema$1 is supposed to indicate
    all: null;
    detail: (userId: string) => {
        queryKey: [string];
        queryFn: () => Promise<...>;
    };
}>): QueryKeyFactoryResult<...> (+1 overload)
npm
@lukemorales/query-key-factory
A library for creating standardized query keys, useful for cache management in @tanstack/query. Latest version: 1.3.2, last published: 5 months ago. Start using @lukemorales/query-key-factory in your project by running npm i @lukemorales/query-key-factory. There are 10 other projects in the npm registry using @lukemorales/query-key-factory.
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?