Setting and Observing Firefly Semantics Slice Entity Store Queries | Task

Ole Ersoy
Apr - 12  -  2 min

Scenario

We have a search field in our application and we need a central place to store the query in the search field and the ability to react to updates to it.

Here is a YouTube demo.

Approach

Use the query property on a Firefly Semantics Slice Entity Store instance.

const searchStore: EStore<any> = new EStore<any>();
searchStore.query = 'javascript';
searchStore.observeQuery().subscribe((q) => console.log(q));

Heads Up

If you are going to be using the entity store search property observable in your application, it's usually a good idea to initialize it to something, even just something blank.

The reason for this is that if the observeQuery() observable is used with something like combineLatest from RxJS where we combine multiple observables, the combineLatest call will not fire until the query property is initialized with something.

So for example if we did this:

const searchStore: EStore<any> = new EStore<any>();
const query$:Observable<string> = searchStore.observeQuery()
const result$ = combineLatest([query$, todos$])...

The result$ will not emit anything until we set searchStore.query to a value.

Demo