tRPC throws an error in setData (useContext wrapper of TanStack Query) after I updated it from v10-rc to v10

Question

Before:
  ├── @tanstack/react-query@4.14.6
  ├── @trpc/client@10.0.0-rc.4
  ├── @trpc/next@10.0.0-rc.4
  ├── @trpc/react-query@10.0.0-rc.4
  ├── @trpc/server@10.0.0-rc.4
After:
  ├── @tanstack/react-query@4.14.6
  ├── @trpc/client@10.4.3
  ├── @trpc/next@10.4.3
  ├── @trpc/react-query@10.4.3
  ├── @trpc/server@10.4.3

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.

score 2 · Answer 1 · answered Mar 31 '23 at 08:55

The first argument to .setData needs to match the query that you're setting data for - so in this case you've got a query .getData() which is equivalent to .getData(undefined), so if you want to set data for that query you need to do:

utils.item.getAllItems.setData(undefined, [...previousItems, input])

IMHO, I'd recommend against using an empty query - internally, tRPC and TanStack query will treat {} and undefined as different queries with different caches that can be invalidated separately (presumably because of how the query keys are generated by the tRPC thin-wrapper). It seems like asking for trouble to have two different ways to query the same thing.

Naman Dwivedi · Answer 2 · 2023-02-04T12:32:37.630

0

Just enter the first argument as an IIFE returning void

Like this

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

edited Feb 04 '23 at 12:32

answered Dec 05 '22 at 09:45

Naman Dwivedi

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 08 '22 at 02:16
Answer unclear but it works. – MadaShindeInai Feb 04 '23 at 11:16

tRPC throws an error in setData (useContext wrapper of TanStack Query) after I updated it from v10-rc to v10

2 Answers2