Throwing error from `streamedQuery` does not update query's `error`

[aboqasem]

CodeSandbox: https://codesandbox.io/p/sandbox/loving-artem-skh7m5

import { useMemo } from "react";
import {
  queryOptions,
  experimental_streamedQuery as streamedQuery,
  useQuery,
  useQueryClient,
} from "@tanstack/react-query";

type Chunk = { event: "partial" | "final"; data: unknown[] };
type Result = {
  previous?: Chunk;
  current: Chunk;
  final?: Chunk;
};
export function postQueryOptions(data?: unknown) {
  const emptyResult: Result = {
    current: { event: "partial", data: [] },
  };
  return queryOptions({
    queryKey: ["post", data],
    initialData: emptyResult,
    placeholderData: emptyResult,
    queryFn: streamedQuery({
      initialValue: emptyResult,
      streamFn: async function* ({ signal }) {
        // return new Error("Error");
        throw new Error("Error");

        //const stream = await api.post(data, {
        //	fetch: { signal },
        //});
        //if (stream.error) throw stream.error;

        //for await (const chunk of stream.data) yield chunk;
      },
      reducer: (acc: Result, chunk: Chunk) => ({
        previous: acc.current,
        current: chunk,
        final: chunk.event === "final" ? chunk : undefined,
      }),
    }),
    staleTime: Infinity,
  });
}

export default function App() {
  const queryClient = useQueryClient();

  const options = useMemo(() => postQueryOptions(undefined), []);
  const query = useQuery(options);

  return (
    <div>
      <button
        onClick={() => queryClient.refetchQueries(options)}
        disabled={query.isFetching}
      >
        Post
      </button>
      <button
        onClick={() => queryClient.cancelQueries(options)}
        disabled={!query.isFetching}
      >
        Stop
      </button>

      {query.isError && <pre>Error: {query.error.message}</pre>}

      {!query.isError && <pre>{JSON.stringify(query.data, null, 2)}</pre>}
    </div>
  );
}

Originally posted in #9065 (comment)

[jaem0629]

What exactly does

throwing error from queryFn does not update query's error

mean?

After a while, the error appears as Error: Error

I'm guessing, does that mean the error gets updated slowly?

[AyushNigam-1]

I tested the repro and noticed that the error does appear, but only after a delay.

This seems to be due to React Query’s default retry behavior (retry: 3 with backoff). While retries are ongoing, the query remains in a fetching state, so query.error isn’t set yet. After retries complete, the error is reported.

Disabling retries (retry: false) makes the error show up immediately.

Based on this, the observed behavior seems consistent with default retry semantics.

[aboqasem]

Thanks for checking. The repro should be updated to match the comment from the original discussion, which is only for streamedQuery. Updated.

[orisha-prouxel]

I experiment the same problem 👍

[TkDodo]

the issue is a combination of things:

1. you set initialData.
2. you run with refetchMode: 'reset', which resets data to undefined upon refetches
3. an error occurs, it briefly shows up
4. the query is then reset towards initialData because with initialData, we never expect undefined data in the cache.

the problem is likely at step 2. refetchMode: 'reset' needs to respect initialData.