docs: add example of event iterator to playgrounds

playgrounds/astro/src/components/orpc-stream.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
+import { orpc } from '../lib/orpc'
+import { queryClient } from '../shared/query'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }), queryClient)
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/astro/src/lib/orpc.ts

@@ -9,6 +9,7 @@ const link = new RPCLink({
   url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
   plugins: [
     new BatchLinkPlugin({
+      exclude: ({ path }) => path[0] === 'sse',
       groups: [{
         condition: () => true,
         context: {},

playgrounds/astro/src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import { CreatePlanetMutationForm } from "../components/orpc-mutation";
 import { ListPlanetsQuery } from "../components/orpc-query";
+import { EventIteratorQueries } from "../components/orpc-stream";
 ---
 
 <div>
@@ -12,4 +13,6 @@ import { ListPlanetsQuery } from "../components/orpc-query";
     <CreatePlanetMutationForm client:only />
     <hr />
     <ListPlanetsQuery client:only />
+    <hr />
+    <EventIteratorQueries client:only />
 </div>

playgrounds/browser-extension/entrypoints/popup/App.tsx

@@ -1,5 +1,6 @@
 import { CreatePlanetMutationForm } from './components/orpc-mutation'
 import { ListPlanetsQuery } from './components/orpc-query'
+import { EventIteratorQueries } from './components/orpc-stream'
 
 export default function App() {
   return (
@@ -9,6 +10,8 @@ export default function App() {
       <CreatePlanetMutationForm />
       <hr />
       <ListPlanetsQuery />
+      <hr />
+      <EventIteratorQueries />
     </div>
   )
 }

playgrounds/browser-extension/entrypoints/popup/components/orpc-stream.tsx

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { orpc } from '../lib/orpc'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }))
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/cloudflare-worker/src/App.tsx

@@ -3,6 +3,7 @@ import { CreatePlanetMutationForm } from './components/orpc-mutation'
 import { ListPlanetsQuery } from './components/orpc-query'
 import '@scalar/api-reference-react/style.css'
 import { ApiReferenceReact } from '@scalar/api-reference-react'
+import { EventIteratorQueries } from './components/orpc-stream'
 
 export default function App() {
   if (location.pathname === '/api') {
@@ -31,6 +32,8 @@ export default function App() {
       <ListPlanetsQuery />
       <hr />
       <ChatRoom />
+      <hr />
+      <EventIteratorQueries />
     </main>
   )
 }

playgrounds/cloudflare-worker/src/components/orpc-stream.tsx

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query'
+import { orpc } from '../lib/orpc'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }))
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/cloudflare-worker/src/lib/orpc.ts

@@ -4,6 +4,7 @@ import { DurableIteratorLinkPlugin } from '@orpc/experimental-durable-iterator/c
 import type { RouterClient } from '@orpc/server'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 import type { router } from '../../worker/routers'
+import { BatchLinkPlugin } from '@orpc/client/plugins'
 
 const link = new RPCLink({
   url: `${window.location.origin}/rpc`,
@@ -12,6 +13,13 @@ const link = new RPCLink({
       url: `${window.location.origin}/chat-room`,
       refreshTokenBeforeExpireInSeconds: 10 * 60, // 10 minutes
     }),
+    new BatchLinkPlugin({
+      exclude: ({ path }) => path[0] === 'sse',
+      groups: [{
+        condition: () => true,
+        context: {},
+      }],
+    }),
   ],
 })
 

playgrounds/electron/src/renderer/src/App.tsx

@@ -1,5 +1,6 @@
 import { CreatePlanetMutationForm } from './components/orpc-mutation'
 import { ListPlanetsQuery } from './components/orpc-query'
+import { EventIteratorQueries } from './components/orpc-stream'
 
 function App(): React.JSX.Element {
   return (
@@ -9,6 +10,8 @@ function App(): React.JSX.Element {
       <CreatePlanetMutationForm />
       <hr />
       <ListPlanetsQuery />
+      <hr />
+      <EventIteratorQueries />
     </div>
   )
 }

playgrounds/electron/src/renderer/src/components/orpc-stream.tsx

@@ -0,0 +1,15 @@
+import { orpc } from '@renderer/lib/orpc'
+import { useQuery } from '@tanstack/react-query'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }))
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/next/src/app/orpc-stream.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { orpc } from '@/lib/orpc'
+import { useQuery } from '@tanstack/react-query'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }))
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/next/src/app/page.tsx

@@ -2,6 +2,7 @@ import { redirectToScalarForm } from './actions'
 import { CreatePlanetMutationForm } from './orpc-mutation'
 import { ListPlanetsQuery } from './orpc-query'
 import { OrpcServerAction } from './orpc-server-action'
