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);
                },
              })
            )
          })
        )
      ),
    }
  }))