Query Operator -- manage your asynchronous data query

[diamondniam]

Description:
The query operator is a custom RxJS operator designed to simplify managing asynchronous data query states in reactive applications. It transforms a source observable of data into an observable that emits a consistent state object representing the current status of the query: loading, success with data, or error.

What it does:

• Initially emits a loading state ({ isLoading: true, data: null, error: null }).
• Emits the data wrapped in a success state ({ isLoading: false, data, error: null }) when the source emits.
• Emits an error state ({ isLoading: false, data: null, error }) if the source observable errors.

Why it is useful:
Managing loading, success, and error states for asynchronous data streams is a common pattern in frontend and reactive programming. The query operator encapsulates this pattern into a reusable operator, reducing boilerplate and enabling clear, declarative handling of query states in RxJS pipelines.

How it integrates with RxJS:
The operator composes existing RxJS operators (map, catchError, and startWith) into a higher-level abstraction that fits naturally into RxJS’s functional reactive programming model. It returns an observable stream that emits query states, allowing seamless integration into reactive data flows and UI state management.

Future plans:
I am planning to add a complementary cache operator that will provide caching capabilities for query results, further optimizing data fetching workflows by avoiding unnecessary repeated requests.

[diamondniam]

Hello, RxJS community!

I understand that this idea might sit somewhat outside the core philosophy of the library, but observing the status of a pipe is a genuinely useful and common pattern -- especially given that RxJS is primarily used for handling asynchronous operations.

Perhaps it’s worth considering a dedicated tools package -- a space for helpful, yet conceptually auxiliary utilities that don’t strictly align with the core principles of RxJS.

With love 🧡