Repository: trpc/trpc
File: packages/react-query/src/shared/hooks/createHooksInternal.tsx (TypeScript)

Code before:

              const result = await client.query(
                ...getClientArgs(queryKey, actualOpts),
              );

              if (isAsyncIterable(result)) {
                const queryHash = hashKey(queryKey);

                const queryCache = queryClient.getQueryCache();

                const query = queryCache.build(queryClient, {
                  queryKey,
                  queryHash,
                });

                query.setState({
                  data: [],
                  status: 'pending',
                });

                const aggregate: unknown[] = [];
                for await (const value of result) {
                  aggregate.push(value);

                  query.setState({
                    data: [...aggregate],
                  });
                }
                return aggregate;
              }
              return result;
            },
      },
      queryClient,
    ) as UseTRPCQueryResult<unknown, TError>;

    hook.trpc = useHookResult({
      path,
    });

    return hook;
  }

  function useSuspenseQuery(
    path: string[],
    input: unknown,
    opts?: UseTRPCSuspenseQueryOptions<unknown, unknown, TError>,
  ): UseTRPCSuspenseQueryResult<unknown, TError> {
    const context = useContext();
    const queryKey = getQueryKeyInternal(path, input, 'query');


Review comment (suggestion):
Maybe we shouldn't mutate the state once it's be handed over to tanstack/query
```suggestion
                let aggregate: unknown[] = [];
                for await (const value of result) {
                  aggregate = [...aggregate, value];

                  query.setState({
                    data: aggregate,
                  });
                }
                return aggregate;
```

Code after:

              const result = await client.query(
                ...getClientArgs(queryKey, actualOpts),
              );

              if (isAsyncIterable(result)) {
                const queryCache = queryClient.getQueryCache();

                const query = queryCache.build(queryFunctionContext.queryKey, {
                  queryKey,
                });

                query.setState({
                  data: [],
                  status: 'success',
                });

                const aggregate: unknown[] = [];
                for await (const value of result) {
                  aggregate.push(value);

                  query.setState({
                    data: [...aggregate],
                  });
                }
                return aggregate;
              }
              return result;
            },
      },
      queryClient,
    ) as UseTRPCQueryResult<unknown, TError>;

    hook.trpc = useHookResult({
      path,
    });

    return hook;
  }

  function useSuspenseQuery(
    path: string[],
    input: unknown,
    opts?: UseTRPCSuspenseQueryOptions<unknown, unknown, TError>,
  ): UseTRPCSuspenseQueryResult<unknown, TError> {
    const context = useContext();
    const queryKey = getQueryKeyInternal(path, input, 'query');

    const shouldAbortOnUnmount =
      opts?.trpc?.abortOnUnmount ??
      config?.abortOnUnmount ??