AsyncGenerator queries and re-exported httpBatchStreamLink result in client errors

[Melleth]

Hi folks!

I really appreciate this library. I've recently been mucking about to convert my side project (which calls OpenAI) to stream the llm provider responses. I encountered an issue in the re-exported helper httpBatchStreamLink here. The only way I could get it to work was through the original httpBatchStreamLink from @trpc/client

Suppose you have a router like this with a generator query:

import { baseProcedure, createTRPCRouter } from "~/server/trpc/init";

export const appRouter = createTRPCRouter({
  testQuery: baseProcedure.query(async function* () {
    for (let i = 0; i < 10; i++) {
      yield new Promise((resolve) => {
        setTimeout(() => {
          resolve(`Hello ${i}`);
        }, 1000);
      });
    }
  })
});

We create a client query helper plugin:

// We need this import! If we use the exported member from "trpc-nuxt/client", types all check out from end to end, but we encounter a runtime error!
import { httpBatchStreamLink } from "@trpc/client";
import { createTRPCNuxtClient } from "trpc-nuxt/client";
import type { AppRouter } from "~/server/trpc/routers";

export default defineNuxtPlugin(() => {
  const trpc = createTRPCNuxtClient<AppRouter>({
    links: [httpBatchStreamLink({ url: "/api/trpc" })],
  });

  return {
    provide: {
      trpc,
    },
  };
});

Client code to integrate with it could look like this:

<template>
  <button onClick="onClick">Button</button>
</template>

<script setup lang="ts">
  const { $trpc } = useNuxtApp();
  const onClick = async () => {
    const stream = await $trpc.testQuery.query();
    
   for await (const response in stream) {
     console.log(response);
   }
  }
</script>

If we use the trpx-nuxt/client provided httpBatchStreamLink instead for the client helper plugin, I get this error:

Uncaught (in promise) TRPCClientError: right-hand side of 'in' should be an object, got undefined
    NuxtJS 61
        _TRPCClientError
        from
        httpBatchStreamLink
        promise callback*httpBatchStreamLink/</</<
        subscribe
        createChain
        subscribe
        startIfNeeded
        share
        subscribe
        promise
        observableToPromise
        requestAsPromise
        query
        proxy
        apply
        createNuxtProxyDecoration
        apply
        onSubmit
        0
        callWithErrorHandling
        callWithAsyncErrorHandling
        emit
        createSetupContext/get emit/<
        onSubmit
        submissionHandler
        promise callback*submissionHandler
        0
        callWithErrorHandling
        callWithAsyncErrorHandling
        invoker
        addEventListener
        patchEvent
        patchProp
        hydrateElement
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateChildren
        hydrateElement
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSubTree
        componentUpdateFn
        run
        setupRenderEffect
        mountComponent
        hydrateNode
        hydrateSuspense
        hydrateNode
        hydrateSubTree
        componentUpdateFn
Caused by: TypeError: right-hand side of 'in' should be an object, got undefined
    NuxtJS 64
TRPCClientError.mjs:62:8

Seems like a bug to me. Or maybe it's not supported? Anyways, as the library exposes this helper, I'd thought I'd mention this fix here in this issue. I'd be happy to help to try and fix this inside the exported library helper, but I'm absolutely clueless on how to approach this to be honest.

Cheers! And many thanks for building this lib!

[wobsoriano]

Hey! Thanks for trying this library out. Yeah the httpBatchStreamLink from trpc-nuxt/client is buggy atm, so good job on using the one from @trpc/client. You can use that for now until I'm able to fix it! ❤