refactor(core): blog fragment colocation

bigcommerce · May 2, 2024 · 32d3a53 · 32d3a53
1 parent dfd5b25
commit 32d3a53
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 87 deletions.
diff --git a/apps/core/components/sharing-links/index.tsx → ...og/[blogId]/_components/sharing-links.tsx b/apps/core/components/sharing-links/index.tsx → ...og/[blogId]/_components/sharing-links.tsx
@@ -3,22 +3,32 @@
 import { SiFacebook, SiLinkedin, SiPinterest, SiX } from '@icons-pack/react-simple-icons';
 import { Mail, Printer } from 'lucide-react';
 
-interface SharingLinksProps {
-  blogPostId: string;
-  blogPostImageUrl?: string;
-  blogPostTitle?: string;
+import { FragmentOf, graphql } from '~/client/graphql';
+
+import { SEOFragments } from '../page-data';
+
+export const SharingLinksFragment = graphql(
+  `
+    fragment SharingLinksFragment on BlogPost {
+      entityId
+      thumbnailImage {
+        altText
+        url: urlTemplate
+      }
+      ...SEOFragments
+    }
+  `,
+  [SEOFragments],
+);
+
+interface Props {
+  blogPost: FragmentOf<typeof SharingLinksFragment>;
   vanityUrl?: string;
 }
 
-export const SharingLinks = ({
-  blogPostId,
-  /* TODO: use default image */
-  blogPostImageUrl = '',
-  blogPostTitle = '',
-  vanityUrl = '',
-}: SharingLinksProps) => {
-  const encodedTitle = encodeURIComponent(blogPostTitle);
-  const encodedUrl = encodeURIComponent(`${vanityUrl}/blog/${blogPostId}/`);
+export const SharingLinks = ({ blogPost, vanityUrl = '' }: Props) => {
+  const encodedTitle = encodeURIComponent(blogPost.seo.pageTitle);
+  const encodedUrl = encodeURIComponent(`${vanityUrl}/blog/${blogPost.entityId}/`);
 
   return (
     <div className="mb-10 flex items-center [&>*:not(:last-child)]:me-2.5">
@@ -72,7 +82,7 @@ export const SharingLinks = ({
       </a>
       <a
         className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
-        href={`https://pinterest.com/pin/create/button/?url=${encodedUrl}&media=${blogPostImageUrl}&description=${encodedTitle}`}
+        href={`https://pinterest.com/pin/create/button/?url=${encodedUrl}&media=${blogPost.thumbnailImage?.url || ''}&description=${encodedTitle}`}
         rel="noopener noreferrer"
         target="_blank"
       >

diff --git a/apps/core/app/[locale]/(default)/blog/[blogId]/page-data.ts b/apps/core/app/[locale]/(default)/blog/[blogId]/page-data.ts
@@ -0,0 +1,73 @@
+import { cache } from 'react';
+
+import { client } from '~/client';
+import { graphql } from '~/client/graphql';
+import { revalidate } from '~/client/revalidate-target';
+
+export const SEOFragments = graphql(`
+  fragment SEOFragments on BlogPost {
+    seo {
+      metaKeywords
+      metaDescription
+      pageTitle
+    }
+  }
+`);
+
+const BlogPostPageQuery = graphql(
+  `
+    query BlogPostPageQuery($entityId: Int!) {
+      site {
+        content {
+          blog {
+            isVisibleInNavigation
+            post(entityId: $entityId) {
+              entityId
+              author
+              htmlBody
+              id
+              name
+              publishedDate {
+                utc
+              }
+              tags
+              thumbnailImage {
+                altText
+                url: urlTemplate
+              }
+              ...SEOFragments
+            }
+          }
+        }
+        settings {
+          url {
+            vanityUrl
+          }
+        }
+      }
+    }
+  `,
+  [SEOFragments],
+);
+
+export const getBlogPost = cache(async ({ entityId }: { entityId: number }) => {
+  const response = await client.fetch({
+    document: BlogPostPageQuery,
+    variables: { entityId },
+    fetchOptions: { next: { revalidate } },
+  });
+
+  const { blog } = response.data.site.content;
+
+  if (!blog?.post) {
+    return null;
+  }
+
+  const { isVisibleInNavigation, post } = blog;
+
+  return {
+    ...post,
+    isVisibleInNavigation,
+    vanityUrl: response.data.site.settings?.url.vanityUrl,
+  };
+});
diff --git a/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx b/apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx
@@ -2,10 +2,8 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getFormatter } from 'next-intl/server';
 
-import { getBlogPost } from '~/client/queries/get-blog-post';
 import { BcImage } from '~/components/bc-image';
 import { Link } from '~/components/link';
-import { SharingLinks } from '~/components/sharing-links';
 import {
   BlogPostAuthor,
   BlogPostBanner,
@@ -16,6 +14,9 @@ import {
 import { Tag, TagContent } from '~/components/ui/tag';
 import { LocaleType } from '~/i18n';
 
+import { SharingLinks } from './_components/sharing-links';
+import { getBlogPost } from './page-data';
+
 interface Props {
   params: {
     blogId: string;
@@ -24,7 +25,7 @@ interface Props {
 }
 
 export async function generateMetadata({ params: { blogId } }: Props): Promise<Metadata> {
-  const blogPost = await getBlogPost(+blogId);
+  const blogPost = await getBlogPost({ entityId: Number(blogId) });
 
   const title = blogPost?.seo.pageTitle ?? 'Blog';
 
@@ -35,7 +36,8 @@ export async function generateMetadata({ params: { blogId } }: Props): Promise<M
 
 export default async function BlogPostPage({ params: { blogId, locale } }: Props) {
   const format = await getFormatter({ locale });
-  const blogPost = await getBlogPost(+blogId);
+
+  const blogPost = await getBlogPost({ entityId: Number(blogId) });
 
   if (!blogPost || !blogPost.isVisibleInNavigation) {
     return notFound();
@@ -85,12 +87,7 @@ export default async function BlogPostPage({ params: { blogId, locale } }: Props
           </Link>
         ))}
       </div>
-      <SharingLinks
-        blogPostId={blogId}
-        blogPostImageUrl={blogPost.thumbnailImage?.url}
-        blogPostTitle={blogPost.seo.pageTitle}
-        vanityUrl={blogPost.vanityUrl}
-      />
+      <SharingLinks blogPost={blogPost} vanityUrl={blogPost.vanityUrl} />
     </div>
   );
 }

diff --git a/apps/core/client/queries/get-blog-post.ts b/apps/core/client/queries/get-blog-post.ts