POC an idea for better data fetching, processing and error handling on the page route level

[jroebu14]

Is your feature request related to a problem? Please describe. An idea was discussed to change the way we fetch and process data and handle errors at the page route level. We should discuss and POC this idea and decide if it's something worth doing.

Describe the solution you'd like Based on a discussion in this PR: here https://github.com/bbc/simorgh/pull/6852#issuecomment-645999426 and here https://github.com/bbc/simorgh/pull/6852#issuecomment-653067157

A proposed implementation might look like

The implementation might look like

const getInitialData = async (urls, mapPageDataToProps) => {
  try {
    const pageData = await Promise.all(fetch(urls));

    return mapPageDataToProps(...pageData);
  } catch ({ message, status }) {
    return { error: message, status };
  }
};

const pageData = await getInitialData(
  ['url-1', 'url-2'],
  (pageData1, pageData2) => ({
    id: pageData1.id,
    mostReadItems: pageData2.mostRead,
  }),
);

we should create a POC with 1 or 2 routes using this idea.

Not all routes have to use this implementation if they have very custom data fetching and processing needs.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Testing notes [Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

• [ ] This feature is expected to need manual testing.

Additional context Add any other context or screenshots about the feature request here.

[andrewscfc]

Might be nice to discuss this again, most of the data fetching/error handling is centralised in fetchPageData to my mind. What more does having a standardised getInitialData give us?