Examples: add Tanstack Start SSE

[MrNiceRicee]

Hello there!

This PR adds an example for SSE to Tanstack Start. Used EventEmitter on the server side and added @microsoft/fetch-event-source to help with making event listening on the client side easier.

The PR in essence is an extended version of the counter-example w/ react query and sse

side note: unsure if my approach of combining the event listener with useQuery good strategy, but it worked well enough. It's inspired by Tkdodo's websocket article

Would love to get some feedback if ya'll have capacity/time!

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit cdad546. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/** --exclude=e2e/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-basic-virtual-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-basic-virtual-inside-file-based
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• tanstack-router-search-validator-adapters
• tanstack-router-react-example-scroll-restoration
• tanstack-start-example-basic
• tanstack-start-example-basic-auth
• tanstack-start-example-basic-counter
• tanstack-router-example-react-start-basic-counter
• tanstack-start-example-basic-react-query
• tanstack-start-example-basic-rsc
• tanstack-start-example-clerk-basic
• tanstack-start-example-convex-trellaux
• tanstack-start-example-supabase-basic
• tanstack-router-react-example-with-framer-motion
• tanstack-start-example-trellaux
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

@tanstack/eslint-plugin-router

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2356

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2356

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2356

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2356

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2356

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2356

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2356

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2356

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2356

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2356

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2356

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2356

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2356

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2356

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2356

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2356

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2356

commit: cdad546

[jadejr]

@microsoft/fetch-event-source was last updated 3 years ago. I ended up just going with extended-eventsource myself.

[schiller-manuel]

@jadejr can you create an example based on that?

[jadejr]

Not until I at least have time to play with tanstack start in the first place. It's just a project I'm following. I'm not sure what I think of it just yet.