Library items are working again

next.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   reactStrictMode: true,
   i18n: {
-    locales: ['en', 'fr', 'ja', 'pt-br', 'pt-pt'],
+    locales: ['en', 'fr', 'ja', 'es'],
     defaultLocale: 'en',
   },
   images: {

src/components/Chronology/ChronologyItem.tsx

@@ -1,51 +0,0 @@
-import styles from "styles/Chronology/ChronologyItemDisplay.module.css";
-import {
-    ChronologyItem,
-    ChronologyItemsEvent,
-  } from "queries/chronology/overview";
-
-
-export default function ChronologyItemDisplay(pageProps: ChronologyItem) {
-
-    function generateAnchor(year: number, month: number, day:number, event?: number): string {
-        let result: string = "";
-        result += year;
-        if (month) result += '-' + month;
-        if (day) result += '-' + day;
-        return result;
-    }
-
-    function generateDate(displayed_date: string, year: number, month: number, day:number) {
-        let result: string = "";
-        if (displayed_date) {
-            result += displayed_date;
-        } else {
-            result += year;
-        }
-        if (month) result += '/' + month;
-        if (day) result += '/' + day;
-        return result;
-    }
-
-  return (
-    <div id={generateAnchor(item.attributes.year, item.attributes.month, item.attributes.day)}>
-    <h2>{generateDate(item.attributes.displayed_date, item.attributes.year, item.attributes.month, item.attributes.day)}</h2>
-    {item.attributes.events.map((event: ChronologyItemsEvent) => (
-      <div key={"chronoEvent" + event.id}>
-        <h3>
-          {event.translations.length ? event.translations[0].title : ""}
-        </h3>
-        <p>
-          {event.translations.length
-            ? event.translations[0].description
-            : ""}
-          <em> {event.translations.length ? event.translations[0].note : ""}</em>
-        </p>
-        <p>
-          <em>{event.source.data ? event.source.data.attributes.name : ""}</em>
-        </p>
-      </div>
-    ))}
-  </div>
-  );
-}

src/components/Chronology/ChronologyItemComponent.tsx

@@ -2,7 +2,6 @@ import styles from "styles/Chronology/ChronologyItemComponent.module.css";
 import {
   ChronologyItem,
   ChronologyItemsEvent,
-  ChronologyItemsEventTranslation,
 } from "queries/chronology/overview";
 
 export type ChronologyItemComponentProps = {
@@ -54,7 +53,7 @@ export default function ChronologyItemComponent(
     if (month) {
       result += lut[month - 1];
       if (day) {
-        result += " " + day.toString().padStart(2, "0");
+        result += " " + day;
       }
     }
 
@@ -89,7 +88,7 @@ export default function ChronologyItemComponent(
         {props.item.attributes.events.map((event: ChronologyItemsEvent) => (
           <div className={styles.event} key={event.id}>
             {event.translations.map(
-              (translation: ChronologyItemsEventTranslation) => (
+              (translation) => (
                 <>
                   {translation.title ? <h3>{translation.title}</h3> : ""}
 
@@ -100,12 +99,15 @@ export default function ChronologyItemComponent(
                       }
                     >
                       {translation.description}
-                      
                     </p>
                   ) : (
                     ""
                   )}
-                  {translation.note ? <em>{"Notes: " + translation.note}</em> : ""}
+                  {translation.note ? (
+                    <em>{"Notes: " + translation.note}</em>
+                  ) : (
+                    ""
+                  )}
                 </>
               )
             )}
@@ -113,7 +115,7 @@ export default function ChronologyItemComponent(
             <p className={styles.source}>
               {event.source.data
                 ? "(" + event.source.data.attributes.name + ")"
-                : ""}
+                : "(WARNING: NO SOURCE!)"}
             </p>
           </div>
         ))}

src/components/Chronology/ChronologyYearComponent.tsx

@@ -1,21 +1,28 @@
 import styles from "styles/Chronology/ChronologyYearComponent.module.css";
-import {
+import { ChronologyItem } from "queries/chronology/overview";
-  ChronologyItem
-} from "queries/chronology/overview";
 import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
 
 type ChronologyYearComponentProps = {
   items: ChronologyItem[];
-}
+};
 
-export default function ChronologyYearComponent(props: ChronologyYearComponentProps) {
+export default function ChronologyYearComponent(
+  props: ChronologyYearComponentProps
+) {
   return (
-    <div className={styles.chronologyYear} id={props.items.length > 1 ? props.items[0].attributes.year.toString() : undefined}>
+    <div
+      className={styles.chronologyYear}
+      id={
+        props.items.length > 1
+          ? props.items[0].attributes.year.toString()
+          : undefined
+      }
+    >
       {props.items.map((item: ChronologyItem, index: number) => (
         <ChronologyItemComponent
           key={index}
           item={item}
-          displayYear={index===0}
+          displayYear={index === 0}
         />
       ))}
     </div>

src/pages/chronology/overview.tsx

@@ -3,7 +3,6 @@ import ContentPanel from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
 import ReturnButton from "components/Panels/ReturnButton";
 import NavOption from "components/Panels/NavOption";
-import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
 import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
 import {
   getChronologyItems,
@@ -20,12 +19,8 @@ type Props = {
 
 export default function ChronologyOverview(props: Props): JSX.Element {
 
-  let previousYear = -1;
-
-  let chronologyItemYearGroups: ChronologyItem[][] = [];
-
-
   // Group by year the Chronology items
+  let chronologyItemYearGroups: ChronologyItem[][] = [];
   props.chronologyItems.map((item: ChronologyItem) => {
     if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
       chronologyItemYearGroups[item.attributes.year] = [item];

src/pages/library/[...slug].tsx

@@ -1,15 +1,16 @@
 import { useRouter } from "next/router";
-import SubPanel from "components/Panels/SubPanel";
 import ContentPanel from "components/Panels/ContentPanel";
 import { getAssetURL } from "queries/helpers";
 import {
   getLibraryItem,
-  getRecursiveSlugs,
+  getBreadcrumbs,
+  getLibraryItemsSkeleton,
   LibraryItem,
-  Subitem,
+  LibrarySubItem
 } from "queries/library/[...slug]";
 import Image from "next/image";
 import Link from "next/link";
+import { GetStaticProps } from "next";
 
 type Props = {
   libraryItem: LibraryItem;
@@ -20,28 +21,33 @@ export default function Library(props: Props): JSX.Element {
   return (
     <>
       <ContentPanel>
-        <h1>{props.libraryItem.title}</h1>
+        <h1>{props.libraryItem.attributes.title}</h1>
-        <h2>{props.libraryItem.subtitle}</h2>
+        <h2>{props.libraryItem.attributes.subtitle}</h2>
         <Image
-          src={getAssetURL(props.libraryItem.thumbnail.id)}
+          src={getAssetURL(
-          alt={props.libraryItem.thumbnail.title}
+            props.libraryItem.attributes.thumbnail.data.attributes.url
-          width={props.libraryItem.thumbnail.width}
+          )}
-          height={props.libraryItem.thumbnail.height}
+          alt={
+            props.libraryItem.attributes.thumbnail.data.attributes
+              .alternativeText
+          }
+          width={props.libraryItem.attributes.thumbnail.data.attributes.width}
+          height={props.libraryItem.attributes.thumbnail.data.attributes.height}
         />
 
-        {props.libraryItem.subitems.map((subitem: Subitem) => (
+        {props.libraryItem.attributes.subitems.data.map((subitem: LibrarySubItem) => (
           <Link
-            href={router.asPath + "/" + subitem.subitem_id.slug}
+            href={router.asPath + "/" + subitem.attributes.slug}
-            key={subitem.subitem_id.id}
+            key={subitem.id}
             passHref
           >
             <div>
-              {subitem.subitem_id.thumbnail ? (
+              {subitem.attributes.thumbnail.data ? (
                 <Image
-                  src={getAssetURL(subitem.subitem_id.thumbnail.id)}
+                  src={getAssetURL(subitem.attributes.thumbnail.data.attributes.url)}
-                  alt={subitem.subitem_id.thumbnail.title}
+                  alt={subitem.attributes.thumbnail.data.attributes.alternativeText}
-                  width={subitem.subitem_id.thumbnail.width}
+                  width={subitem.attributes.thumbnail.data.attributes.width}
-                  height={subitem.subitem_id.thumbnail.height}
+                  height={subitem.attributes.thumbnail.data.attributes.height}
                 />
               ) : (
                 ""
@@ -49,27 +55,31 @@ export default function Library(props: Props): JSX.Element {
             </div>
           </Link>
         ))}
+
+        
       </ContentPanel>
     </>
   );
 }
 
-export async function getStaticProps({ params }) {
+export const getStaticProps: GetStaticProps = async (context) => {
+  console.log(context.params);
+  if (context.params && Array.isArray(context.params.slug) && context.locale) {
     return {
       props: {
-      libraryItem: await getLibraryItem(params.slug),
+        libraryItem: (await getLibraryItem(context.params.slug, context.locale)),
       },
     };
+  }
+  return {props: {}};
 }
 
 export async function getStaticPaths() {
-  const paths = await getAllSlugs();
+  const paths = (await getAllSlugs());
 
-  /*
   paths.map((item) => {
     console.log(item.params.slug);
   });
-  */
 
   return {
     paths,
@@ -78,11 +88,19 @@ export async function getStaticPaths() {
 }
 
 async function getAllSlugs() {
-  return (await getRecursiveSlugs()).map((item) => {
+  type Path = {
-    return {
     params: {
-        slug: item,
+      slug: string[];
-      },
+    }
-    };
+  }
-  });
+  
+  const data = (await getLibraryItemsSkeleton());
+  const paths:Path[] = [];
+  data.map((item) => {
+    const breadcrumbs = getBreadcrumbs([], item);
+    breadcrumbs.map((breadcrumb) => {
+      paths.push({params: {slug: breadcrumb}})
+    })
+  })
+ return paths;
 }

src/pages/library/index.tsx

@@ -2,7 +2,7 @@ import { GetStaticProps } from "next";
 import SubPanel from "components/Panels/SubPanel";
 import ContentPanel from "components/Panels/ContentPanel";
 import { LibraryItem, getLibraryItems } from "queries/library/index";
-import { getAssetURL } from "queries/helpers";
+import { BasicDate, getAssetURL } from "queries/helpers";
 import Image from "next/image";
 import Link from "next/link";
 
@@ -26,25 +26,19 @@ export default function Library(props: Props): JSX.Element {
 
       <ContentPanel>
         {props.libraryItems.map((item: LibraryItem) => (
-          <Link href={"/library/" + item.slug} key={item.id} passHref>
+          <Link href={"/library/" + item.attributes.slug} key={item.id} passHref>
             <div>
               <p>
-                {item.subitem_of.length > 0
+                {prettyTitleSubtitle(item.attributes.title, item.attributes.subtitle)}
-                  ? prettyTitleSubtitle(
-                      item.subitem_of[0].item_id.title,
-                      item.subitem_of[0].item_id.subtitle
-                    ) + " • "
-                  : ""}
-                {prettyTitleSubtitle(item.title, item.subtitle)}
               </p>
-              <p>{item.release_date}</p>
+              <p>{prettyDate(item.attributes.release_date)}</p>
 
-              {item.thumbnail ? (
+              {item.attributes.thumbnail.data ? (
                 <Image
-                  src={getAssetURL(item.thumbnail.id)}
+                  src={getAssetURL(item.attributes.thumbnail.data.attributes.url)}
-                  alt={item.thumbnail.title}
+                  alt={item.attributes.thumbnail.data.attributes.alternativeText}
-                  width={item.thumbnail.width}
+                  width={item.attributes.thumbnail.data.attributes.width}
-                  height={item.thumbnail.height}
+                  height={item.attributes.thumbnail.data.attributes.height}
                 />
               ) : (
                 ""
@@ -60,7 +54,7 @@ export default function Library(props: Props): JSX.Element {
 export const getStaticProps: GetStaticProps = async (context) => {
   return {
     props: {
-      libraryItems: await getLibraryItems(),
+      libraryItems: await getLibraryItems(context.locale),
     },
   };
 };
@@ -70,3 +64,7 @@ function prettyTitleSubtitle(title: string, subtitle: string): string {
   if (subtitle !== null) result += " - " + subtitle;
   return result;
 }
+
+function prettyDate(date: BasicDate): string {
+  return date.year + "/" + date.month + "/" + date.day;
+}

src/queries/chronology/overview.ts

@@ -1,41 +1,30 @@
 import { queryGraphQL } from "queries/helpers";
+import { Source } from "queries/helpers";
 
 export type ChronologyItem = {
   id: string;
-  attributes: ChronologyItemAttributes;
+  attributes: {
-};
-
-export type ChronologyItemAttributes = {
     year: number;
     month: number;
     day: number;
     displayed_date: string;
     events: ChronologyItemsEvent[];
-}
+  };
+};
 
 export type ChronologyItemsEvent = {
   id: string;
-  source: Source
+  source: Source;
-  translations: ChronologyItemsEventTranslation[];
+  translations: {
-};
-
-export type ChronologyItemsEventTranslation = {
     title: string;
     description: string;
     note: string;
     status: string;
-}
+  }[];
-
+};
-export type Source = {
-  data: {
-    attributes: {
-      name: string;
-    }
-  }
-}
 
 export async function getChronologyItems(
-  language_code: String | undefined
+  language_code: string | undefined
 ): Promise<ChronologyItem[]> {
   return (
     await queryGraphQL(
@@ -58,7 +47,7 @@ export async function getChronologyItems(
                     }
                   }
                 }
-                translations(filters: { language: { code: { eq: "` + language_code + `" } } }) {
+                translations(filters: { language: { code: { eq: "${language_code}" } } }) {
                   title
                   description
                   note
@@ -84,14 +73,14 @@ export type ChronologyEraAttributes = {
   starting_year: number;
   ending_year: number;
   title: ChronologyEraTranslation[];
-}
+};
 
 export type ChronologyEraTranslation = {
   title: string;
 };
 
 export async function getChronologyEras(
-  language_code: String | undefined
+  language_code: string | undefined
 ): Promise<ChronologyEra[]> {
   return (
     await queryGraphQL(
@@ -104,7 +93,7 @@ export async function getChronologyEras(
               slug
               starting_year
               ending_year
-              title (filters: {language: {code: {eq: "` + language_code + `"}}}){
+              title (filters: {language: {code: {eq: "${language_code}"}}}){
                 title
               }
             }

src/queries/helpers.ts

@@ -1,16 +1,3 @@
-/*
-export const queryGraphQL = async (query: string) => {
-  const res = await fetch(
-    process.env.URL_GRAPHQL +
-      "?access_token=" +
-      process.env.ACCESS_TOKEN +
-      "&query=" +
-      query
-  );
-  return (await res.json()).data;
-};
-*/
-
 export const queryGraphQL = async (query: String) => {
   const res = await fetch(process.env.URL_GRAPHQL, {
     method: "POST",
@@ -25,7 +12,6 @@ export const queryGraphQL = async (query: String) => {
   return (await res.json()).data;
 };
 
-
 export const queryGraphQLSystem = async (query: string) => {
   const res = await fetch(
     process.env.URL_GRAPHQL_SYSTEM +
@@ -37,13 +23,53 @@ export const queryGraphQLSystem = async (query: string) => {
   return (await res.json()).data;
 };
 
-export type AssetImage = {
+export function getAssetURL(url: string): string {
-  id: string;
+  return process.env.NEXT_PUBLIC_URL_CMS + url;
-  title: string;
+}
-  width: number;
+
-  height: number;
+export type Source = {
+  data: {
+    attributes: {
+      name: string;
+    };
+  };
 };
 
-export function getAssetURL(id: string): string {
+export type UploadImage = {
-  return "https://cms.accords-library.com/assets/" + id;
+  data: {
-}
+    attributes: {
+      name: string;
+      alternativeText: string;
+      caption: string;
+      width: number;
+      height: number;
+      url: string;
+    };
+  };
+};
+
+export type BasicPrice = {
+  amount: number;
+  currency: BasicCurrency;
+};
+
+export type BasicCurrency = {
+  data: {
+    attributes: {
+      symbol: string;
+      code: string;
+    };
+  };
+};
+
+export type BasicSize = {
+  width: number;
+  height: number;
+  thickness: number;
+};
+
+export type BasicDate = {
+  year: number;
+  month: number;
+  day: number;
+};

src/queries/library/[...slug].ts

@@ -1,51 +1,45 @@
-import { queryGraphQL, AssetImage } from "queries/helpers";
+import { BasicDate, BasicPrice, BasicSize, queryGraphQL, UploadImage } from "queries/helpers";
 
-export type LibraryItem = {
+export type LibraryItemSkeleton = {
-  title: string;
+  attributes: {
-  subtitle: string;
     slug: string;
-  thumbnail: AssetImage;
+    subitems: { 
-  subitems: Subitem[];
+      data: LibraryItemSkeleton[];
+    };
+  };
 };
 
-export type Subitem = {
+export async function getLibraryItemsSkeleton(): Promise<
-  subitem_id: LibrarySubitem;
+  LibraryItemSkeleton[]
-};
+> {
-
-export type LibrarySubitem = {
-  id: string;
-  title: string;
-  subtitle: string;
-  slug: string;
-  thumbnail: AssetImage;
-};
-
-export async function getLibraryItem(slug: string[]) {
   return (
     await queryGraphQL(
       `
       {
-        compendium_items(filter: {_and: [` + getFilterForItem(slug) + `]}) {
+        libraryItems(filters: { root_item: { eq: true } }) {
-          title
+          data {
-          subtitle
+            attributes {
               slug
-          thumbnail {
-            id
-            title
-            width
-            height
-          }
               subitems {
-            subitem_id {
+                data {
-              id
+                  attributes {
-              title
-              subtitle
                     slug
-              thumbnail {
+                    subitems {
-                id
+                      data {
-                title
+                        attributes {
-                width
+                          slug
-                height
+                          subitems {
+                            data {
+                              attributes {
+                                slug
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
               }
             }
           }
@@ -53,118 +47,133 @@ export async function getLibraryItem(slug: string[]) {
       }
       `
     )
-  ).compendium_items[0];
+  ).libraryItems.data;
 }
 
-export async function getRecursiveSlugs() {
+export function getBreadcrumbs(
-  const yetToExploreSlugs = level0Filtering(
+  parentBreadcrumb: string[],
-    (
+  data: LibraryItemSkeleton
+) {
+  const result: string[][] = [];
+  const itemBreadcrumb = [...parentBreadcrumb, data.attributes.slug];
+  result.push(itemBreadcrumb);
+  data.attributes.subitems.data.map((subitem) => {
+    result.push(...getBreadcrumbs(itemBreadcrumb, subitem));
+  });
+  return result;
+}
+
+
+export type LibraryItem = {
+  id: string;
+  attributes: {
+    title: string;
+    subtitle: string;
+    slug: string;
+    thumbnail: UploadImage;
+    release_date: BasicDate;
+    price: BasicPrice;
+    size: BasicSize;
+    description: {
+      description: string;
+    };
+    subitems: {
+      data: LibrarySubItem[];
+    };
+  };
+};
+
+export type LibrarySubItem = {
+  id: string;
+  attributes: {
+    title: string;
+    subtitle: string;
+    slug: string;
+    thumbnail: UploadImage;
+  }
+}
+
+export async function getLibraryItem(
+  slug: string[],
+  language_code: string | undefined
+): Promise<LibraryItem> {
+ 
+  return (
     await queryGraphQL(
       `
       {
-      compendium_items(
+        libraryItems(
-        filter: { _and: [{ not_sold_separately: { _eq: false } }] }
+          filters: {slug: {eq: "${slug.pop()}"}}
         ) {
-        subitem_of {
+          data {
-          item_id {
+            id
-            virtual_set
+            attributes {
-          }
+              title
-        }
+              subtitle
               slug
+              thumbnail {
+                data {
+                  attributes {
+                    name
+                    alternativeText
+                    caption
+                    width
+                    height
+                    url
+                  }
+                }
+              }
+              release_date {
+                year
+                month
+                day
+              }
+              price {
+                amount
+                currency {
+                  data {
+                    attributes {
+                      symbol
+                      code
+                    }
+                  }
+                }
+              }
+              size {
+                width
+                height
+                thickness
+              }
+              descriptions(filters: { language: { code: { eq: "${language_code}" } } }) {
+                description
+              }
+              subitems {
+                data {
+                  id
+                  attributes {
+                    slug
+                    title
+                    subtitle
+                    thumbnail {
+                      data {
+                        attributes {
+                          name
+                          alternativeText
+                          caption
+                          width
+                          height
+                          url
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
         }
       }
       `
     )
-    ).compendium_items
+  ).libraryItems.data[0];
-  );
-
-  const result: string[][] = [];
-  while (yetToExploreSlugs.length > 0) {
-    const slug = yetToExploreSlugs.pop();
-    if (slug !== undefined) {
-      const subitems = levelnFiltering((await queryGraphQL(
-          `
-          {
-            compendium_items(filter: {_and: [` + getFilterForSubitemsOf(slug) + `]}) {
-              slug
-            }
-          }
-          `
-          )
-        ).compendium_items
-      );
-      result.push(slug);
-      subitems.map((subitemSlug) => {
-        const newSlug = [...slug];
-        newSlug.push(subitemSlug);
-        yetToExploreSlugs.push(newSlug);
-      });
-    }
-  }
-  return result;
 }
-
-export function getFilterForSubitemsOf(slug: string[]) {
-  let filter = "";
-  slug.map((segment, index) => {
-    const depth = slug.length - index;
-    filter += "{ subitem_of: { item_id: ".repeat(depth);
-    filter += '{ slug: { _eq: "' + segment + '" } } ';
-    filter += "} } ".repeat(depth);
-    filter += ",";
-  });
-  return filter;
-}
-
-export function getFilterForItem(slug: string[]) {
-  let filter = "";
-  slug.map((segment, index) => {
-    const depth = slug.length - index - 1;
-    filter += "{ subitem_of: { item_id: ".repeat(depth);
-    filter += '{ slug: { _eq: "' + segment + '" } } ';
-    filter += "} } ".repeat(depth);
-    filter += ",";
-  });
-  return filter;
-}
-
-
-function level0Filtering(data: SlugLvl0[]): string[][] {
-  // Remove element if their parent item is a virtual_set
-  let result: string[][] = [];
-  data.map((item: SlugLvl0) => {
-    if (item.subitem_of.length > 0) {
-      if (item.subitem_of[0].item_id.virtual_set === false) {
-        result.push([item.slug]);
-      }
-    } else {
-      result.push([item.slug]);
-    }
-  });
-  return result;
-}
-
-function levelnFiltering(data: SlugLvln[]): string[] {
-  let result: string[] = [];
-  data.map((item: SlugLvln) => {
-    result.push(item.slug);
-  });
-  return result;
-}
-
-type SlugLvl0 = {
-  subitem_of: SlugLvl0Subitem_of[];
-  slug: string;
-};
-
-type SlugLvl0Subitem_of = {
-  item_id: SlugLvl0Subitem;
-};
-
-type SlugLvl0Subitem = {
-  virtual_set: boolean;
-};
-
-type SlugLvln = {
-  slug: string;
-};

src/queries/library/index.ts

@@ -1,72 +1,80 @@
-import { queryGraphQL, AssetImage } from "queries/helpers";
+import { UploadImage, queryGraphQL, BasicPrice, BasicDate, BasicSize } from "queries/helpers";
 
 export type LibraryItem = {
   id: string;
-  subitem_of: Subitem_of[];
+  attributes: {
     title: string;
     subtitle: string;
     slug: string;
-  thumbnail: AssetImage;
+    thumbnail: UploadImage;
-  release_date: string;
+    release_date: BasicDate;
-  type: "Text" | "Video" | "Games" | "Soundtrack" | "Audiobooks" | "Other";
+    price: BasicPrice;
+    size: BasicSize;
+    description: {
+      description: string;
+    };
+  };
 };
 
-export type Subitem_of = {
+export async function getLibraryItems(
-  item_id: LibrarySubitem;
+  language_code: string | undefined
-};
+): Promise<LibraryItem[]> {
-
+  return (
-export type LibrarySubitem = {
+    await queryGraphQL(
-  title: string;
-  subtitle: string;
-  virtual_set: boolean;
-};
-
-export async function getLibraryItems() {
-    return filterGetLibraryItems((await queryGraphQL(
       `
       {
-        compendium_items(
+        libraryItems(
-          filter: { _and: [{ not_sold_separately: { _eq: false } }] }
+          filters: { root_item: { eq: true } }
-          sort: "title"
+          pagination: { limit: -1 }
+          sort: ["slug:asc"]
         ) {
+          data {
             id
-          subitem_of {
+            attributes {
-            item_id {
-              title
-              subtitle
-              virtual_set
-            }
-          }
               title
               subtitle
               slug
               thumbnail {
-            id
+                data {
-            title
+                  attributes {
+                    name
+                    alternativeText
+                    caption
                     width
                     height
+                    url
+                  }
+                }
+              }
+              release_date {
+                year
+                month
+                day
+              }
+              price {
+                amount
+                currency {
+                  data {
+                    attributes {
+                      symbol
+                      code
+                    }
+                  }
+                }
+              }
+              size {
+                width
+                height
+                thickness
+              }
+              descriptions(filters: { language: { code: { eq: "${language_code}" } } }) {
+                description
+              }
+            }
           }
-          release_date
-          type
         }
       }
       `
     )
-  ).compendium_items);
+  ).libraryItems.data;
-}
-
-function filterGetLibraryItems(data: LibraryItem[]): LibraryItem[] {
-
-  // Remove element if their parent item is a virtual_set
-  let result: LibraryItem[] = [];
-  data.map((item: LibraryItem) => {
-    if (item.subitem_of.length > 0) {
-      if (item.subitem_of[0].item_id.virtual_set === false) {
-        result.push(item);
-      }
-    } else {
-      result.push(item);
-    }
-  });
-  return result;
 }