Yank out self-fetching portable text components

next/app/story/[slug]/page.tsx

@@ -29,6 +29,12 @@ export async function generateMetadata({
 export default async function StoryPage({ params }: PageParams) {
   const { slug } = params;
   const initial = await pageData(slug);
+  initial.data.content = initial.data.content.map((item) => {
+    if (item && item.refData && item.refData.length) {
+      item = item.refData[0];
+    }
+    return item;
+  });
 
   if (draftMode().isEnabled) {
     return <StoryPreview params={params} initial={initial} />;

next/components/bynder-block/index.tsx

@@ -1,6 +1,8 @@
 import RenderBynderBlock from "./component";
-import { loadQuery } from "@/lib/sanity/store";
-import query from "./query";
+
+// import { loadQuery } from "@/lib/sanity/loader/loadQuery";
+// import query from "./query";
+
 import { ISanityDocument } from "@/lib/sanity/types";
 /**
  * Maps to the 'dynamicCta' object type in Sanity.
@@ -17,12 +19,13 @@ export interface ISanityBynderBlockDocument extends ISanityDocument {
   caption: any[];
   bynderAsset: any;
 }
-const componentData = async (params: TParams) =>
-  await loadQuery<ISanityBynderBlockDocument>(query, params);
+// const componentData = async (params: TParams) =>
+//   await loadQuery<ISanityBynderBlockDocument>(query, params);
+
+export default async function BynderBlock(props) {
+  // const params = { _id: _ref };
 
-export default async function DynamicCTA({ _ref }: { _ref: string }) {
-  const params = { _id: _ref };
-  const initial = await componentData(params);
+  // const initial = await componentData(params);
 
-  return <RenderBynderBlock {...initial.data} />;
+  return <RenderBynderBlock {...props.value} />;
 }

next/components/data-table/index.tsx

@@ -15,12 +15,12 @@ export interface ISanityDataTableDocument extends ISanityDocument {
   tickers: string[];
   columnHeaders: string[];
 }
-const componentData = async (params: TParams) =>
-  await loadQuery<ISanityDataTableDocument>(query, params);
+// const componentData = async (params: TParams) =>
+//   await loadQuery<ISanityDataTableDocument>(query, params);
 
-export default async function DataTable({ _ref }: { _ref: string }) {
-  const params = { _id: _ref };
-  const initial = await componentData(params);
+export default async function DataTable(props) {
+  // const params = { _id: _ref };
+  // const initial = await componentData(params);
 
-  return <RenderDataTable {...initial.data} />;
+  return <RenderDataTable {...props.value} />;
 }

next/components/dynamic-cta/index.tsx

@@ -17,12 +17,12 @@ interface ISanityDynamicCTADocument extends ISanityDocument {
   heading: string;
   button: TButtonProps;
 }
-const componentData = async (params: TParams) =>
-  await loadQuery<ISanityDynamicCTADocument>(query, params);
+// const componentData = async (params: TParams) =>
+//   await loadQuery<ISanityDynamicCTADocument>(query, params);
 
-export default async function DynamicCTA({ _ref }: { _ref: string }) {
-  const params = { _id: _ref };
-  const initial = await componentData(params);
+export default async function DynamicCTA(props) {
+  // const params = { _id: _ref };
+  // const initial = await componentData(params);
 
-  return <RenderDynamicCTA {...initial.data} />;
+  return <RenderDynamicCTA {...props.value} />;
 }

next/components/pages/story/custom-portable-text/components.tsx

@@ -3,14 +3,18 @@ import BynderBlock from "@/components/bynder-block";
 import StoryImage from "../story-image";
 import ReferenceResolver from "../reference-resolver";
 import { ReactNode } from "react";
+import DynamicCTA from "@/components/dynamic-cta";
+import DataTable from "@/components/data-table";
 
 export const components = {
   // Custom block types require their own custom components
   types: {
     image: StoryImage,
     table: PortableTable,
     bynderBlock: BynderBlock,
-    reference: ReferenceResolver,
+    dynamicCta: DynamicCTA,
+    dataTable: DataTable,
+    // reference: ReferenceResolver,
   },
   // Wrap normal elements with Tailwind classes for styling
   block: {

next/components/pages/story/index.tsx

@@ -18,7 +18,32 @@ type TStoryProps = {
 };
 
 export const query = (slug: string) =>
-  groq`*[_type == "story" && slug.current == '${slug}'][0]{slug, title, summary, displayDate, _id, _type, featuredImage{...}, content[]{..., button{..., "to":to->{slug, _type}}, "refType":*[_id==^._ref]._type}, seoData{...,}, taxonomy[]{...,taxonomyAttribute->{name}, terms[]->{name, _id}}}`;
+  groq`*[_type == "story" && slug.current == '${slug}'][0]{
+    slug,
+    title,
+    summary,
+    displayDate,
+    _id,
+    _type,
+    featuredImage{...},
+    content[]{
+      ...,
+      button {
+        ..., 
+        "to":to->{slug, _type}
+      },
+      "refType":*[_id==^._ref]._type,
+      "refData":*[_id==^._ref]{
+        ...,
+      },
+    },
+    seoData {...,},
+    taxonomy[]{
+      ...,
+      taxonomyAttribute->{name},
+      terms[]->{name, _id}
+    }
+  }`;
 
 export default function Story({
   data,
@@ -31,6 +56,7 @@ export default function Story({
         timeZone: "UTC",
       })
     : null;
+
   return (
     <main className="mx-auto mb-12 mt-5 max-w-7xl px-5 xl:px-0">
       <small className="text-lg font-semibold leading-7 text-schwab-blue">

next/components/pages/story/preview.tsx

@@ -14,7 +14,12 @@ export default function StoryPreview({ params, initial }: StoryPreview) {
   const { data } = useQuery<ISanityStoryDocument>(query(slug), params, {
     initial,
   });
-
+  data.content = data.content.map((item) => {
+    if (item && item.refData && item.refData.length) {
+      item = item.refData[0];
+    }
+    return item;
+  });
   return (
     <Story data={data!}>
       <PreviewCustomPortableText value={data!.content} />

next/next.config.js

@@ -1,4 +1,13 @@
+// const { createClient } = require("@sanity/client");
+
 /** @type {import('next').NextConfig} */
+// const client = createClient({
+//   projectId: "your-project-id",
+//   dataset: "production",
+//   useCdn: false,
+//   apiVersion: "2023-05-03", // use current date (YYYY-MM-DD) to target the latest API version
+//   // token: process.env.SANITY_SECRET_TOKEN // Only if you want to update content with the client
+// });
 const nextConfig = {
   eslint: {
     // Warning: This allows production builds to successfully complete even if
@@ -8,6 +17,9 @@ const nextConfig = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  experimental: {
+    taint: true,
+  },
 };
 
 module.exports = nextConfig;

sanity/schemas/documents/index.ts

@@ -7,6 +7,7 @@ import querySet from './query-set'
 import dynamicCta from './dynamic-cta'
 import bynderBlock from './bynder-block'
 import dataTable from './data-table'
+import redirect from './redirect'
 
 export default [
     story,
@@ -18,4 +19,5 @@ export default [
     dynamicCta,
     bynderBlock,
     dataTable,
+    redirect,
 ]

sanity/schemas/documents/redirect.ts

@@ -0,0 +1,25 @@
+import { defineType, defineField } from 'sanity'
+
+export default defineType({
+    name: 'redirect',
+    title: 'Redirect',
+    type: 'document',
+    description: 'Redirect for next.config.js',
+    fields: [
+        defineField({
+            name: 'source',
+            title: 'Source',
+            type: 'slug',
+        }),
+        defineField({
+            name: 'destination',
+            title: 'Destination',
+            type: 'slug',
+        }),
+        defineField({
+            name: 'permanent',
+            title: 'Permanent',
+            type: 'boolean',
+        }),
+    ],
+})