feat(app): add static rendering to single question

apps/app/.env.local-example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API_URL=http://api.devfaq.localhost:3002
 NEXT_PUBLIC_APP_URL=http://app.devfaq.localhost:3000
+NEXT_PUBLIC_REVALIDATION_SECRET=
 
 FLAGSMITH_SERVER_SIDE_ENVIRONMENT_KEY=

apps/app/src/app/(main-layout)/questions/p/[questionId]/page.tsx

@@ -42,3 +42,7 @@ export default async function SingleQuestionPage({ params }: { params: Params<"q
 		</>
 	);
 }
+
+export async function generateStaticParams() {
+	return [];
+}

apps/app/src/components/QuestionAnswers/AddAnswerForm/AddAnswerForm.tsx

@@ -7,6 +7,7 @@ import { Button } from "../../Button/Button";
 import { WysiwygEditor } from "../../WysiwygEditor/WysiwygEditor";
 import { URL_REGEX } from "../../../lib/constants";
 import { Error } from "../../Error";
+import { useRevalidation } from "../../../hooks/useRevalidation";
 import { AnswerSources } from "./AnswerSources";
 
 type AddAnswerFormProps = Readonly<{
@@ -21,9 +22,13 @@ export const AddAnswerForm = ({ questionId }: AddAnswerFormProps) => {
 	const [isError, setIsError] = useState(false);
 
 	const { createQuestionAnswerMutation } = useQuestionMutation();
+	const { revalidateMutation } = useRevalidation();
 
 	const disabled =
-		content.trim().length === 0 || !sources.every((source) => URL_REGEX.test(source));
+		content.trim().length === 0 ||
+		!sources.every((source) => URL_REGEX.test(source)) ||
+		createQuestionAnswerMutation.isLoading ||
+		revalidateMutation.isLoading;
 
 	const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
@@ -36,9 +41,14 @@ export const AddAnswerForm = ({ questionId }: AddAnswerFormProps) => {
 			},
 			{
 				onSuccess: () => {
-					router.refresh();
-					setContent("");
-					setSources([]);
+					revalidateMutation.mutate(`/questions/p/${questionId}`, {
+						onSuccess: () => {
+							router.refresh();
+							setContent("");
+							setSources([]);
+						},
+						onError: () => setIsError(true),
+					});
 				},
 				onError: () => setIsError(true),
 			},

apps/app/src/hooks/useRevalidation.ts

@@ -0,0 +1,8 @@
+import { useMutation } from "@tanstack/react-query";
+import { revalidate } from "../services/revalidation.service";
+
+export const useRevalidation = () => {
+	const revalidateMutation = useMutation(revalidate);
+
+	return { revalidateMutation };
+};

apps/app/src/lib/revalidation.ts

@@ -0,0 +1,3 @@
+export const validatePath = (path: string | string[] | undefined): path is string => {
+	return Boolean(path) && typeof path === "string";
+};

apps/app/src/pages/api/revalidation.ts

@@ -0,0 +1,21 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { validatePath } from "../../lib/revalidation";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+	const { token, path } = req.query;
+
+	if (token !== process.env.NEXT_PUBLIC_REVALIDATION_SECRET) {
+		return res.status(401).json({ message: "Invalid token" });
+	}
+
+	if (!validatePath(path)) {
+		return res.status(400).json({ message: "Incorrect path format" });
+	}
+
+	try {
+		await res.revalidate(path);
+		return res.status(204).end();
+	} catch (err) {
+		return res.status(500).json({ message: "Error revalidating" });
+	}
+}

apps/app/src/services/revalidation.service.ts

@@ -0,0 +1,5 @@
+export const revalidate = (path: string) =>
+	fetch(
+		`/api/revalidation?token=${process.env.NEXT_PUBLIC_REVALIDATION_SECRET || ""}&path=${path}`,
+		{ method: "POST" },
+	);