Home > Software design >  tRPC throws an error in setData (useContext wrapper of TanStack Query) after I updated it from v10-r
tRPC throws an error in setData (useContext wrapper of TanStack Query) after I updated it from v10-r

Time:12-06

Before:
  ├── @tanstack/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]
After:
  ├── @tanstack/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]
  ├── @trpc/[email protected]

Here's the code throwing an error after I updated tRPC.

import { useStore } from 'src/store/store'
import { trpc } from 'src/utils/trpc'

export const useMutateItem = () => {
  const utils = trpc.useContext()
  const reset = useStore((state) => state.resetEditedItem)

  const createItemMutation = trpc.item.createItem.useMutation({
    onSuccess(input) {
      const previousItems = utils.item.getAllItems.getData()
      if (previousItems) {
        utils.item.getAllItems.setData([...previousItems, input]) // Error message below
      }
      reset()
    }
  })
  // ...
  return { createItemMutation, ... }
}
(method) setData(input: void | undefined, updater: Updater<(Item & {
    tags: Tag[];
})[] | undefined, (Item & {
    tags: Tag[];
})[] | undefined>, options?: SetDataOptions | undefined): void
@link — https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata

Expected 2-3 arguments, but got 1.ts(2554)
utilsProxy.d.ts(46, 45): An argument for 'updater' was not provided.

To clarify the method;

setData(input: void | undefined, updater: Updater<...>, options?: SetDataOptions | undefined): void

I guess the problem is that the 'input' argument has to be either void or undefined. How can I solve this? What's the difference between 'queryKey' on TanStack Query Documentation and 'input' in tRPC wrapper? There was a bug report on GitHub but maybe unrelated.

CodePudding user response:

Try this

utils.item.getAllItems.setData((() => {})(), [...previousItems, input])

CodePudding user response:

Naman kinda solved the problem. Is it a bad work-around?

//eslint-disable-next-line @typescript-eslint/no-empty-function
utils.item.getAllItems.setData((() => {})(), [...previousItems, input])
  • Related