fix(http): Use string body to generate transfer cache key. (#54379)

This is particularly usefull for GraphQL queries where the string body might be the only discriminator.

Fixes #54377

PR Close #54379

packages/common/http/src/transfer_cache.ts

@@ -197,13 +197,14 @@ function getFilteredHeaders(
 
 function makeCacheKey(request: HttpRequest<any>): StateKey<TransferHttpResponse> {
   // make the params encoded same as a url so it's easy to identify
-  const {params, method, responseType, url} = request;
+  const {params, method, responseType, url, body} = request;
   const encodedParams = params
     .keys()
     .sort()
     .map((k) => `${k}=${params.getAll(k)}`)
     .join('&');
-  const key = method + '.' + responseType + '.' + url + '?' + encodedParams;
+  const strBody = typeof body === 'string' ? body : '';
+  const key = [method, responseType, url, strBody, encodedParams].join('|');
 
   const hash = generateHash(key);
 

packages/common/http/test/transfer_cache_spec.ts

@@ -98,8 +98,8 @@ describe('TransferCache', () => {
 
     it('should store HTTP calls in cache when application is not stable', () => {
       makeRequestAndExpectOne('/test', 'foo');
-      const key = makeStateKey('432906284');
       const transferState = TestBed.inject(TransferState);
+      const key = makeStateKey(Object.keys((transferState as any).store)[0]);
       expect(transferState.get(key, null)).toEqual(jasmine.objectContaining({[BODY]: 'foo'}));
     });
 
@@ -115,15 +115,15 @@ describe('TransferCache', () => {
 
       const transferState = TestBed.inject(TransferState);
       expect(JSON.parse(transferState.toJson()) as Record<string, unknown>).toEqual({
-        '3706062792': {
+        '2400571479': {
           [BODY]: 'foo',
           [HEADERS]: {},
           [STATUS]: 200,
           [STATUS_TEXT]: 'OK',
           [URL]: '/test-1',
           [RESPONSE_TYPE]: 'json',
         },
-        '3706062823': {
+        '2400572440': {
           [BODY]: 'buzz',
           [HEADERS]: {},
           [STATUS]: 200,