feat: implement accordion content type

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

lib/shopify/index.ts

@@ -28,7 +28,7 @@ import {
   getCollectionsQuery
 } from './queries/collection';
 import { getMenuQuery } from './queries/menu';
-import { getMetaobjectsQuery } from './queries/metaobject';
+import { getMetaobjectQuery, getMetaobjectsQuery } from './queries/metaobject';
 import { getImageQuery, getMetaobjectsByIdsQuery } from './queries/node';
 import { getPageQuery, getPagesQuery } from './queries/page';
 import {
@@ -45,10 +45,8 @@ import {
   Menu,
   Metaobject,
   Money,
-  PAGE_TYPES,
   Page,
   PageInfo,
-  PageMetafield,
   Product,
   ProductVariant,
   ShopifyAddToCartOperation,
@@ -63,8 +61,8 @@ import {
   ShopifyImageOperation,
   ShopifyMenuOperation,
   ShopifyMetaobject,
-  ShopifyMetaobjectOperation,
   ShopifyMetaobjectsOperation,
+  ShopifyPage,
   ShopifyPageOperation,
   ShopifyPagesOperation,
   ShopifyProduct,
@@ -238,7 +236,7 @@ const reshapeFilters = (filters: ShopifyFilter[]): Filter[] => {
 };
 
 const reshapeMetaobjects = (metaobjects: ShopifyMetaobject[]): Metaobject[] => {
-  return metaobjects.map(({ fields, id }) => {
+  return metaobjects.map(({ fields, id, type }) => {
     const groupedFieldsByKey = fields.reduce(
       (acc, field) => {
         return {
@@ -256,7 +254,7 @@ const reshapeMetaobjects = (metaobjects: ShopifyMetaobject[]): Metaobject[] => {
       }
     );
 
-    return { id, ...groupedFieldsByKey };
+    return { id, type, ...groupedFieldsByKey };
   });
 };
 
@@ -498,7 +496,10 @@ export async function getMetaobjects(type: string) {
 export async function getMetaobjectsByIds(ids: string[]) {
   if (!ids.length) return [];
 
-  const res = await shopifyFetch<ShopifyMetaobjectOperation>({
+  const res = await shopifyFetch<{
+    data: { nodes: ShopifyMetaobject[] };
+    variables: { ids: string[] };
+  }>({
     query: getMetaobjectsByIdsQuery,
     variables: { ids }
   });
@@ -506,31 +507,39 @@ export async function getMetaobjectsByIds(ids: string[]) {
   return reshapeMetaobjects(res.body.data.nodes);
 }
 
-export async function getPageMetaObjects(metafield: PageMetafield) {
-  let metaobjectIds = parseMetaFieldValue<string | string[]>(metafield) || metafield.value;
+export async function getMetaobjectById(id: string) {
+  const res = await shopifyFetch<{
+    data: { metaobject: ShopifyMetaobject };
+    variables: { id: string };
+  }>({
+    query: getMetaobjectQuery,
+    variables: { id }
+  });
 
-  if (!metaobjectIds) {
-    return null;
-  }
-
-  metaobjectIds = (Array.isArray(metaobjectIds) ? metaobjectIds : [metaobjectIds]) as string[];
-
-  const metaobjects = await getMetaobjectsByIds(metaobjectIds);
-
-  return { metaobjects, id: metafield.id, key: metafield.key };
+  return res.body.data.metaobject ? reshapeMetaobjects([res.body.data.metaobject])[0] : null;
 }
 
 export async function getPage(handle: string): Promise<Page> {
-  const metafieldIdentifiers = PAGE_TYPES.map((key) => ({ key, namespace: 'custom' }));
   const res = await shopifyFetch<ShopifyPageOperation>({
     query: getPageQuery,
-    variables: { handle, metafieldIdentifiers }
+    variables: { handle, key: 'page_content', namespace: 'custom' }
   });
 
-  return res.body.data.pageByHandle;
+  const page = res.body.data.pageByHandle;
+
+  if (page.metafield) {
+    const metaobjectIds = parseMetaFieldValue<string[]>(page.metafield) || [];
+
+    const metaobjects = await getMetaobjectsByIds(metaobjectIds);
+
+    const { metafield, ...restPage } = page;
+    return { ...restPage, metaobjects };
+  }
+
+  return page;
 }
 
-export async function getPages(): Promise<Page[]> {
+export async function getPages(): Promise<ShopifyPage[]> {
   const res = await shopifyFetch<ShopifyPagesOperation>({
     query: getPagesQuery
   });

lib/shopify/queries/metaobject.ts

@@ -18,3 +18,21 @@ export const getMetaobjectsQuery = /* GraphQL */ `
     }
   }
 `;
+
+export const getMetaobjectQuery = /* GraphQL */ `
+  query getMetaobject($id: ID!) {
+    metaobject(id: $id) {
+      id
+      type
+      fields {
+        reference {
+          ... on Metaobject {
+            id
+          }
+        }
+        key
+        value
+      }
+    }
+  }
+`;

lib/shopify/queries/node.ts

@@ -18,6 +18,7 @@ export const getMetaobjectsByIdsQuery = /* GraphQL */ `
     nodes(ids: $ids) {
       ... on Metaobject {
         id
+        type
         fields {
           reference {
             ... on Metaobject {

lib/shopify/queries/page.ts

@@ -19,12 +19,11 @@ const pageFragment = /* GraphQL */ `
 `;
 
 export const getPageQuery = /* GraphQL */ `
-  query getPage($handle: String!, $metafieldIdentifiers: [HasMetafieldsIdentifier!]!) {
+  query getPage($handle: String!, $key: String!, $namespace: String) {
     pageByHandle(handle: $handle) {
       ...page
-      metafields(identifiers: $metafieldIdentifiers) {
+      metafield(key: $key, namespace: $namespace) {
         value
-        key
         id
       }
     }

lib/shopify/types.ts

@@ -53,14 +53,13 @@ export type Money = {
 
 export type PageMetafield = {
   id: string;
-  key: PageMetafieldKey;
   value: string;
 };
 
-export const PAGE_TYPES = ['page_icon_section', 'page_section', 'page_image_content'] as const;
-export type PageMetafieldKey = (typeof PAGE_TYPES)[number];
+export const PAGE_TYPES = ['image', 'icon_content_section', 'page_section', 'accordion'] as const;
+export type PageType = (typeof PAGE_TYPES)[number];
 
-export type Page = {
+export type ShopifyPage = {
   id: string;
   title: string;
   handle: string;
@@ -69,16 +68,15 @@ export type Page = {
   seo?: SEO;
   createdAt: string;
   updatedAt: string;
-  metafields: PageMetafield[];
+  metafield: PageMetafield | null;
 };
 
-export type MetafieldIdentifier = {
-  key: string;
-  namespace: string;
+export type Page = Omit<ShopifyPage, 'metafield'> & {
+  metaobjects?: Metaobject[];
 };
-
 export type ShopifyMetaobject = {
   id: string;
+  type: string;
   fields: Array<{
     key: string;
     value: string;
@@ -90,6 +88,7 @@ export type ShopifyMetaobject = {
 
 export type Metaobject = {
   id: string;
+  type: string;
   [key: string]: string;
 };
 
@@ -296,8 +295,8 @@ export type ShopifyMenuOperation = {
 };
 
 export type ShopifyPageOperation = {
-  data: { pageByHandle: Page };
-  variables: { handle: string; metafieldIdentifiers: MetafieldIdentifier[] };
+  data: { pageByHandle: ShopifyPage };
+  variables: { handle: string; key: string; namespace: string };
 };
 
 export type ShopifyImageOperation = {
@@ -312,7 +311,7 @@ export type ShopifyMetaobjectsOperation = {
 
 export type ShopifyPagesOperation = {
   data: {
-    pages: Connection<Page>;
+    pages: Connection<ShopifyPage>;
   };
 };
 
@@ -389,12 +388,6 @@ export type Filter = {
   }[];
 };
 
-export type PageContent = {
-  id: string;
-  key: PageMetafieldKey;
-  metaobjects: Metaobject[];
-};
-
 export const SCREEN_SIZES = ['small', 'medium', 'large', 'extra_large'] as const;
 
 export type ScreenSize = (typeof SCREEN_SIZES)[number];