Pass own params in Rest Layout Service using Custom Data Fetcher

Question

I was wondering if there's anyway to override the payload in the Rest Layout Service using my own custom params. I'm upgrading the Frontend JSS, so I need to make sure the there's no other API Changes / Sitecore Changes needed.

This is what I currently have when I try to do an Http Request in the Rest Layout Service

<BASE_URL>forms/sitecore/api/layout/render/jss?item=<SITECORE_PATH>&sc_apikey=<API_KEY>&sc_site=<SITE>&sc_lang=<LANGUAGE>&tracking=<TRACKING>

and I want this to be over written into:

<BASE_URL>forms/sitecore/api/layout/render/jss?item=<SITECORE_PATH>&subscription-key=<SUBSCRIPTION-KEY>&sc_lang=<LANGUAGE>&tracking=<TRACKING>

I'm trying to follow this guide from the sitecore docs, but it doesn't seem to add the key that I want to be added.

Code:

RouteHandler:

      const key = {};
      let fetchOptions = {};

      ....
    
      if (process.env.SUBS_KEY) {
        key['subscription-key'] = process.env.SUBS_KEY;
      }

      fetchOptions = {
        ...key,
        sc_lang: 'en',
      };

      const apiUrl = config.sitecoreApiHost;

      layoutServiceInstance
        .fetchLayoutData(sitecoreRoutePath, language, apiUrl, fetchOptions)
        .then((routeData) => {
          if (routeData!== null && routeData.sitecore.route) {
            // Update the JSS store instance with the fetched data.
            // This will signal the RouteHandler to update/re-render, as well as any components
            // that are referencing the JSS store instance in their `data` object.
            this.$jss.store.setSitecoreData(routeData);
            this.notFound = false;
          } else {
            // this.$jss.store.setSitecoreData(routeData);
            this.notFound = true;
          }
          this.loading = false;
        });

Layout Service Factory:

import config from '../temp/config';
import axios from 'axios';
import { RestLayoutService } from '@sitecore-jss/sitecore-jss-vue';
import {
  AxiosDataFetcher,
} from '@sitecore-jss/sitecore-jss';
function dataFetcher(url, data) {
  return new AxiosDataFetcher().fetch(url, data);
}

export class LayoutServiceFactory {
  create() {
    return new RestLayoutService({
      apiHost: config.sitecoreApiHost,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
      tracking: false, // if you wish to disable tracking
      // provide your custom data fetcher to the service instance
      dataFetcherResolver: () => dataFetcher,
    });
  }
}

export const layoutServiceFactory = new LayoutServiceFactory();

Answer 1

You can pass a configuration object to the AxiosDataFetcher instance and modify your request.

Based on the AxiosDataFetcher source code, you can pass options to the AxiosDataFetcher instance.

When providing options for the AxiosDataFetcher, you essentially configure Axios request and/or response interceptors.

To modify your request before sending it, you can use Axios request config options.

So the code might change as follows (untested):

import { AxiosResponse } from 'axios';
import { 
  AxiosDataFetcher,
  RestLayoutService,
  LayoutServiceData
} from '@sitecore-jss/sitecore-jss';
import config from './config';
// define your custom data fetcher
function dataFetcher(url: string, data?: unknown): Promise<AxiosResponse<LayoutServiceData>> {
  return new AxiosDataFetcher({
    onReq: () => {
      // Do something before request is sent and/or modify the default config
      const myCustomURl = config.url + "&key=value"
      const config = {
        // customize request method, headers, cookies, etc. See Axios request options.
        url: myCustomUrl
      }
      // return the new configuration for Axios request interceptors
      return config
    }, 
    onReqError: () => {
      // request error handling
      return Promise.reject(error);
    }, 
    onRes:() => {
      // Any 2xx status code triggers this 
      // Do something with response data then return the modified response
      return response;
    }, 
    onResError:() => {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      return Promise.reject(error);
    }, // response error handling
    debugger?: Debugger; // here you can configure a custom [JSS debugger](https://github.com/Sitecore/jss/blob/7dd7fa91f4133348169fed390c5bee1b1ddabd07/packages/sitecore-jss/src/debug.ts)
  }).fetch(url, data);
}

export const layoutService = new RestLayoutService({
  apiHost: config.sitecoreApiHost,
  apiKey: config.sitecoreApiKey,
  siteName: config.jssAppName,
  tracking: false, // if you wish to disable tracking
  // provide your custom data fetcher to the service instance
  dataFetcherResolver: () => dataFetcher
});

I hope this gets you on the right track.