It would be nice to have a handler for streaming data

[AlexFrazer]

Say (for the sake of this example) you're building a chatbot like chat.openai.com and want to use react-query to handle the data side of it. I started by creating a mutation for sending a message

Here's the catch: when sending a message, I will receive back a stream of data, not an individual atomic response. I can somewhat handle it as follows:

function useSendMessageMutation(id: string) {
  const client = useQueryClient();

  return useMutation({
    mutationKey: ['chat', id, 'message'],
    async mutationFn(variables) {
      // we receive a response here, which returns a `Response` (not json)
      const response = await fetch(`/api/chat/${id}/message`, {
        method: 'POST',
        body: JSON.stringify(variables),
      });

      const temp = {
        id: v4(),
        content: '',
      } satisfies Message;

      for await (const chunk of stream(response)) {
        optimisticUpsert(client, ['chat', id, 'messages'], (msg) => {
          ...temp,
          content: msg.content + chunk,
        })
      }
    }
  });
}

Now this works fine enough. However, I noticed some downstream effects as a result of this. This mutation will be fairly long running and I need to do a lot to manage that

This also brings up a use case where mutations should be cancelable

Ultimately, I think it would make sense to possibly have another handler or addition to the api for this

[useEffects]

+1

[useEffects]

I think we can already do this without a separate handler, thanks to this brilliant video https://www.youtube.com/watch?v=_j5TnNyKIw4

the idea is to pass the reader from mutateFn to onSuccess directly and read the chunks from onSuccess instead of mutateFn

[TkDodo]

I looked at the code but at this point, useMutation gives you nothing. data, isLoading, etc are handled by manual state. So instead of calling mutate, you could just call whatever the mutationFn does manually.