passive-yellow

[v5 - TypeScript]: ensure meta object type

Hi, just updated to v5 - great 🙂 Is there a way to use typescript to make sure that when I define meta on one of my queries it always matches the same structure? I want to make sure that I don't typo or something in a usecase like this

meta: {
      errorTitle: t('error.title'),
      errorBody: t('error.body'),
    },

meta: {
      errorTitle: t('error.title'),
      errorBody: t('error.body'),
    },

vs.

meta: {
      errorTilte: t('error.title'), // <-- typo
      errorBody: t('error.body'),
    },

meta: {
      errorTilte: t('error.title'), // <-- typo
      errorBody: t('error.body'),
    },

10 Replies

eastern-cyan•3y ago

yes, you can do the same like with error as shown here:

eastern-cyan•3y ago

https://tanstack.com/query/v5/docs/react/typescript#registering-a-global-error

TypeScript | TanStack Query Docs

React Query is now written in TypeScript to make sure the library and your projects are type-safe! Things to keep in mind:

eastern-cyan•3y ago

declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: MyMeta,
    mutationMeta: MyMeta
  }
}

declare module '@tanstack/react-query' {
  interface Register {
    queryMeta: MyMeta,
    mutationMeta: MyMeta
  }
}

docs are missing :/ maybe you can add it?

passive-yellowOP•3y ago

You are a hero! Nice solution. Works like a charm. Will try to find the time to update the docs 🙂 This seems to break some other type though. Will try to reproduce it tomorrow

passive-yellowOP•3y ago

But maybe you already know a solution in the meantime onSuccess of mutations and some other places (e.g. select) break

eastern-cyan•3y ago

Will try to find the time to update the docs

thank you

onSuccess of mutations and some other places (e.g. select) break

ah, it shouldn't break 😅 . I'd appreciate a reproduction

passive-yellowOP•3y ago

Created a PR about the docs update. Will check again tomorrow on the type issue when I get back to work. Will keep you posted

passive-yellowOP•3y ago

Morning just created a codesandbox - same issue unfortunately. https://codesandbox.io/p/sandbox/stoic-greider-m5dvq7 The data and variables on the onSuccess are infered as any after adding the global Meta type. (not sure if it shows the red underline to you when in read-only mode of this. it doesn't for me in incognito-tab when I checked if the share link works at all)

stoic-greider-m5dvq7

eastern-cyan•3y ago

hmm seems to work fine in a typescript playground: https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCyyYEMbAQB2cAvnAGZQQhwDkAAnkangMYDWA9FOrmzAC0AR2TooATzoBYAFByAJujYAbXLzggIC5CvRwARE1wt23XvyGjxEg4jlw4wIjHEV++gEroA5sFbi9rKOjtaSmOh4AFxBISHi1FAxrFDOPnAAPnAAFNkAlHAAvAB8cClpeQDcDiGk1cEhIDj4hEQR0bFxcAnQyTCpROlZuQBu6sC4AEZ6qDHIRBxEEADuRAUlZf0V9XF1NaRyB-LHjmzErJoS2HgExEUoGNctxNkINY5NN60AYkQxuKgJEQ2DkiOhlgAFCCsGJIAgwPR9AY+SpwSbaCRItJkdalN4NOJcLhwBQQMo0fQAQQhAEk4GxcCoVHJ3iFeDBkFASPiuiF4Yi4GDIdCYAA6fnoAA0rLi6IUmMF4KhrFFcok0oJXWAChiBigJlJIEEyGQ2oMGt5e01pAtjUiuFhMu6UESMToFAgEDovNZNtZxAAysg2Gx0KhZjkFPhcJK4GNUlMZrjOoTiby4AA9AD8MrOLAgelFKggPmyUbwsfjE2mYaqMqJ6cbmZz1ttpCqQA

TS Playground - An online editor for exploring TypeScript and JavaS...

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

passive-yellowOP•3y ago

hmmmm 🤔 Alright thanks for verifying - will need to check what's different for my app

Gaming

Programming

[v5 - TypeScript]: ensure meta object type

Did you find this page helpful?