frail-apricot

streamEvents example

Hello guys! I was trying to follow the example from here: https://tanstack.com/start/latest/docs/framework/react/server-functions

import { createServerFn } from '@tanstack/react-start'

export const streamEvents = createServerFn({
  method: 'GET',
  response: 'raw',
}).handler(async ({ signal }) => {
  // Create a ReadableStream to send chunks of data
  const stream = new ReadableStream({
    async start(controller) {
      // Send initial response immediately
      controller.enqueue(new TextEncoder().encode('Connection established\n'))

      let count = 0
      const interval = setInterval(() => {
        // Check if the client disconnected
        if (signal.aborted) {
          clearInterval(interval)
          controller.close()
          return
        }

        // Send a data chunk
        controller.enqueue(
          new TextEncoder().encode(
            `Event ${++count}: ${new Date().toISOString()}\n`,
          ),
        )

        // End after 10 events
        if (count >= 10) {
          clearInterval(interval)
          controller.close()
        }
      }, 1000)

      // Ensure we clean up if the request is aborted
      signal.addEventListener('abort', () => {
        clearInterval(interval)
        controller.close()
      })
    },
  })

  // Return a streaming response
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    },
  })
})

import { createServerFn } from '@tanstack/react-start'

export const streamEvents = createServerFn({
  method: 'GET',
  response: 'raw',
}).handler(async ({ signal }) => {
  // Create a ReadableStream to send chunks of data
  const stream = new ReadableStream({
    async start(controller) {
      // Send initial response immediately
      controller.enqueue(new TextEncoder().encode('Connection established\n'))

      let count = 0
      const interval = setInterval(() => {
        // Check if the client disconnected
        if (signal.aborted) {
          clearInterval(interval)
          controller.close()
          return
        }

        // Send a data chunk
        controller.enqueue(
          new TextEncoder().encode(
            `Event ${++count}: ${new Date().toISOString()}\n`,
          ),
        )

        // End after 10 events
        if (count >= 10) {
          clearInterval(interval)
          controller.close()
        }
      }, 1000)

      // Ensure we clean up if the request is aborted
      signal.addEventListener('abort', () => {
        clearInterval(interval)
        controller.close()
      })
    },
  })

  // Return a streaming response
  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      Connection: 'keep-alive',
    },
  })
})

Server Functions | TanStack Start React Docs

What are Server Functions? Server functions allow you to specify logic that can be invoked almost anywhere (even the client), but run only on the server. In fact, they are not so different from an API...

6 Replies

frail-apricotOP•2mo ago

But when i call the Function i get:

{
  "$error": {
    "message": "\"[object Object]\" is not valid JSON",
    "stack": "SyntaxError: \"[object Object]\" is not valid JSON\n    at JSON.parse (\u003Canonymous\u003E)\n    at Object.parse (/Users/watermelontech/mihai-dev/mihai/food-app/node_modules/.pnpm/@tanstack+start-client-core@1.121.2/node_modules/@tanstack/start-client-core/src/serializer.ts:17:10)\n    at eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:113:47)\n    at eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:135:56)\n    at result (/food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:233:5)\n    at async eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:141:20)\n    at async startRequestResolver (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:125:24)\n    at async /food-app/node_modules/.pnpm/@tanstack+start-plugin-core@1.121.2_@tanstack+react-router@1.121.2_react-dom@19.1.0_rea_7fafd4856bcb7d5ca6151ab9ca71145f/node_modules/@tanstack/start-plugin-core/dist/esm/dev-server-plugin/plugin.js:47:30",
    "cause": {
      "$undefined": 0
    }
  }
}

{
  "$error": {
    "message": "\"[object Object]\" is not valid JSON",
    "stack": "SyntaxError: \"[object Object]\" is not valid JSON\n    at JSON.parse (\u003Canonymous\u003E)\n    at Object.parse (/Users/watermelontech/mihai-dev/mihai/food-app/node_modules/.pnpm/@tanstack+start-client-core@1.121.2/node_modules/@tanstack/start-client-core/src/serializer.ts:17:10)\n    at eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:113:47)\n    at eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:135:56)\n    at result (/food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/server-functions-handler.ts:233:5)\n    at async eval (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:141:20)\n    at async startRequestResolver (food-app/node_modules/.pnpm/@tanstack+start-server-core@1.121.2/node_modules/@tanstack/start-server-core/src/createStartHandler.ts:125:24)\n    at async /food-app/node_modules/.pnpm/@tanstack+start-plugin-core@1.121.2_@tanstack+react-router@1.121.2_react-dom@19.1.0_rea_7fafd4856bcb7d5ca6151ab9ca71145f/node_modules/@tanstack/start-plugin-core/dist/esm/dev-server-plugin/plugin.js:47:30",
    "cause": {
      "$undefined": 0
    }
  }
}

Is it some setting i need to enable? I have the default files from create-tsrouter-app

genetic-orange•2mo ago

might be a bug can you please create a github issue and link a complete example repository?

frail-apricotOP•2mo ago

Sure! Will do Yea, I think even if I put response: raw, it still tries to parse it like it would be “data” Ok, sorry! I was using it in a wrong way. It seems to work without getting that error But one thing that is still missing is the fact that I cannot stop the request. It seems signal.aborted is never changed.

frail-apricotOP•2mo ago

I think there is an open issue for it: https://github.com/TanStack/router/issues/3490 Even if, at that time, it worked for get requests

GitHub

Server Fn Signal and API route (request.signal) does not actually f...

Which project does this relate to? Start Describe the bug When canceling a server function or fetch to API Route, either by abortController.abort() or by refreshing / closing the tab to disconnect....

genetic-orange•2mo ago

is this in dev, prod or both? please can you add your insights (version, etc) in that github issue?

frail-apricotOP•2mo ago

Sure. Will do! Done. Thank you!

Gaming

Programming

streamEvents example

Did you find this page helpful?