I recently refactored some parts of my project that was outdated. As a part of that refactoring I updated our queries and types. Now I’m suddenly getting 404 errors indicating there is something wrong with my query. It runs fine and builds without errors locally, but crashes every time I push.
It’s fetching from Contentful and this specific query is getting a list of all company news.
I have been banging my head against the wall on this for days now, tried rewriting with Apollo client, adding error handling, tried generating staticPaths and removing them(empty array). I also tried returning {notFound: true} if the query should happen to return 404 under any circumstance. At this point I am completely out of ideas.
This is the error I’m getting:
Error occurred prerendering page "/about-us/company-news". Read more: https://nextjs.org/docs/messages/prerender-error
Error: GraphQL Error (Code: 404): {"response":{"sys":{"type":"Error","id":"NotFound"},"message":"The resource could not be found.","details":"The resource could not be found.","status":404,"headers":{}},"request":{"query":"fragment CompanyNewsCard on CompanyNews {n titlen slugn mainImage {n altTextn image {n urln }n }n sys {n idn publishedAtn }n}nnquery allCompanyNews {n companyNewsCollection {n items {n ...CompanyNewsCardn }n }n}"}}
at makeRequest (file:///home/runner/work/us-no-nextjs/us-no-nextjs/node_modules/graphql-request/build/esm/index.js:282:15)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async getStaticProps (/home/runner/work/us-no-nextjs/us-no-nextjs/.next/server/pages/about-us/company-news.js:123:18)
info - Generating static pages (12/26)
> Export encountered errors on following paths:
/about-us/company-news
error Command failed with exit code 1.This is how I’m querying:
export async function getStaticProps() {
const data = await fetchGraphQL<CompanyNewsCardCollectionResponse>(
ALL_COMPANY_NEWS
);
return {
props: {
articles: extractAllContent(data, 'companyNewsCollection') ?? null
}
};
}The query:
export const COMPANY_NEWS_CARD_FRAGMENT = gql`
fragment CompanyNewsCard on CompanyNews {
title
slug
mainImage {
altText
image {
url
}
}
sys {
id
publishedAt
}
}
`;
export const ALL_COMPANY_NEWS = gql`
${COMPANY_NEWS_CARD_FRAGMENT}
query allCompanyNews {
companyNewsCollection {
items {
...CompanyNewsCard
}
}
}
`;This is my client:
const client = new GraphQLClient(graphQlLink);
async function fetchGraphQL<T>(
query: DocumentNode,
variables?: Record<string, unknown>
): Promise<T> {
const headers: GraphQLClientRequestHeaders = {};
if (accessToken) {
headers.Authorization = `Bearer ${accessToken}`;
}
return client.request<T>(query, variables, headers);
}
export default fetchGraphQL;