fix: Add is404 flag for 404ed routes (#151)

* feat : add import/no-default-export eslint rule.

* chore : updated files for no-default-exports.

* chore : add changeset.

* chore : reorder-import

* temp : fix failing gh actions

* fix : export default for codegen config and baseConfig

* feat: add connectedNode field to template query

* feat: add `is404` flag to parseQueryResult return values

* chore: add changeset

* chore: add is404 test

* feat: expose `is404` to the frontend

* chore: use named import in next config

* feat: add 404 handling to current path middleware

* refactor: remove custom header

* refactor: update is404 parsing

* fix: update tests

* revert: current path middleware

* feat: redirect to not-found

* revert: connectedNode from query

* revert: not-found.tsx

* revert: passing is404 to `TeemplateRenderer` children

* feat: add docs on handling 404 pages

* chore: update changeset

* chore: sort query a to z

* chore: format

* chore: cleanup

* docs: working example

* chore: format

---------

Co-authored-by: Ta5r <srv.tanay@gmail.com>
Co-authored-by: Tanay Srivastava <62954323+Ta5r@users.noreply.github.com>
Co-authored-by: Dovid Levine <david@axepress.dev>

Author: 3 people

.changeset/tame-beans-pay.md

@@ -0,0 +1,5 @@
+---
+"@snapwp/query": patch
+---
+
+dev: Expose `QueryEngine.getTemplateData().is404` for custom HTTP status code handling.

README.md

@@ -57,6 +57,8 @@ SnapWP provides several plugins, packages, and libraries that can be used indivi
 -   [Overloading WordPress Behavior](docs/overloading-wp-behavior.md)
 -   [NextJS Middleware](docs/middleware.md)
 -   [Template Rendering System](docs/template-rendering.md)
+-   [Handling HTTP Status Codes](docs/http-status-codes.md)
+-   [Resolving CORS Issues](docs/cors.md)
 
 ## Development & Contributing
 

docs/http-status-codes.md

@@ -0,0 +1,39 @@
+# HTTP Status Codes
+
+NextJS's App Router does not support setting custom [HTTP Status Codes](https://github.com/vercel/next.js/discussions/53225). As a result, requests to a non-existing WordPress page will return a `STATUS 200` code when returning Block Theme's 404 page.
+
+Although Vercel insists [this doesn't affect SEO](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#status-codes), you can choose to opt-out of using the [`TemplateRenderer`](./template-rendering.md#templaterenderer) and provide your own [Not Found page](https://nextjs.org/docs/app/api-reference/functions/not-found) - or even [`redirect()`](https://nextjs.org/docs/app/api-reference/functions/redirect) to a different WordPress - or non-WordPress - route.
+
+## Example: Using `QueryEngine.getTemplateData().is404`
+
+SnapWP's `QueryEngine.getTemplateData()` returns an `is404` boolean to detect routes that resolve to your Block Theme's 404 page. Here's how to use it with Next.js:
+
+```tsx
+import { notFound } from 'next/navigation';
+import { TemplateRenderer } from '@snapwp/next';
+import { EditorBlocksRenderer } from '@snapwp/blocks';
+import { QueryEngine } from '@snapwp/query';
+
+export default async function Page( {
+	params,
+}: {
+	params: { path?: string[] };
+} ) {
+	const { path } = await params;
+	const pathname = path?.join( '/' ) || '/';
+
+	const { is404 } = await QueryEngine.getTemplateData( pathname );
+
+	if ( is404 ) {
+		notFound();
+	}
+
+	return (
+		<TemplateRenderer>
+			{ ( editorBlocks ) => (
+				<EditorBlocksRenderer editorBlocks={ editorBlocks } />
+			) }
+		</TemplateRenderer>
+	);
+}
+```

packages/query/src/queries/get-current-template.graphql

@@ -126,5 +126,6 @@ query GetCurrentTemplate($uri: String!) {
 				...CoreVideoFrag
 			}
 		}
+		is404
 	}
 }

