useMutationState is not reactive (react)

[CapitaineToinon]

Hey,

I'm creating an app that uses mutations that could be running for a very long time (like shutting down a VM, could take a few seconds/minutes). Therefore I let the mutation run in the background and just show a success to toast to the user as soon as the mutation starts. I then want to create a UI in my app where the user can see all the pending mutations, as well as a list of past successful/failed mutations.

Instead of implementing my own tasks system, I thought I'd just use the mutation cache to show the data the user. I use the meta attribute on mutations to decides which mutations should be logged to the user or not.

	const mutations = useMutationState({
		filters: {
			predicate: (mutation) => mutation.meta?.log === true,
		},
		select: (mutation) => {
			return mutation
		},
	})

With this, I can get all the mutations just fine. However, when I then try to display the status using tanstack table:

               {
			header: 'Status',
			accessorFn: (mutation) => mutation.state.status,
			cell: ({ row }) => {
				const status = row.original.state.status

				return (
					<Badge
						className="inline-block first-letter:uppercase"
						variant={
							status === 'error'
								? 'destructive'
								: status === 'success'
									? 'success'
									: 'outline'
						}
					>
						{status}
					</Badge>
				)
			},
		}

Once I'm on the logs page, apparently useMutationState is not observing the state of the mutations as the component will not update once the mutation is finished.

I am aware I can call useMutationState again on each table cell by filtering using mutationId and indexing to the first element of the returned array, but it's kind of annoying having to do that, and I also have to force typescript to get the correct types.

Is there a better way of doing what I'm trying to achieve?

Thanks in advance for the help.

[TkDodo]

sounds more like a tanstack/table issue to me. I don’t know when it re-runs cell.

we basically do the same thing with the mutation tab in the devtools and it shows everything just fine ...