From 58c3152faafaf5b9e5445608af4a42662ae8dbd7 Mon Sep 17 00:00:00 2001
From: Kudakwashe Mupeni <terrencemupeni@gmail.com>
Date: Thu, 21 Nov 2024 10:52:13 +0100
Subject: [PATCH] chore: update ssr example with refs []

---
 .../app/components/post-layout.tsx            | 11 +++++++
 .../next-app-router-ssr/lib/api-graphql.ts    | 30 ++++++++++++++-----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/examples/next-app-router-ssr/app/components/post-layout.tsx b/examples/next-app-router-ssr/app/components/post-layout.tsx
index 90e20693..e498da97 100644
--- a/examples/next-app-router-ssr/app/components/post-layout.tsx
+++ b/examples/next-app-router-ssr/app/components/post-layout.tsx
@@ -22,6 +22,17 @@ export default function PostLayout({ post }: { post: Post }) {
       >
         {post.description}
       </p>
+      {post.banner && (
+        <img
+          {...ContentfulLivePreview.getProps({
+            entryId: post.banner.sys.id,
+            fieldId: 'title',
+            locale: 'en-US',
+          })}
+          alt={post.banner.title}
+          src={post.banner.file.url}
+        />
+      )}
     </>
   );
 }
diff --git a/examples/next-app-router-ssr/lib/api-graphql.ts b/examples/next-app-router-ssr/lib/api-graphql.ts
index d6d5349b..4080e666 100644
--- a/examples/next-app-router-ssr/lib/api-graphql.ts
+++ b/examples/next-app-router-ssr/lib/api-graphql.ts
@@ -8,6 +8,13 @@ export interface Post {
   slug: string;
   title: string;
   description: string;
+  banner: {
+    sys: Sys;
+    title: string;
+    file: {
+      url: string;
+    };
+  };
 }
 
 interface PostCollection {
@@ -21,13 +28,22 @@ interface FetchResponse {
 }
 
 const POST_GRAPHQL_FIELDS = `
-__typename
-sys {
-  id
-}
-slug
-title
-description
+  __typename
+  sys {
+    id
+  }
+  slug
+  title
+  description
+  banner {
+    sys {
+      id
+    }
+    title
+    file {
+      url
+    }
+  }
 `;
 
 async function fetchGraphQL(query: string, draftMode = false): Promise<FetchResponse> {