Chain two stores' rxMethods

[cunisia]

Hello everyone,

Sorry if the question was already asked, I really searched but did not find any answer.

Let say I have a signal store FooStore to handle model Foo, and another signal store BarStore to handle model Bar.

• FooStore exposes a method createFoo (wrapped in rxMethod) that, using an httpService, makes an http call, and pipe this call to patching the state to add the newly created foo in FooStore.
• BarStore exposes a method linkBarToFoo (wrapped in rxMethod) that, using an httpService, makes an http call, and pipe this call to patching the state to add the id of foo in bar's attribute called fooId

Now I would like to create a third method called createFooAndLinkItToBar within BarStore. My issue is that since createFoo is wrapped into a rxMethod, I cannot pipe it to linkBarToFoo. I thought about exposing two versions of createFoo (one wrapped into rxMethod, and the other not wrapped), but it seems off. Do you have a better idea ?

type Foo = {...}
type FooState = { fooById: Record<string, Foo> };

const initialStateFoo: FooState = { fooById: {} };

export const FooStore = signalStore(
  withState(initialStateFoo),
  withComputed(/* ... */),
  withMethods((store, fooHttpService = inject(FooHttpService)) => ({
    createFoo: rxMethod<Omit<Foo, "id">>(
      pipe(
        debounceTime(300),
        distinctUntilChanged(),
        tap(() => patchState(store, { isLoading: true })),
        switchMap((query) => {
          return fooHttpService.createFoo(query).pipe(
            tapResponse({
              next: (foo) => patchState(store, state => ({fooById: {...state.fooById, [foo.id]: foo}})),
              error: (err) => {
                patchState(store, { isLoading: false });
                console.error(err);
              },
            })
          );
        })
      )
    ),
  })))

type Bar = {id: string, fooId: string | undefined, ...}
type BarState = { barById: Record<string, Bar> };

const initialStateBar: BarState = { barById: {} };

export const BarStore = signalStore(
  withState(initialStateBar),
  withComputed(/* ... */),
  withMethods((store, barHttpService = inject(BarHttpService), fooStore = inject(FooStore)) => {
    const linkBarToFoo = rxMethod<{fooId: string, barId: string}>(
      pipe(
        debounceTime(300),
        distinctUntilChanged(),
        tap(() => patchState(store, { isLoading: true })),
        switchMap((query) => {
          return barHttpService.linkBarToFoo(query).pipe(
            tapResponse({
              next: () => (patchState(store, state => {
                const bar = state.barById[query.barId]
                return {
                  barById: {
                    ...state.barById, 
                    [query.barId]: {...bar, fooId: query.fooId}
                  }
                }
              })),
              error: (err) => {
                patchState(store, { isLoading: false });
                console.error(err);
              },
            })
          );
        })
      )
    )
    return {
      linkBarToFoo,
      createFooAndLinkItToBar: rxMethod<{foo: Omit<Foo, "id">, barId: string}>(
        pipe(
          debounceTime(300),
          distinctUntilChanged(),
          tap(() => patchState(store, { isLoading: true })),
          switchMap((query) => {
            return fooStore.createFoo(query.foo).pipe( // This will throw because rxMethod are not chainable
              tapResponse({
                next: (foo) => linkBarToFoo({fooId: foo.id, barId: query.barId}),
                error: (err) => {
                  patchState(store, { isLoading: false });
                  console.error(err);
                },
              })
            )
          })
        )
      ),
    }
  }))

[ayomideesam]

Exposing two versions isn't off. That split is what makes this composable. rxMethod is an entry point: it subscribes for you and hands nothing back. So give each store an Observable-returning method that does the work, and wrap it in rxMethod only where you need fire-and-forget (templates, signal inputs):

export const FooStore = signalStore(
  { providedIn: 'root' },
  withState({ fooById: {} as Record<string, Foo>, isLoading: false }),
  withMethods((store, http = inject(FooHttpService)) => {
    // Composable: returns the created Foo and updates this store on the way through.
    const createFoo$ = (foo: Omit<Foo, 'id'>): Observable<Foo> =>
      http.createFoo(foo).pipe(
        tap((created) =>
          patchState(store, (s) => ({ fooById: { ...s.fooById, [created.id]: created } })),
        ),
      );

    return {
      createFoo$,
      // Fire-and-forget entry point.
      createFoo: rxMethod<Omit<Foo, 'id'>>(
        pipe(concatMap((foo) => createFoo$(foo).pipe(catchError(() => EMPTY)))),
      ),
    };
  }),
);

export const BarStore = signalStore(
  { providedIn: 'root' },
  withState({ barById: {} as Record<string, Bar> }),
  withMethods((store, http = inject(BarHttpService), fooStore = inject(FooStore)) => {
    const linkBarToFoo$ = (q: { fooId: string; barId: string }) =>
      http.linkBarToFoo(q).pipe(
        tap(() =>
          patchState(store, (s) => ({
            barById: { ...s.barById, [q.barId]: { ...s.barById[q.barId], fooId: q.fooId } },
          })),
        ),
      );

    return {
      linkBarToFoo$,
      createFooAndLinkItToBar: rxMethod<{ foo: Omit<Foo, 'id'>; barId: string }>(
        pipe(
          concatMap(({ foo, barId }) =>
            fooStore.createFoo$(foo).pipe(
              switchMap((created) => linkBarToFoo$({ fooId: created.id, barId })),
              catchError(() => EMPTY),
            ),
          ),
        ),
      ),
    };
  }),
);

Each store still owns its own state updates. BarStore just composes the two units of work.

Two things in the original pipelines I'd change for writes:

• switchMap on a create. A new call cancels the in-flight one. The client stops listening, but the server may still create the Foo, so your state drifts from the backend. For mutations use concatMap (queue them) or exhaustMap (ignore while one is running).
• debounceTime + distinctUntilChanged. These suit search-as-you-type. On a create they can swallow a legitimate second call. distinctUntilChanged also compares object references, so it rarely deduplicates what you expect.