Overwrite the type of the query in setQueryData() function defined in the backend

[lightbluepoppy]

Hello. I have a question about types of query.

Here is the code that mutates the backend data using Prisma and the frontend cache/query using tRPC that wraps Tastack Query fuctions.

The below code creates a task by calling the tRPC api that handles Prisma database connection. You send a title to the backend server and then it processes the data to creates a task. In the onSuccess option, you get the newTask with a Task type, but in the onMutate option, its type is newTask: { data: Prisma.TaskCreateInput | Prisma.TaskUncheckedCreateInput; }.

How can I add another type to the query other than the one defined in schema.prisma file so that I can optimistically update the list of the tasks by adding a placeholder automatically, and invalidate it when the mutation succeeded?

  const ctx = api.useContext() // is equivalent to `const ctx = useQueryClient()`

  const createTaskMutation = api.task.create.useMutation({
    onMutate: newTask => {
      ctx.task.getAll.setData(undefined, previousTasks => { // Type '(Task | { data: TaskCreateInput | TaskUncheckedCreateInput; })[]' is not assignable to type 'Task[]'.
        if (previousTasks === undefined) return [newTask]
        return [...previousTasks, newTask]
      })
    },
    onSuccess: async newTask => {
        await ctx.task.get.invalidate({ where: { id: newTask.id } })
      })
    },
  })

I asked the same question in the discussion on trpc repo. trpc/trpc#4429
If you think it's not related to tanstack-query itself, please leave a comment over there.