lukemorales / query-key-factory

A library for creating typesafe standardized query keys, useful for cache management in @tanstack/query

Home Page:https://www.npmjs.com/package/@lukemorales/query-key-factory

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Property '_ctx' does not exist on type 'Omit<QueryOptionsStruct<readonly

0llirocks opened this issue · comments

query-key-factory: 1.3.4
react-query: 5.22.2

export const companyQueries = createQueryKeys('companies', {
  detail: (companyId: string | number) => ({
    queryKey: [companyId.toString()],
    queryFn: () => fetchCompany(companyId),
    contextQueries: {
      contactPersons: () => ({
        queryKey: null,
        queryFn: () => fetchContactPersonsByCompany(companyId),
      }),
    }
  }),
})

export const queries = mergeQueryKeys(companyQueries);
useQuery({
    ...queries.companies.detail(companyId)._ctx.contactPersons,
  }

Error Property '_ctx' does not exist on type 'Omit<QueryOptionsStruct<readonly comes up and it doesn't work, when executing the query, react-query says As of v4, queryKey needs to be an Array. If you are using a string like 'repoData', please change it to an Array, e.g. ['repoData']

Any idea what I am missing?

@0llirocks the dynamic query syntax contactPersons: () => ({}) expects an argument to be used with queryKey. if your query does not require any dynamic values for your request, use a simple object syntax and the types will be correctly inferred with _ctx:

export const companyQueries = createQueryKeys('companies', {
  detail: (companyId: string | number) => ({
    queryKey: [companyId.toString()],
    queryFn: () => fetchCompany(companyId),
    contextQueries: {
      contactPersons: {
        queryKey: null,
        queryFn: () => fetchContactPersonsByCompany(companyId),
      },
    }
  }),
})