How to properly type useQuery's meta?

[denisborovikov]

The meta type is inferred as Record<string, unknown>. Is there a way to type useQuery so the meta type is correctly inferred?

useQuery({ queryFn: ({ meta }) =>  ... }) // meta = Record<string, unknown>

We can cast the type like this

interface Meta {
  id: string
}
...
const queryFn = ({ meta }) => {
  const { id } = meta as unknown as Meta
}

but is there something better than this?

[TkDodo]

we don't have a generic for meta so its type cannot be inferred. In v5, you can use module augmentation:

declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: Meta
    mutationMeta: Record<string, unknown>
  }
}

[joel-daros]

Is there a way to do the same in V4?

[charliematters]

When I do this, all the types for react query imports break. I'm not well versed with module augmentation, but do you have any idea what I'm missing? The errors look like this: Module '"@tanstack/react-query"' has no exported member 'QueryClient'.'

[bencergazda]

When I do this, all the types for react query imports break.

The types should get fixed if you add an import or an export in the module declaration file.

declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: Meta
    mutationMeta: Record<string, unknown>
  }
}

export {};

[alexandre1921]

Is there a way to do the same in V5?

[TkDodo]

amending the Register interface is the way in v5: https://tanstack.com/query/v5/docs/framework/react/typescript#registering-global-meta

[stevebeauge]

we don't have a generic for meta

Is there any chance to add such generic (meaning directly in the lib, not relying on module augmentation)?

[TkDodo]

not planned, no