+import { EventIteratorQueries } from './orpc-stream'
 
 export default function Home() {
   return (
@@ -22,6 +23,8 @@ export default function Home() {
       <CreatePlanetMutationForm />
       <hr />
       <ListPlanetsQuery />
+      <hr />
+      <EventIteratorQueries />
     </div>
   )
 }

playgrounds/next/src/lib/orpc.ts

@@ -18,6 +18,7 @@ const link = new RPCLink({
   url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
   plugins: [
     new BatchLinkPlugin({
+      exclude: ({ path }) => path[0] === 'sse',
       groups: [{
         condition: () => true,
         context: {},

playgrounds/nuxt/app.vue

@@ -10,6 +10,9 @@
     </p>
     <hr>
     <OrpcMutation />
+    <hr>
     <OrpcQuery />
+    <hr>
+    <OrpcStream />
   </div>
 </template>

playgrounds/nuxt/components/orpc-stream.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useQuery } from '@tanstack/vue-query'
+
+const { $orpc } = useNuxtApp()
+
+const query = useQuery($orpc.sse.experimental_streamedOptions({
+  queryFnOptions: { maxChunks: 3 },
+}))
+</script>
+
+<template>
+  <div>
+    <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+    <pre>
+{{ JSON.stringify(query.data.value, null, 2) }}
+    </pre>
+  </div>
+</template>

playgrounds/nuxt/plugins/orpc.client.ts

@@ -3,11 +3,21 @@ import type { router } from '~/server/routers'
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
+import { BatchLinkPlugin } from '@orpc/client/plugins'
 
 export default defineNuxtPlugin(() => {
   const link = new RPCLink({
     url: `${window.location.origin}/rpc`,
     headers: () => ({}),
+    plugins: [
+      new BatchLinkPlugin({
+        exclude: ({ path }) => path[0] === 'sse',
+        groups: [{
+          condition: () => true,
+          context: {},
+        }],
+      }),
+    ],
   })
 
   const client: RouterClient<typeof router> = createORPCClient(link)

playgrounds/nuxt/server/routes/rpc/[...].ts

@@ -1,5 +1,6 @@
 import { onError } from '@orpc/server'
 import { RPCHandler } from '@orpc/server/fetch'
+import { BatchHandlerPlugin } from '@orpc/server/plugins'
 import { router } from '~/server/routers'
 
 const rpcHandler = new RPCHandler(router, {
@@ -8,6 +9,9 @@ const rpcHandler = new RPCHandler(router, {
       console.error(error)
     }),
   ],
+  plugins: [
+    new BatchHandlerPlugin(),
+  ],
 })
 
 export default defineEventHandler(async (event) => {

playgrounds/solid-start/src/lib/orpc.ts

@@ -8,6 +8,7 @@ import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 import { getRequestEvent } from 'solid-js/web'
+import { BatchLinkPlugin } from '@orpc/client/plugins'
 
 declare global {
   var $client: RouterClient<typeof router> | undefined
@@ -16,6 +17,15 @@ declare global {
 const link = new RPCLink({
   url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
   headers: () => getRequestEvent()?.request.headers ?? {},
+  plugins: [
+    new BatchLinkPlugin({
+      exclude: ({ path }) => path[0] === 'sse',
+      groups: [{
+        condition: () => true,
+        context: {},
+      }],
+    }),
+  ],
 })
 
 export const client: RouterClient<typeof router> = globalThis.$client ?? createORPCClient(link)

playgrounds/solid-start/src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { CreatePlanetMutationForm } from './orpc-mutation'
 import { ListPlanetsQuery } from './orpc-query'
+import { EventIteratorQueries } from './orpc-stream'
 
 export default function Home() {
   return (
@@ -16,6 +17,8 @@ export default function Home() {
       <CreatePlanetMutationForm />
       <hr />
       <ListPlanetsQuery />
+      <hr />
+      <EventIteratorQueries />
     </main>
   )
 }

playgrounds/solid-start/src/routes/orpc-stream.tsx

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/solid-query'
+import { orpc } from '~/lib/orpc'
+
+export function EventIteratorQueries() {
+  const streamed = useQuery(
+    () => orpc.sse.experimental_streamedOptions({ queryFnOptions: { maxChunks: 3 } }),
+  )
+
+  return (
+    <div>
+      <h2>oRPC and Tanstack Query | Event Iterator example</h2>
+      <pre>
+        {JSON.stringify(streamed.data, null, 2)}
+      </pre>
+    </div>
+  )
+}

playgrounds/solid-start/src/routes/rpc/[...rest].ts

@@ -3,13 +3,17 @@ import { RPCHandler } from '@orpc/server/fetch'
 import { router } from '~/routers'
 import { onError } from '@orpc/server'
 import '~/polyfill'
+import { BatchHandlerPlugin } from '@orpc/server/plugins'
 
 const handler = new RPCHandler(router, {
   interceptors: [
     onError((error) => {
       console.error(error)
     }),
   ],
+  plugins: [
+    new BatchHandlerPlugin(),
+  ],
 })
 
 async function handle({ request }: APIEvent) {

playgrounds/svelte-kit/src/lib/orpc.ts

@@ -2,13 +2,23 @@ import type { RouterClient } from '@orpc/server'
 import type { router } from '../routers'
 import { createORPCClient } from '@orpc/client'
 import { RPCLink } from '@orpc/client/fetch'
+import { BatchLinkPlugin } from '@orpc/client/plugins'
 import { createTanstackQueryUtils } from '@orpc/tanstack-query'
 
 const rpcLink = new RPCLink({
   url: `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000'}/rpc`,
   headers: () => ({
     Authorization: 'Bearer default-token',
   }),
+  plugins: [
+    new BatchLinkPlugin({
+      exclude: ({ path }) => path[0] === 'sse',
+      groups: [{
+        condition: () => true,
+        context: {},
+      }],
+    }),
+  ],
 })
 
 export const client: RouterClient<typeof router> = createORPCClient(rpcLink)

playgrounds/svelte-kit/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
   import OrpcMutation from './orpc-mutation.svelte';
   import OrpcQuery from './orpc-query.svelte';
+  import OrpcStream from './orpc-stream.svelte';
 
   const queryClient = new QueryClient();
 </script>
@@ -20,5 +21,7 @@
     <OrpcMutation />
     <hr />
     <OrpcQuery />
+    <hr />
+    <OrpcStream />
   </div>
 </QueryClientProvider>