How to make sequential requests

[Londeren]

It seems, my question is a bit connected to #104.

I have some queries in a service:

export class SomeService {
  private readonly useQuery = inject(UseQuery);

  private readonly hotelService = inject(HotelApiService);

  public getHotel(id: number): {...roomIds: number[]} {
    return this.useQuery(['hotels', id], () => this.hotelService.getHotelById({ id }));
  }

  public getRoom(id: number) {
    return this.useQuery(['rooms', id], () => this.hotelService.getRoomById({ id }));
  }
}

It's needed to fetch hotel first (getHotel) and then get some room by id that I got from getHotel response.

❓ How to make these dependent queries for rooms (getRoom) properly?

Of course, I can do something like this:

public getRoomsInHotel(hotelId: number) {
    return this.useQuery(['hotelRooms', hotelId], () =>
      this.hotelService
        .getHotelById(hotelId)
        .pipe(
          switchMap((hotel) =>
            forkJoin(
              hotel.roomsIds.map((roomId) => this.hotelService.getRoomById(roomId)),
            ).pipe(
              map(
                (roomsResults) => ({hotel, rooms: roomsResults})
              ),
            ),
          ),
        ),
    );
  }

but I would like to store these 2 requests separately because I use them in different places separately. Also, I'd like to have cached values by their separate keys as well.

It also would be cool to track loaders as two separate isLoading things (one for hotel and another for room(s)).

Any help is highly appreciated.

[stevebrowndotco]

I find that this is an area that can get really complicated, really quickly. I think that rxjs, with all its power, can cause us to write more complex solutions that necessary.

I have situations like yours all over my project and my personal approach is that I recognise my flow is fairly sequential so I have areas where I convert the subscriptions into promises. For example, in my user service:

  getUser() {
    return this.useQuery(['sessionUser'], () =>
      this.auth.getAuthUser().pipe(
        filter(isUserUidDefined),
        switchMap((auth) => this.fsCalls.getUser(auth.data.uid as string))
      )
    ).result$;
  }

  getUserAsync(): Promise<User | undefined> {
    return this.firstSuccess(this.getUser());
  }

Where firstSuccess is a wrapper for a function that uses firstValueFrom in rxjs.

And the usage for me is like so:

const user = await this.getUserService.getUserAsync();
// do another query

I get that this pattern might not be for everyone but it allows me to write really clean and working solutions in situations like yours where queries have dependencies on others

[sourav-bhar]

If you have the ability to update your backend api, you could create a new endpoint that takes a hotelId as an input and returns all rooms for that hotel. This way, you can cache the hotel and all rooms for the hotel in separate keys and track the loading, error, success states separately.

You would, of course, still not get a separate query key for each hotel. For that, you might want to define a separate query for the hotel room by the roomId (similar to your getRoom method), and set the initial data for that query from the cache by using the initialData parameter of the query, similar to what's shown here: https://tanstack.com/query/latest/docs/react/guides/initial-query-data#initial-data-from-cache

The one challenge I see with this approach is that you now have the same Room entity stored in two locations against two query keys. So, when you mutate a Room entity, you will need to invalidate all the queries where the room data is stored. Going by the official tanstack query docs, I think that this is an expected pattern.

export class SomeService {
  private readonly query = injectQuery();
  private readonly queryClient = injectQueryClient();

  private readonly hotelService = inject(HotelApiService);

  public getHotel(id: number): {...roomIds: number[]} {
    return this.query({queryKey: ['hotels', id], queryFn: () => this.hotelService.getHotelById({ id }) });
  }

  public getRoomsForHotel(hotelId: number) {
    return this.query({ queryKey: ['roomsForHotel', hotelId], queryFn: () => this.hotelService.getRoomsForHotel({ hotelId }) });
  }
  
  public getRoom(roomId: number, hotelId?: number) {
      return this.query(
         queryKey: ['rooms', roomId], 
         queryFn: () => this.hotelService.getRoomById({ id: roomId }),
         initialData: () => {
             if(!hotelId) return undefined;
             
             // Use a room from the '['roomsForHotel', hotelId]' query as the initial data for this query
             return this.queryClient.getQueryData(['roomsForHotel', hotelId])?.find((room) => room.id === roomId)
          },
      );
  }
}