Best practice for subscribing to dynamic DataSource

[bmayen]

In a React app, I'm using useObservable to subscribe to foosDataSource.data$(). A simple example of this is:

const [foosData] = useObservable(foosDataSource.data$());
...
<div>
  Foos loading?: {foosData.loading}
</div>

This works well when my service does something like

...pipe(
    tap(setFoos),
    foosDataSource.trackRequestStatus(),
  )

and repository does

store.update(
    setEntities(foos),
    foosDataSource.setSuccess(),
);

However, I would also like to be able to track the status of request that use a key like .trackRequestStatus({key: foo.id}). In this case, I'm not sure what the best practice would be given that the key also needs to be passed to the data$() function like const [fooData] = useObservable(foosDataSource.data$({key: someId}));. This would work for subscribing to an individual item's data, but I need to be able to track an unknown amount of items.

Given the following:

export const fooDataSource = createRequestDataSource({
  store,
  data$: (key: number) => store.pipe(selectEntity(key)),
  dataKey: 'foo',
});

is there a mechanism or best practice to subscribe to this data source for all possible keys that could be passed in to .data$?

In other words, I would like to be able to update individual entities for this dynamic data source, but to have a single subscription that tells me when any of them are loading.

I know I can also use selectRequestStatus to do:

const foosStatus$ = store.pipe(selectRequestStatus('foo'));
...
const [foosStatus] = useObservable(foosStatus$);

But I'm faced with the same problem here. If I update individual entities in the store, I'm not clear on how I could have a single subscription to show those status changes.

[NetanelBasal]

but I need to be able to track an unknown amount of items

What do you mean? Can you please provide a minimal stackblitz example of what you're trying to do?

[dzena]

I guess he means something like that?

export const fooDataSource = createRequestDataSource({
  store,
  data$: (keys: number[]) => store.pipe(selectMany(keys)),
  dataKey: 'foo',
});

But this is not possible, right?