v3 - improve type narrowing for query response data

src/app/(main)/[lang]/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from "next";
 
 import InformationSection from "src/components/informationSection/InformationSection";
 import { getDraftModeInfo } from "src/utils/draftmode";
+import { isNonNullQueryResponse } from "src/utils/queryResponse";
 import SectionRenderer from "src/utils/renderSection";
 import { generateMetadataFromSeo } from "src/utils/seo";
 import { LinkType } from "studio/lib/interfaces/navigation";
@@ -40,7 +41,7 @@ const Home = async ({ params }: Props) => {
     { perspective },
   );
 
-  if (initialLandingPage.data === null) {
+  if (!isNonNullQueryResponse(initialLandingPage)) {
     return (
       <InformationSection
         title="Welcome! Velkommen! Välkommen!"
@@ -52,17 +53,12 @@ const Home = async ({ params }: Props) => {
     );
   }
 
-  const initialData = {
-    ...initialLandingPage,
-    data: initialLandingPage.data,
-  };
-
   return initialLandingPage.data.sections.map((section, index) => (
     <SectionRenderer
       key={section._key}
       section={section}
       isDraftMode={isDraftMode}
-      initialData={initialData}
+      initialData={initialLandingPage}
       isLandingPage={true}
       sectionIndex={index}
     />

src/utils/pageData.ts

@@ -27,6 +27,8 @@ import { CUSTOMER_CASE_QUERY } from "studioShared/lib/queries/customerCases";
 import { loadSharedQuery } from "studioShared/lib/store";
 import { customerCaseID } from "studioShared/schemas/documents/customerCase";
 
+import { isNonNullQueryResponse } from "./queryResponse";
+
 type PageFromParams<D, T> = {
   queryResponse: D;
   docType: T;
@@ -43,22 +45,19 @@ async function fetchDynamicPage({
   if (path.length === 0) {
     return null;
   }
-  const pageResult = await loadStudioQuery<PageBuilder | null>(
+  const queryResponse = await loadStudioQuery<PageBuilder | null>(
     PAGE_BY_SLUG_QUERY,
     {
       slug: path[0],
       language,
     },
     { perspective },
   );
-  if (pageResult.data === null) {
+  if (!isNonNullQueryResponse(queryResponse)) {
     return null;
   }
   return {
-    queryResponse: {
-      ...pageResult,
-      data: pageResult.data,
-    },
+    queryResponse,
     docType: pageBuilderID,
   };
 }
@@ -89,39 +88,30 @@ async function fetchCompensationsPage({
         perspective,
       },
     );
-  if (compensationsPageResult.data === null) {
+  if (!isNonNullQueryResponse(compensationsPageResult)) {
     return null;
   }
   const companyLocationsResult = await loadStudioQuery<CompanyLocation[]>(
     COMPANY_LOCATIONS_QUERY,
     {},
     { perspective },
   );
-  if (companyLocationsResult.data === null) {
+  if (!isNonNullQueryResponse(companyLocationsResult)) {
     return null;
   }
   const localeDocumentResult = await loadStudioQuery<LocaleDocument>(
     LOCALE_QUERY,
     {},
     { perspective },
   );
-  if (localeDocumentResult.data === null) {
+  if (!isNonNullQueryResponse(localeDocumentResult)) {
     return null;
   }
   return {
     queryResponse: {
-      compensationsPage: {
-        ...compensationsPageResult,
-        data: compensationsPageResult.data,
-      },
-      companyLocations: {
-        ...companyLocationsResult,
-        data: companyLocationsResult.data,
-      },
-      locale: {
-        ...localeDocumentResult,
-        data: localeDocumentResult.data,
-      },
+      compensationsPage: compensationsPageResult,
+      companyLocations: companyLocationsResult,
+      locale: localeDocumentResult,
     },
     docType: compensationsId,
   };
@@ -148,15 +138,12 @@ async function fetchCustomerCase({
       },
       { perspective },
     );
-  if (customerCasesPageResult.data === null) {
+  if (!isNonNullQueryResponse(customerCasesPageResult)) {
     return null;
   }
   if (path.length === 1) {
     return {
-      queryResponse: {
-        ...customerCasesPageResult,
-        data: customerCasesPageResult.data,
-      },
+      queryResponse: customerCasesPageResult,
       docType: customerCasesPageID,
     };
   }
@@ -170,14 +157,11 @@ async function fetchCustomerCase({
       perspective,
     },
   );
-  if (customerCaseResult.data === null) {
+  if (!isNonNullQueryResponse(customerCaseResult)) {
     return null;
   }
   return {
-    queryResponse: {
-      ...customerCaseResult,
-      data: customerCaseResult.data,
-    },
+    queryResponse: customerCaseResult,
     docType: customerCaseID,
   };
 }
@@ -203,14 +187,11 @@ async function fetchLegalDocument({
       perspective,
     },
   );
-  if (queryResponse.data === null) {
+  if (!isNonNullQueryResponse(queryResponse)) {
     return null;
   }
   return {
-    queryResponse: {
-      ...queryResponse,
-      data: queryResponse.data,
-    },
+    queryResponse,
     docType: legalDocumentID,
   };
 }

src/utils/queryResponse.ts

@@ -0,0 +1,7 @@
+import { QueryResponseInitial } from "@sanity/react-loader";
+
+export function isNonNullQueryResponse<T>(
+  value: QueryResponseInitial<T | null>,
+): value is QueryResponseInitial<T> {
+  return value.data !== null;
+}