[apiFetch] Fix preloading middleware referencing stale data

packages/api-fetch/src/middlewares/preloading.js

@@ -46,15 +46,20 @@ function createPreloadingMiddleware( preloadedData ) {
 			const path = getStablePath( options.path );
 
 			if ( 'GET' === method && cache[ path ] ) {
+				const cacheData = cache[ path ];
+
+				// Unsetting the cache key ensures that the data is only preloaded a single time
+				delete cache[ path ];
+
 				return Promise.resolve(
 					parse
-						? cache[ path ].body
+						? cacheData.body
 						: new window.Response(
-								JSON.stringify( cache[ path ].body ),
+								JSON.stringify( cacheData.body ),
 								{
 									status: 200,
 									statusText: 'OK',
-									headers: cache[ path ].headers,
+									headers: cacheData.headers,
 								}
 						  )
 				);

packages/api-fetch/src/middlewares/test/preloading.js

@@ -27,26 +27,82 @@ describe( 'Preloading Middleware', () => {
 		} );
 	} );
 
-	it( 'should return the preloaded data if provided', () => {
-		const body = {
-			status: 'this is the preloaded response',
-		};
-		const preloadedData = {
-			'wp/v2/posts': {
-				body,
-			},
-		};
-		const preloadingMiddleware = createPreloadingMiddleware(
-			preloadedData
-		);
-		const requestOptions = {
-			method: 'GET',
-			path: 'wp/v2/posts',
-		};
+	describe( 'given preloaded data', () => {
+		describe( 'when data is requested from a preloaded endpoint', () => {
+			describe( 'and it is requested for the first time', () => {
+				it( 'should return the preloaded data', () => {
+					const body = {
+						status: 'this is the preloaded response',
+					};
+					const preloadedData = {
+						'wp/v2/posts': {
+							body,
+						},
+					};
+					const preloadingMiddleware = createPreloadingMiddleware(
+						preloadedData
+					);
+					const requestOptions = {
+						method: 'GET',
+						path: 'wp/v2/posts',
+					};
+
+					const response = preloadingMiddleware( requestOptions );
+					return response.then( ( value ) => {
+						expect( value ).toEqual( body );
+					} );
+				} );
+			} );
+
+			describe( 'and it has already been requested', () => {
+				it( 'should not return the preloaded data', () => {
+					const body = {
+						status: 'this is the preloaded response',
+					};
+					const preloadedData = {
+						'wp/v2/posts': {
+							body,
+						},
+					};
+					const preloadingMiddleware = createPreloadingMiddleware(
+						preloadedData
+					);
+					const requestOptions = {
+						method: 'GET',
+						path: 'wp/v2/posts',
+					};
+					const nextSpy = jest.fn();
 
-		const response = preloadingMiddleware( requestOptions );
-		return response.then( ( value ) => {
-			expect( value ).toEqual( body );
+					preloadingMiddleware( requestOptions, nextSpy );
+					expect( nextSpy ).not.toHaveBeenCalled();
+					preloadingMiddleware( requestOptions, nextSpy );
+					expect( nextSpy ).toHaveBeenCalled();
+				} );
+			} );
+		} );
+
+		describe( 'when the requested data is not from a preloaded endpoint', () => {
+			it( 'should not return preloaded data', () => {
+				const body = {
+					status: 'this is the preloaded response',
+				};
+				const preloadedData = {
+					'wp/v2/posts': {
+						body,
+					},
+				};
+				const preloadingMiddleware = createPreloadingMiddleware(
+					preloadedData
+				);
+				const requestOptions = {
+					method: 'GET',
+					path: 'wp/v2/fake_resource',
+				};
+				const nextSpy = jest.fn();
+
+				preloadingMiddleware( requestOptions, nextSpy );
+				expect( nextSpy ).toHaveBeenCalled();
+			} );
 		} );
 	} );