[sitecore-jss] Introduce separate flow for fetching streams

CHANGELOG.md

@@ -16,7 +16,7 @@ Our versioning strategy is as follows:
 ### 🐛 Bug Fixes
 
 * `[sitecore-jss-nextjs]` Fix Chromes editing mode when rendering host URL is internally redirected in XMCloud ([#2019](https://github.com/Sitecore/jss/pull/2019))
-* `[sitecore-jss]` NativeDataFetcher doesn't return stream response ([#2020](https://github.com/Sitecore/jss/pull/2020))
+* `[sitecore-jss]` NativeDataFetcher doesn't return stream response ([#2020](https://github.com/Sitecore/jss/pull/2020)[#2022](https://github.com/Sitecore/jss/pull/2022))
 
 ## 22.4.0
 

packages/create-sitecore-jss/src/templates/nextjs-sxa/src/pages/api/sitemap.ts

@@ -36,7 +36,7 @@ const sitemapApi = async (
 
     try {
       const fetcher = new NativeDataFetcher();
-      const response = await fetcher.fetch<ReadableStream<Uint8Array>>(sitemapUrl);
+      const response = await fetcher.fetchStream<Uint8Array>(sitemapUrl);
 
       const reader = response.data.getReader();
       if (reader) {

packages/sitecore-jss/src/native-fetcher.test.ts

@@ -136,6 +136,24 @@ describe('NativeDataFetcher', () => {
       expect(fetchInit?.body).to.be.undefined;
     });
 
+    it('should execute request with custom response parser', async () => {
+      const fetcher = new NativeDataFetcher();
+
+      spy.on(global, 'fetch', mockFetch(200, {}, { responseType: 'text' }));
+
+      const response = await fetcher.fetch('http://test.com/api', {}, () => 'response override');
+      expect(response.data).to.equal('response override');
+    });
+
+    it('fetchStream should return response.body', async () => {
+      const fetcher = new NativeDataFetcher();
+
+      spy.on(global, 'fetch', mockFetch(200, { body: 'response body' }, { responseType: 'text' }));
+
+      const response = await fetcher.fetchStream('http://test.com/api');
+      expect(response.data).to.equal('response body');
+    });
+
     it('should execute request with stream response type', async () => {
       const fetcher = new NativeDataFetcher();
 
@@ -151,7 +169,7 @@ describe('NativeDataFetcher', () => {
         })
       );
 
-      const response = await fetcher.fetch('http://test.com/api');
+      const response = await fetcher.fetchStream('http://test.com/api');
 
       expect(response.status).to.equal(200);
       expect(response.data instanceof ReadableStream).to.be.true;

packages/sitecore-jss/src/native-fetcher.ts

@@ -49,6 +49,14 @@ export type NativeDataFetcherFunction<T> = (
   data?: RequestInit
 ) => Promise<NativeDataFetcherResponse<T>>;
 
+/**
+ * Type describing oprional response parser for fetch requests
+ */
+export type ResponseParserFunc = (
+  response: Response,
+  debug: (message: string, ...optionalParams: any[]) => void
+) => Promise<unknown> | unknown;
+
 export type NativeDataFetcherConfig = NativeDataFetcherOptions & RequestInit;
 
 export class NativeDataFetcher {
@@ -60,14 +68,19 @@ export class NativeDataFetcher {
    * Implements a data fetcher.
    * @param {string} url The URL to request (may include query string)
    * @param {RequestInit} [options] Optional fetch options
+   * @param {ResponseParserFunc} [responseParser] Optionally specifies custom way to parse fetch response
    * @returns {Promise<NativeDataFetcherResponse<T>>} response
    */
-  async fetch<T>(url: string, options: RequestInit = {}): Promise<NativeDataFetcherResponse<T>> {
+  async fetch<T>(
+    url: string,
+    options: RequestInit = {},
+    responseParser?: ResponseParserFunc
+  ): Promise<NativeDataFetcherResponse<T>> {
     const { debugger: debugOverride, fetch: fetchOverride, ...init } = this.config;
     const startTimestamp = Date.now();
     const fetchImpl = fetchOverride || fetch;
     const debug = debugOverride || debuggers.http;
-
+    responseParser = responseParser || this.parseResponse;
     const requestInit = this.getRequestInit({ ...init, ...options });
 
     const fetchWithOptionalTimeout = [fetchImpl(url, requestInit)];
@@ -88,7 +101,7 @@ export class NativeDataFetcher {
         return res;
       });
 
-      const respData = await this.parseResponse(response, debug);
+      const respData = await responseParser(response, debug);
       if (!response.ok) {
         const error = this.createError(response, respData);
         debug('Response error: %o', error.response);
@@ -111,6 +124,22 @@ export class NativeDataFetcher {
     }
   }
 
+  /**
+   * performs a fetch call with that returns fetch's response.body as a ReadableStream
+   * @param {string} url The URL to request (may include query string)
+   * @param {RequestInit} [options] Optional fetch options
+   * @returns {Promise<NativeDataFetcherResponse<ReadableStream<T>>>} response
+   */
+  async fetchStream<T>(
+    url: string,
+    options: RequestInit = {}
+  ): Promise<NativeDataFetcherResponse<ReadableStream<T>>> {
+    const parseStreamResponse = (response: Response) => {
+      return response.body;
+    };
+    return this.fetch<ReadableStream<T>>(url, options, parseStreamResponse);
+  }
+
   /**
    * Perform a GET request
    * @param {string} url The URL to request (may include query string)
@@ -220,11 +249,6 @@ export class NativeDataFetcher {
       if (contentType.includes('application/json')) {
         return await response.json();
       }
-
-      if (response.body instanceof ReadableStream) {
-        return response.body;
-      }
-
       return await response.text();
     } catch (error) {
       debug('Response parsing error: %o', error);