Angular Http Caching and Race Conditions

I'm trying to figure out how to best solve a race condition in my app in the simplest way possible.

I have a route with two resolvers. The resolvers are:

GetBooksResolver

GetAuthorsResolver

Now, both Authors and Books have a type Genre that needs to be merged in.

Thus in both of the resolvers, you have a forkJoin:

// GetBooksResolver:
forkJoin(this.http.get('api/genres'), this.http.get('api/books'))
    .pipe(map(data => //merge datasets));

//GetAuthorsResolver
forkJoin(this.http.get('api/genres'), this.http.get('api/authors'))
    .pipe(map(data => //merge datasets));

I have a simple HTTP caching service that does correctly prevent the HTTP requests from firing again, but the initial race condition is still there.

As a result, you see two different api/genre calls

Any way to set up a caching interceptor so that this doesn't happen?

from Angular Http Caching and Race Conditions