show-static-page-speed

pages/projects/[slug].tsx

@@ -1,20 +1,16 @@
-import { GetServerSideProps } from 'next/types';
+import { GetStaticProps } from 'next/types';
 import { IMainCategory, IProject, IQFRound } from '@/apollo/types/types';
-import { transformGraphQLErrorsToStatusCode } from '@/helpers/requests';
 import { initializeApollo } from '@/apollo/apolloClient';
-import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions';
 import {
 	FETCH_ALL_PROJECTS,
 	FETCH_MAIN_CATEGORIES,
 } from '@/apollo/gql/gqlProjects';
 import { GeneralMetatags } from '@/components/Metatag';
 import ProjectsIndex from '@/components/views/projects/ProjectsIndex';
-import { useReferral } from '@/hooks/useReferral';
 import { projectsMetatags } from '@/content/metatags';
 import { ProjectsProvider } from '@/context/projects.context';
 import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF';
-import { getMainCategorySlug } from '@/helpers/projects';
-import { EProjectsSortBy } from '@/apollo/types/gqlEnums';
+import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions';
 
 export interface IProjectsRouteProps {
 	projects: IProject[];
@@ -45,8 +41,6 @@ const ProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => {
 		qfRounds,
 	} = props;
 
-	useReferral();
-
 	return (
 		<ProjectsProvider
 			mainCategories={mainCategories}
@@ -60,82 +54,79 @@ const ProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => {
 	);
 };
 
-export const getServerSideProps: GetServerSideProps = async context => {
+// This function gets called at build time
+export async function getStaticPaths() {
+	const apolloClient = initializeApollo();
+
+	// Call an external API endpoint to get posts
+	const { data } = await apolloClient.query({
+		query: FETCH_MAIN_CATEGORIES,
+		fetchPolicy: 'no-cache', // Adjust based on your caching policy needs
+	});
+
+	const mainCategories = data.mainCategories as IMainCategory[];
+
+	// Get the paths we want to pre-render based on posts
+	const _paths = mainCategories.map(category => ({
+		params: { slug: category.slug },
+	}));
+
+	const paths = [{ params: { slug: 'all' } }, ..._paths];
+
+	// We'll pre-render only these paths at build time.
+	// { fallback: false } means other routes should 404.
+	return { paths, fallback: false };
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
 	const apolloClient = initializeApollo();
-	const { variables, notifyOnNetworkStatusChange } = OPTIONS_HOME_PROJECTS;
+	const { variables } = OPTIONS_HOME_PROJECTS;
+
 	try {
-		const { query } = context;
-		const slug = query.slug;
-
-		const {
-			data: { mainCategories },
-		}: {
-			data: { mainCategories: IMainCategory[] };
-		} = await apolloClient.query({
+		// Fetch main categories
+		const { data: mainCategoriesData } = await apolloClient.query({
 			query: FETCH_MAIN_CATEGORIES,
-			fetchPolicy: 'network-only',
+			fetchPolicy: 'no-cache', // Adjust based on your caching policy needs
+		});
+
+		// Fetch projects with a predefined sorting
+		const { data: projectsData } = await apolloClient.query({
+			query: FETCH_ALL_PROJECTS,
+			variables: {
+				...variables,
+				mainCategory: params?.slug === 'all' ? null : params?.slug,
+			},
+			fetchPolicy: 'no-cache',
 		});
 
-		const updatedMainCategory = [allCategoriesItem, ...mainCategories];
+		// Fetch QF rounds
+		const { data: qfRoundsData } = await apolloClient.query({
+			query: FETCH_QF_ROUNDS,
+			fetchPolicy: 'no-cache',
+		});
+
+		const updatedMainCategory = [
+			allCategoriesItem,
+			...mainCategoriesData.mainCategories,
+		];
+
 		const selectedMainCategory = updatedMainCategory.find(mainCategory => {
-			return mainCategory.slug === slug;
+			return mainCategory.slug === params?.slug;
 		});
 
-		if (selectedMainCategory) {
-			const updatedSelectedMainCategory = {
-				...selectedMainCategory,
-				selected: true,
-			};
-			const apolloClient = initializeApollo();
-			const { data } = await apolloClient.query({
-				query: FETCH_ALL_PROJECTS,
-				variables: {
-					...variables,
-					sortingBy: query.sort || EProjectsSortBy.INSTANT_BOOSTING,
-					searchTerm: query.searchTerm,
-					filters: query.filter
-						? Array.isArray(query.filter)
-							? query.filter
-							: [query.filter]
-						: null,
-					campaignSlug: query.campaignSlug,
-					category: query.category,
-					mainCategory: getMainCategorySlug(
-						updatedSelectedMainCategory,
-					),
-					notifyOnNetworkStatusChange,
-				},
-				fetchPolicy: 'network-only',
-			});
-			const { projects, totalCount } = data.allProjects;
-			const {
-				data: { qfRounds },
-			} = await apolloClient.query({
-				query: FETCH_QF_ROUNDS,
-				fetchPolicy: 'network-only',
-			});
-			return {
-				props: {
-					projects,
-					mainCategories: updatedMainCategory,
-					selectedMainCategory: updatedSelectedMainCategory,
-					totalCount,
-					qfRounds,
-				},
-			};
-		}
-		return {
-			notFound: true,
-		};
-	} catch (error: any) {
-		const statusCode = transformGraphQLErrorsToStatusCode(
-			error?.graphQLErrors,
-		);
 		return {
 			props: {
-				errorStatus: statusCode,
+				projects: projectsData.allProjects.projects,
+				totalCount: projectsData.allProjects.totalCount,
+				mainCategories: updatedMainCategory,
+				qfRounds: qfRoundsData.qfRounds,
+				selectedMainCategory,
 			},
+			revalidate: 300, // Optionally, revalidate at most once per hour
 		};
+	} catch (error) {
+		console.error('Failed to fetch API:', error);
+		return { props: { hasError: true } };
 	}
 };
 

pages/qf/[slug].tsx

@@ -1,8 +1,6 @@
-import { GetServerSideProps } from 'next/types';
+import { GetStaticProps } from 'next/types';
 import { EProjectsFilter, IMainCategory } from '@/apollo/types/types';
-import { transformGraphQLErrorsToStatusCode } from '@/helpers/requests';
 import { initializeApollo } from '@/apollo/apolloClient';
-import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions';
 import {
 	FETCH_ALL_PROJECTS,
 	FETCH_MAIN_CATEGORIES,
@@ -14,8 +12,7 @@ import { ProjectsProvider } from '@/context/projects.context';
 import { FETCH_QF_ROUNDS } from '@/apollo/gql/gqlQF';
 import { useReferral } from '@/hooks/useReferral';
 import { IProjectsRouteProps, allCategoriesItem } from 'pages/projects/[slug]';
-import { getMainCategorySlug } from '@/helpers/projects';
-import { EProjectsSortBy } from '@/apollo/types/gqlEnums';
+import { OPTIONS_HOME_PROJECTS } from '@/apollo/gql/gqlOptions';
 
 interface IProjectsCategoriesRouteProps extends IProjectsRouteProps {
 	selectedMainCategory: IMainCategory;
@@ -45,89 +42,79 @@ const QFProjectsCategoriesRoute = (props: IProjectsCategoriesRouteProps) => {
 	);
 };
 
-export const getServerSideProps: GetServerSideProps = async context => {
+// This function gets called at build time
+export async function getStaticPaths() {
+	const apolloClient = initializeApollo();
+
+	// Call an external API endpoint to get posts
+	const { data } = await apolloClient.query({
+		query: FETCH_MAIN_CATEGORIES,
+		fetchPolicy: 'no-cache', // Adjust based on your caching policy needs
+	});
+
+	const mainCategories = data.mainCategories as IMainCategory[];
+
+	// Get the paths we want to pre-render based on posts
+	const _paths = mainCategories.map(category => ({
+		params: { slug: category.slug },
+	}));
+
+	const paths = [{ params: { slug: 'all' } }, ..._paths];
+
+	// We'll pre-render only these paths at build time.
+	// { fallback: false } means other routes should 404.
+	return { paths, fallback: false };
+}
+
+export const getStaticProps: GetStaticProps = async ({ params }) => {
 	const apolloClient = initializeApollo();
-	const { variables, notifyOnNetworkStatusChange } = OPTIONS_HOME_PROJECTS;
+	const { variables } = OPTIONS_HOME_PROJECTS;
 	try {
-		const { query } = context;
-		const slug = query.slug;
-
-		const {
-			data: { mainCategories },
-		}: {
-			data: { mainCategories: IMainCategory[] };
-		} = await apolloClient.query({
+		// Fetch main categories
+		const { data: mainCategoriesData } = await apolloClient.query({
 			query: FETCH_MAIN_CATEGORIES,
-			fetchPolicy: 'network-only',
+			fetchPolicy: 'no-cache', // Adjust based on your caching policy needs
 		});
 
-		const updatedMainCategory = [allCategoriesItem, ...mainCategories];
+		// Fetch projects with a predefined sorting
+		const { data: projectsData } = await apolloClient.query({
+			query: FETCH_ALL_PROJECTS,
+			variables: {
+				...variables,
+				mainCategory: params?.slug === 'all' ? null : params?.slug,
+				filters: [EProjectsFilter.ACTIVE_QF_ROUND],
+			},
+			fetchPolicy: 'no-cache',
+		});
+
+		// Fetch QF rounds
+		const { data: qfRoundsData } = await apolloClient.query({
+			query: FETCH_QF_ROUNDS,
+			fetchPolicy: 'no-cache',
+		});
+
+		const updatedMainCategory = [
+			allCategoriesItem,
+			...mainCategoriesData.mainCategories,
+		];
+
 		const selectedMainCategory = updatedMainCategory.find(mainCategory => {
-			return mainCategory.slug === slug;
+			return mainCategory.slug === params?.slug;
 		});
 
-		if (selectedMainCategory) {
-			const updatedSelectedMainCategory = {
-				...selectedMainCategory,
-				selected: true,
-			};
-			const apolloClient = initializeApollo();
-
-			let _filters = query.filter
-				? Array.isArray(query.filter)
-					? query.filter
-					: [query.filter]
-				: undefined;
-
-			_filters
-				? _filters.push(EProjectsFilter.ACTIVE_QF_ROUND)
-				: (_filters = [EProjectsFilter.ACTIVE_QF_ROUND]);
-
-			const { data } = await apolloClient.query({
-				query: FETCH_ALL_PROJECTS,
-				variables: {
-					...variables,
-					sortingBy: query.sort || EProjectsSortBy.INSTANT_BOOSTING,
-					searchTerm: query.searchTerm,
-					filters: _filters,
-					campaignSlug: query.campaignSlug,
-					category: query.category,
-					mainCategory: getMainCategorySlug(
-						updatedSelectedMainCategory,
-					),
-					notifyOnNetworkStatusChange,
-				},
-				fetchPolicy: 'network-only',
-			});
-			const { projects, totalCount } = data.allProjects;
-			const {
-				data: { qfRounds },
-			} = await apolloClient.query({
-				query: FETCH_QF_ROUNDS,
-				fetchPolicy: 'network-only',
-			});
-			return {
-				props: {
-					projects,
-					mainCategories: updatedMainCategory,
-					selectedMainCategory: updatedSelectedMainCategory,
-					totalCount,
-					qfRounds,
-				},
-			};
-		}
-		return {
-			notFound: true,
-		};
-	} catch (error: any) {
-		const statusCode = transformGraphQLErrorsToStatusCode(
-			error?.graphQLErrors,
-		);
 		return {
 			props: {
-				errorStatus: statusCode,
+				projects: projectsData.allProjects.projects,
+				totalCount: projectsData.allProjects.totalCount,
+				mainCategories: updatedMainCategory,
+				qfRounds: qfRoundsData.qfRounds,
+				selectedMainCategory,
 			},
+			revalidate: 300, // Optionally, revalidate at most once per hour
 		};
+	} catch (error) {
+		console.error('Failed to fetch API:', error);
+		return { props: { hasError: true } };
 	}
 };
 

src/apollo/apolloClient.ts

@@ -151,7 +151,7 @@ function createApolloClient() {
 
 	return new ApolloClient({
 		ssrMode,
-		link: errorLink.concat(authLink.concat(httpLink.concat(retryLink))),
+		link: ApolloLink.from([errorLink, authLink, retryLink, httpLink]),
 		cache: new InMemoryCache({
 			addTypename: false,
 		}),

src/components/cards/MintCard.tsx

@@ -18,12 +18,15 @@ import { readContracts, readContract } from '@wagmi/core';
 import { MintModal } from '../modals/Mint/MintModal';
 import { formatWeiHelper } from '@/helpers/number';
 import config from '@/configuration';
-import { abi as PFP_ABI } from '@/artifacts/pfpGiver.json';
+import pfpJson from '@/artifacts/pfpGiver.json';
 import { InsufficientFundModal } from '../modals/InsufficientFund';
 import { usePFPMintData } from '@/context/pfpmint.context';
 import { useGeneralWallet } from '@/providers/generalWalletProvider';
 import { wagmiConfig } from '@/wagmiConfigs';
 import { getReadContractResult } from '@/lib/contracts';
+
+const { abi: PFP_ABI } = pfpJson;
+
 const MIN_NFT_QTY = 1;
 
 interface IpfpContractData {

src/components/modals/Mint/MintModal.tsx

@@ -18,7 +18,7 @@ import { formatWeiHelper } from '@/helpers/number';
 import { waitForTransaction } from '@/lib/transaction';
 import { approveERC20tokenTransfer } from '@/lib/stakingPool';
 import config from '@/configuration';
-import { abi as PFP_ABI } from '@/artifacts/pfpGiver.json';
+import pfpJson from '@/artifacts/pfpGiver.json';
 import { EPFPMinSteps, usePFPMintData } from '@/context/pfpmint.context';
 import { MintSteps } from './MintSteps';
 import { wagmiConfig } from '@/wagmiConfigs';
@@ -29,6 +29,8 @@ export enum MintStep {
 	MINTING,
 }
 
+const { abi: PFP_ABI } = pfpJson;
+
 interface IMintModalProps extends IModal {
 	qty: number;
 	nftPrice?: bigint;

src/components/views/projects/ProjectsBanner.tsx

@@ -36,6 +36,7 @@ export const ProjectsBanner: FC<IProjectsBanner> = ({ mainCategory }) => {
 				}
 				fill
 				alt={_mainCategory.title}
+				priority
 			/>
 			<Title weight={700}>
 				{formatMessage({ id: `projects_${_mainCategory.slug}` })}