packages/query/src/query-engine/index.ts

@@ -168,6 +168,7 @@ export class QueryEngine {
 		scripts: EnqueuedScriptProps[] | undefined;
 		scriptModules: ScriptModuleProps[] | undefined;
 		bodyClasses: string[] | undefined;
+		is404: boolean;
 	} > => {
 		if ( ! QueryEngine.isClientInitialized ) {
 			QueryEngine.initialize();

packages/query/src/utils/parse-template.ts

@@ -29,6 +29,7 @@ export function parseQueryResult(
 	scripts: EnqueuedScriptProps[] | undefined;
 	scriptModules: ScriptModuleProps[] | undefined;
 	bodyClasses: string[] | undefined;
+	is404: boolean;
 } {
 	if ( queryData.errors?.length ) {
 		queryData.errors?.forEach( ( error ) => {
@@ -51,13 +52,15 @@ export function parseQueryResult(
 	}
 
 	const templateByUri = queryData.data?.templateByUri;
+	const is404 = templateByUri?.is404 ?? false;
 
 	return {
 		stylesheets: parseEnqueuedStylesheets( wordpressUrl, templateByUri ),
 		editorBlocks: parseEditorBlocks( templateByUri ),
 		scripts: parseEnqueuedScripts( templateByUri, wordpressUrl ),
 		scriptModules: parseScriptModules( templateByUri, wordpressUrl ),
 		bodyClasses: parseBodyClasses( templateByUri ),
+		is404,
 	};
 }
 

packages/query/src/utils/tests/parse-template.test.ts

@@ -85,6 +85,7 @@ describe( 'parseQueryResult', () => {
 				{ src: 'https://cdn.com/script.js', handle: 'cdn-script' },
 			],
 			bodyClasses: [ 'class1', 'class2' ],
+			is404: false,
 		} );
 	} );
 
@@ -106,4 +107,74 @@ describe( 'parseQueryResult', () => {
 			{ message: 'Critical error occurred' }
 		);
 	} );
+
+	it( 'should return is404 true if `templateByUri.is404` is true', () => {
+		const queryData: ApolloQueryResult< GetCurrentTemplateQuery > = {
+			data: {
+				templateByUri: {
+					bodyClasses: [ 'class1', 'class2' ],
+					enqueuedScripts: {
+						nodes: [
+							{
+								id: '122',
+								src: '/script.js',
+								handle: 'test-script',
+							},
+							{
+								id: '123',
+								src: 'https://cdn.com/script.js',
+								handle: 'cdn-script',
+							},
+						],
+					},
+					enqueuedStylesheets: {
+						nodes: [
+							{
+								src: '/style.css',
+								handle: 'test-style',
+								before: [ 'before-content' ],
+								after: [ 'after-content' ],
+							},
+						],
+					},
+					editorBlocks: [
+						{
+							type: 'core/paragraph',
+							renderedHtml: '<p>Text</p>',
+						},
+					],
+					is404: true,
+				},
+			},
+			errors: [],
+			loading: false,
+			networkStatus: 7,
+		};
+
+		const result = parseQueryResult( queryData, wordpressUrl, uri );
+
+		expect( result ).toEqual( {
+			stylesheets: [
+				{
+					src: 'https://test.com/style.css',
+					handle: 'test-style',
+					before: 'before-content',
+					after: 'after-content',
+				},
+			],
+			editorBlocks: [
+				{
+					type: 'core/paragraph',
+					renderedHtml: '<p>Text</p>',
+				},
+			],
+			scriptModules: undefined,
+			scripts: [
+				{ src: 'https://test.com/script.js', handle: 'test-script' },
+				{ src: 'https://cdn.com/script.js', handle: 'cdn-script' },
+			],
+			bodyClasses: [ 'class1', 'class2' ],
+			is404: true,
+		} );
+	} );
 } );