spotiarr-sse

Stream server-sent events for playlist, download, library, and feed updates.

41|6|Updated Nov 27, 2025
One-click install
npx skills add https://github.com/mralexsaavedra/spotiarr --skill spotiarr-sse
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spotiarr-sse
Source: https://github.com/mralexsaavedra/spotiarr/tree/main/skills/spotiarr-sse
Command: npx skills add https://github.com/mralexsaavedra/spotiarr --skill spotiarr-sse

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of keeping the frontend in sync with backend changes by streaming real-time events instead of relying on manual refreshes.

Core Features & Use Cases

  • Real-time UI updates via SSE: Uses a single EventSource connection through useServerEvents to receive server-sent events and update the application state indirectly.
  • Query-driven consistency with TanStack Query: Reacts to incoming event names by invalidating specific query keys rather than writing to local stores.
  • Typed, contract-based event propagation: Defines clear event contracts (playlists, download history, library stats, feed/release updates) and routes backend emission through a dedicated app event bus.

Quick Start

Use the spotiarr-sse Skill to add real-time playlist, download, library, and feed updates by wiring a new SSE event end-to-end using the defined bus and frontend query invalidation pattern.

Frequently Asked Questions about spotiarr-sse

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I sync frontend UI with backend data changes using server-sent events?▼

To sync frontend UI with backend data changes using server-sent events, you establish a single EventSource connection to stream updates and invalidate specific TanStack Query caches per event type instead of relying on manual refreshes.

How does TanStack Query cache invalidation work with real-time SSE updates?▼

TanStack Query cache invalidation with real-time SSE updates works by reacting to incoming event names from the EventSource stream and invalidating specific query keys rather than writing directly to local stores.

How do I add a new real-time SSE event end-to-end in a React application?▼

To add a new real-time SSE event end-to-end, you wire the backend emission through a dedicated app event bus with typed payloads and trigger frontend query invalidation using the established useServerEvents pattern.

Do I need a single EventSource connection for multiple real-time feed updates?▼

Yes, you need a single EventSource connection for multiple real-time feed updates to enforce connection constraints and prevent resource leaks, managing all playlist, library, and download events through one stream.

Why should I use an event bus for backend SSE event emission instead of direct emission?▼

You should use an event bus for backend SSE event emission instead of direct emission to ensure typed, contract-based event propagation and maintain consistent routing for playlist, download history, and feed updates.

What are the limitations of using TanStack Query invalidation for real-time updates?▼

A limitation of using TanStack Query invalidation for real-time updates is that it relies on indirect state updates through cache refetching rather than directly writing to local stores, which may cause brief loading states.