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>
  }
}

[TkDodo]

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

[lkp-k]

is it possible to add meta when doing something like this? i'm using v5

queryClient.setQueryData(userQueryKey, result, { meta: { source: "remote" }})

[TkDodo]

nope

[lkp-k]

ah ok. ty.

is there a suggested way to note the source? in my case i have a RN app where we load from cache first, and if we're online we'll make the network call. Besides storing { source: DataSource; data: unknown } or something to that effect, is there a more "react-query way" of doing this? thank you

[TkDodo]

make it part of your data

[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