chore: update ssr example with refs []

contentful · Nov 21, 2024 · 58c3152 · 58c3152
1 parent ad3359c
commit 58c3152
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 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
@@ -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
@@ -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> {