feat: further optimize props to remove extra yoast data

.changeset/silent-kiwis-compare.md

@@ -0,0 +1,6 @@
+---
+"@headstartwp/core": patch
+"@headstartwp/next": patch
+---
+
+Further Optimize next.js props by removing yoast seo bloat.

packages/core/src/data/types/entities.ts

@@ -18,7 +18,7 @@ export interface Entity {
 /**
  * Cover some cases of objects with `rendered` property.
  */
-interface Rendered {
+export interface Rendered {
 	/**
 	 * Property of the object, transformed for display.
 	 */
@@ -110,8 +110,8 @@ export interface PostTypeEntity extends Entity {
 	 */
 	ping_status: 'open' | 'closed';
 
-	yoast_head_json: Record<string, any> | null;
-	yoast_head: string | null;
+	yoast_head_json?: Record<string, any> | null;
+	yoast_head?: string | null;
 }
 
 /**
@@ -475,8 +475,8 @@ export interface TermEntity extends Entity {
 	 */
 	meta: Record<string, unknown>;
 
-	yoast_head_json: Record<string, any> | null;
-	yoast_head: string | null;
+	yoast_head_json?: Record<string, any> | null;
+	yoast_head?: string | null;
 }
 
 /**
@@ -544,8 +544,8 @@ export interface AuthorEntity extends Entity {
 	 */
 	meta: Record<string, unknown>;
 
-	yoast_head_json: Record<string, any> | null;
-	yoast_head: string | null;
+	yoast_head_json?: Record<string, any> | null;
+	yoast_head?: string | null;
 }
 
 /**

packages/core/src/data/utils/postHandling.ts

@@ -1,4 +1,4 @@
-import { AuthorEntity, PostEntity, TermEntity } from '../types';
+import { AttachmentEntity, AuthorEntity, PostEntity, TermEntity } from '../types';
 import { removeFields } from './dataFilter';
 
 /**
@@ -53,6 +53,11 @@ export function removeFieldsFromPostRelatedData(
 			...post,
 			_embedded: {
 				...post._embedded,
+				'wp:featuredmedia': post._embedded?.['wp:featuredmedia']
+					? post._embedded?.['wp:featuredmedia']?.map((attachments) =>
+							removeFields(fieldsToRemove, attachments as AttachmentEntity[]),
+					  )
+					: [],
 				author: post._embedded.author
 					? (removeFields(fieldsToRemove, post._embedded.author) as AuthorEntity[])
 					: [],

packages/next/src/data/server/__tests__/addHookData.ts

@@ -11,6 +11,26 @@ const sampleYoast = {
 };
 const sampleResult = {
 	id: 0,
+	_embedded: {
+		author: [
+			{
+				id: 1,
+				yoast_head: 'this should be removed',
+				yoast_head_json: sampleYoast,
+			},
+		],
+		'wp:featuredmedia': [
+			{
+				id: 2,
+				yoast_head: 'this should be removed',
+				yoast_head_json: sampleYoast,
+			},
+		],
+		'wp:term': [
+			[{ id: 3, yoast_head: 'this should be removed', yoast_head_json: sampleYoast }],
+			[{ id: 4, yoast_head: 'this should be removed', yoast_head_json: sampleYoast }],
+		],
+	},
 	yoast_head: 'this should be removed',
 	yoast_head_json: sampleYoast,
 };
@@ -50,21 +70,33 @@ describe('addHookData', () => {
 				isMainQuery: false,
 			},
 		];
-		expect(addHookData(hookStates, {})).toMatchObject({
+		expect(addHookData(hookStates, {})).toStrictEqual({
 			props: {
 				fallback: {
 					'first-key': {
 						result: {
-							yoast_head: null,
-							yoast_head_json: null,
+							id: 0,
+							_embedded: {
+								author: [
+									{
+										id: 1,
+									},
+								],
+								'wp:featuredmedia': [{ id: 2 }],
+								'wp:term': [[{ id: 3 }], [{ id: 4 }]],
+							},
 						},
+						queriedObject: {},
 						pageInfo: samplePageInfo,
 					},
 					'second-key': {
+						queriedObject: {},
+						pageInfo: samplePageInfo,
 						result: { ...appSettingsResult, 'theme.json': null },
 					},
 				},
 				seo: {
+					yoast_head: sampleResult.yoast_head,
 					yoast_head_json: sampleYoast,
 				},
 				themeJSON: { ...sampleThemeJson },
@@ -85,30 +117,43 @@ describe('addHookData', () => {
 			},
 		];
 
-		expect(addHookData(hookStates, {})).toMatchObject({
+		const expectedPostEmbeddedResult = {
+			author: [
+				{
+					id: 1,
+				},
+			],
+			'wp:featuredmedia': [{ id: 2 }],
+			'wp:term': [[{ id: 3 }], [{ id: 4 }]],
+		};
+
+		expect(addHookData(hookStates, {})).toStrictEqual({
 			props: {
 				fallback: {
 					'first-key': {
+						queriedObject: {},
 						result: [
 							{
-								yoast_head: null,
-								yoast_head_json: null,
+								id: 0,
+								_embedded: expectedPostEmbeddedResult,
 							},
 							{
-								yoast_head: null,
-								yoast_head_json: null,
+								id: 0,
+								_embedded: expectedPostEmbeddedResult,
 							},
 							{
-								yoast_head: null,
-								yoast_head_json: null,
+								id: 0,
+								_embedded: expectedPostEmbeddedResult,
 							},
 						],
 						pageInfo: samplePageInfo,
 					},
 				},
 				seo: {
+					yoast_head: sampleResult.yoast_head,
 					yoast_head_json: sampleYoast,
 				},
+				themeJSON: {},
 			},
 		});
 	});

packages/next/src/data/server/addHookData.ts

@@ -1,4 +1,10 @@
-import { AppEntity, Entity, FetchResponse, PostEntity } from '@headstartwp/core';
+import {
+	AppEntity,
+	Entity,
+	FetchResponse,
+	PostEntity,
+	removeFieldsFromPostRelatedData,
+} from '@headstartwp/core';
 import type { Redirect } from 'next';
 
 export type HookState<T> = {
@@ -68,23 +74,31 @@ export function addHookData<P = { [key: string]: any }>(
 	if (mainQuery) {
 		if (mainQuery.data.queriedObject.search?.yoast_head_json) {
 			seo_json = { ...mainQuery.data.queriedObject.search?.yoast_head_json };
+			delete mainQuery.data.queriedObject.search?.yoast_head_json;
 		} else if (mainQuery.data.queriedObject.author?.yoast_head_json) {
 			seo_json = { ...mainQuery.data.queriedObject.author?.yoast_head_json };
+			delete mainQuery.data.queriedObject.author?.yoast_head_json;
 		} else if (mainQuery.data.queriedObject.term?.yoast_head_json) {
 			seo_json = { ...mainQuery.data.queriedObject.term?.yoast_head_json };
+			delete mainQuery.data.queriedObject.term?.yoast_head_json;
 		} else if (Array.isArray(mainQuery.data.result) && mainQuery.data.result.length > 0) {
 			if (mainQuery.data.result[0]?.yoast_head_json) {
 				seo_json = { ...mainQuery.data.result[0].yoast_head_json };
+				delete mainQuery.data.result[0].yoast_head_json;
 			}
 		} else if (!Array.isArray(mainQuery.data.result) && hasYoastTags(mainQuery.data.result)) {
 			seo_json = { ...mainQuery.data.result.yoast_head_json };
+			delete mainQuery.data.result.yoast_head_json;
 		}
 		if (mainQuery.data.queriedObject.search?.yoast_head) {
 			seo = mainQuery.data.queriedObject.search?.yoast_head;
+			delete mainQuery.data.queriedObject.search?.yoast_head;
 		} else if (mainQuery.data.queriedObject.author?.yoast_head) {
 			seo = mainQuery.data.queriedObject.author?.yoast_head;
+			delete mainQuery.data.queriedObject.author?.yoast_head;
 		} else if (mainQuery.data.queriedObject.term?.yoast_head) {
 			seo = mainQuery.data.queriedObject.term?.yoast_head;
+			delete mainQuery.data.queriedObject.term?.yoast_head;
 		} else if (
 			Array.isArray(mainQuery.data.result) &&
 			mainQuery.data.result.length > 0 &&
@@ -112,42 +126,60 @@ export function addHookData<P = { [key: string]: any }>(
 		// we want to keep only one yoast_head_json object and remove everything else to reduce
 		// hydration costs
 		if (Array.isArray(data.result) && data.result.length > 0) {
-			data.result.forEach((post) => {
+			data.result = data.result.map((post) => {
+				let cleanedUpPost = { ...post };
+
+				if (post?._embedded) {
+					cleanedUpPost = removeFieldsFromPostRelatedData(
+						['yoast_head_json', 'yoast_head'],
+						post as PostEntity,
+					);
+				}
+
 				if (post?.yoast_head_json) {
 					if (!foundSeoJson) {
 						seo_json = { ...post.yoast_head_json };
 					}
 
-					post.yoast_head_json = null;
+					delete cleanedUpPost.yoast_head_json;
 				}
 
 				if (post?.yoast_head) {
 					if (!foundSeo) {
 						seo = post.yoast_head;
 					}
 
-					post.yoast_head = null;
+					delete cleanedUpPost.yoast_head;
 				}
+
+				return cleanedUpPost;
 			});
 		} else if (!Array.isArray(data.result)) {
 			if (data.result?.yoast_head_json) {
 				if (!foundSeoJson) {
 					seo_json = { ...data.result.yoast_head_json };
 				}
-				data.result.yoast_head_json = null;
+				delete data.result.yoast_head_json;
 			}
 
 			if (data.result?.yoast_head) {
 				if (!foundSeo) {
 					seo = data.result.yoast_head;
 				}
 
-				data.result.yoast_head = null;
+				delete data.result.yoast_head;
 			}
 
 			if (data.result?.['theme.json']) {
 				data.result['theme.json'] = null;
 			}
+
+			if (data.result?._embedded) {
+				data.result = removeFieldsFromPostRelatedData(
+					['yoast_head_json', 'yoast_head'],
+					data.result as PostEntity,
+				);
+			}
 		}
 
 		fallback[key] = data;