Having trouble accessing individual project pages from my project list. Keep encountering a 404 error page instead.
I've attempted to retrieve the data using both simple Fetch and ApolloClient, but the bug persists.
Error messages like 'could not load scripts from page [].js' pop up occasionally.
This is the directory structure of the pages
https://i.sstatic.net/6LvNk.png
Here is my code snippet for the getStaticProps and getStaticPaths functions:
export async function getStaticProps({ params }) {
const { projectId } = params
const result = await fetch(
`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql`,
{
method: 'POST',
headers: {
// Authorization: `Bearer`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: `
query GetProject($path: String!) {
nodeArticles(where: {path: $path},limit: 1) {
nodes {
title
body {
value:processed
}
image {
url
}
path
}
}
}
`,
variables: {
path: projectId,
},
}),
},
);
if (!result.ok) {
console.error(result);
return {};
}
const { data } = await result.json();
const [ProjectData] = data.nodeArticles.nodes;
return {
props: { data: ProjectData || null },
};
}
export async function getStaticPaths() {
const result = await fetch(
`${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: `
{
nodeArticles(first: 100) {
nodes {
path
}
}
}
`,
}),
},
);
if (!result.ok) {
console.error(result);
return {};
}
const { data } = await result.json();
const projects = data.nodeArticles.nodes;
const pagesPaths = projects.map(({ path }) => {
return {
params: { projectId: path },
};
});
return {
paths: pagesPaths || [],
fallback: false,
};
}