Within my gridsome.server.js, the code snippet I have is as follows:
api.createManagedPages(async ({ createPage }) => {
const { data } = await axios.get('https://members-api.parliament.uk/api/Location/Constituency/Search?skip=0&take=20')
data.items.forEach(item => {
console.log(item.value.id);
if (item.value.currentRepresentation !== null && typeof item.value.currentRepresentation === 'object') {
createPage({
path: `/constituency/${item.value.id}`,
component: './src/templates/Constituency.vue',
context: {
id: item.value.id,
name: item.value.name,
startDate: item.value.startDate,
mpId: item.value.currentRepresentation.member.value.id,
mpName: item.value.currentRepresentation.member.value.nameDisplayAs,
mpParty: item.value.currentRepresentation.member.value.latestParty.name,
thumbnail: item.value.currentRepresentation.member.value.thumbnailUrl
}
})
}
})
})
Regardless of whether I switch between using createPages or createManagedPages, I consistently encounter 404 not found errors when attempting to access /constituency/3292, for example.
Prior to this issue, upon running gridsome serve, something must have been updated as now I am faced with the following error message:
TypeError: app.pages.data is not a function
at createRoutes (/home/josh/Code/find-your-mp/node_modules/gridsome/lib/serve.js:57:34)
at module.exports (/home/josh/Code/find-your-mp/node_modules/gridsome/lib/serve.js:29:18)
Somewhere along the line - although I can successfully console.log() the incoming data and view it, the process of generating pages or routes for said pages fails, resulting in the aforementioned error.