I am trying to send an array of loader function to my route it throws an error Handler is not a funtion in a reactJs application

Question

This is my app .js which has a route

async function landingPageContentLoader() {
  const url = AppConstants.landingPageDataAPI;
  const response = await DataService.get(url,AppConstants.emptyString,AppConstants.emptyString)
  return response;   
}
async function skillsLoader() {
  const url = AppConstants.exploreSkillsGetAPI;
  const response = await DataService.get(url,AppConstants.emptyString,AppConstants.emptyString);
  console.log(response);
  return response;   
}
const router = createBrowserRouter([
  
  {
    path: AppConstants.skills,
    element:<SkillsPage/>,
    loader: [landingPageContentLoader,skillsLoader]
  },

Inside my Page I am fetching data through useLoaderData

export const SkillsPage = ()=>{

  const {landingPageContentLoader,skillsLoader} = useLoaderData();
}

this is the error I receive

Answer 1

Route loaders are functions, not arrays. If you need to call two loader functions then I think you could create a third loader function that invokes both and collects and returns their response data.

Example:

async function landingPageContentLoader() {
  const url = AppConstants.landingPageDataAPI;
  const response = await DataService.get(
    url,
    AppConstants.emptyString,
    AppConstants.emptyString
  );

  return response;   
}

async function skillsLoader() {
  const url = AppConstants.exploreSkillsGetAPI;
  const response = await DataService.get(
    url,
    AppConstants.emptyString,
    AppConstants.emptyString
  );

  return response;   
};

const skillsPageLoader = async () => {
  return Promise.all([landingPageContentLoader(), skillsLoader()]);
};

const router = createBrowserRouter([
  
  {
    path: AppConstants.skills,
    element: <SkillsPage/>,
    loader: skillsPageLoader,
  },
]);

export const SkillsPage = () => {
  const [landingPageContentLoader, skillsLoader] = useLoaderData();

  ...
}