Simplified the GraphQL Query system

src/components/Chronology/ChronologyItemComponent.tsx

@@ -1,8 +1,8 @@
-import { ChronologyItemEntity, Maybe } from "graphql/operations-types";
+import { GetChronologyItemsQuery } from "graphql/operations-types";
 import styles from "styles/Chronology/ChronologyItemComponent.module.css";
 
 export type ChronologyItemComponentProps = {
-  item: ChronologyItemEntity;
+  item: GetChronologyItemsQuery['chronologyItems']['data'][number];
   displayYear: boolean;
 };
 
@@ -11,8 +11,9 @@ export default function ChronologyItemComponent(
 ): JSX.Element {
   function generateAnchor(
     year: number,
-    month: Maybe<number> | undefined,
+    month: number,
-    day: Maybe<number> | undefined
+    day: number,
+    event?: number
   ): string {
     let result: string = "";
     result += year;
@@ -21,10 +22,7 @@ export default function ChronologyItemComponent(
     return result;
   }
 
-  function generateYear(
+  function generateYear(displayed_date: string, year: number): string {
-    displayed_date: Maybe<string> | undefined,
-    year: number
-  ): string {
     if (displayed_date) {
       return displayed_date;
     } else {
@@ -32,10 +30,7 @@ export default function ChronologyItemComponent(
     }
   }
 
-  function generateDate(
+  function generateDate(month: number, day: number): string {
-    month: Maybe<number> | undefined,
-    day: Maybe<number> | undefined
-  ): string {
     let lut = [
       "Jan",
       "Feb",
@@ -62,7 +57,6 @@ export default function ChronologyItemComponent(
     return result;
   }
 
-  if (props.item && props.item.attributes) {
   return (
     <div
       className={styles.chronologyItem}
@@ -88,27 +82,16 @@ export default function ChronologyItemComponent(
       </p>
 
       <div className={styles.events}>
-          {props.item.attributes.events?.map((event) => {
+        {props.item.attributes.events.map((event) => (
-            if (event) {
-              return (
           <div className={styles.event} key={event.id}>
-                  {event.translations?.map((translation) => {
+            {event.translations.map((translation) => (
-                    if (translation)
-                      return (
               <>
-                          {translation.title ? (
+                {translation.title ? <h3>{translation.title}</h3> : ""}
-                            <h3>{translation.title}</h3>
-                          ) : (
-                            ""
-                          )}
 
                 {translation.description ? (
                   <p
                     className={
-                                event.translations &&
+                      event.translations.length > 1 ? styles.bulletItem : ""
-                                event.translations.length > 1
-                                  ? styles.bulletItem
-                                  : ""
                     }
                   >
                     {translation.description}
@@ -122,24 +105,16 @@ export default function ChronologyItemComponent(
                   ""
                 )}
               </>
-                      );
+            ))}
-                  })}
 
             <p className={styles.source}>
-                    {event.source &&
+              {event.source.data
-                    event.source.data &&
-                    event.source.data.attributes
                 ? "(" + event.source.data.attributes.name + ")"
                 : "(WARNING: NO SOURCE!)"}
             </p>
           </div>
-              );
+        ))}
-            }
-          })}
       </div>
     </div>
   );
-  } else {
-    return <></>;
-  }
 }

src/components/Chronology/ChronologyYearComponent.tsx

@@ -1,10 +1,10 @@
 import styles from "styles/Chronology/ChronologyYearComponent.module.css";
 import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent";
-import { ChronologyItemEntity } from "graphql/operations-types";
+import { GetChronologyItemsQuery } from "graphql/operations-types";
 
 type ChronologyYearComponentProps = {
   year: number;
-  items: ChronologyItemEntity[];
+  items: GetChronologyItemsQuery["chronologyItems"]["data"][number][];
 };
 
 export default function ChronologyYearComponent(
@@ -15,7 +15,7 @@ export default function ChronologyYearComponent(
       className={styles.chronologyYear}
       id={props.items.length > 1 ? props.year.toString() : undefined}
     >
-      {props.items.map((item: ChronologyItemEntity, index: number) => (
+      {props.items.map((item, index) => (
         <ChronologyItemComponent
           key={index}
           item={item}

src/components/Library/LibraryItemComponent.tsx

@@ -1,11 +1,11 @@
 import styles from "styles/Library/LibraryItemComponent.module.css";
 import Link from "next/link";
 import Image from "next/image";
-import { BasicDate, getAssetURL } from "queries/helpers";
+import { GetLibraryItemsPreviewQuery } from "graphql/operations-types";
-import { LibraryItemEntity } from "graphql/operations-types";
+import { getAssetURL } from "queries/helpers";
 
 export type LibraryItemComponentProps = {
-  item: LibraryItemEntity;
+  item: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number];
 };
 
 export default function LibraryItemComponent(
@@ -17,7 +17,9 @@ export default function LibraryItemComponent(
     return result;
   }
 
-  function prettyDate(date: BasicDate): string {
+  function prettyDate(
+    date: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"]
+  ): string {
     return (
       date.year +
       "/" +

src/graphql/operation.graphql

@@ -101,3 +101,105 @@ query getLibraryItemsPreview($language_code: String) {
     }
   }
 }
+
+query getLibraryItemsSkeleton {
+  libraryItems(filters: { root_item: { eq: true } }) {
+    data {
+      attributes {
+        slug
+        subitems {
+          data {
+            attributes {
+              slug
+              subitems {
+                data {
+                  attributes {
+                    slug
+                    subitems {
+                      data {
+                        attributes {
+                          slug
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+query getLibraryItem($slug: String, $language_code: String) {
+  libraryItems(filters: { slug: { eq: $slug } }) {
+    data {
+      id
+      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
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/graphql/operations.ts

@@ -3,12 +3,16 @@ import {
   GetChronologyItemsQueryVariables,
   GetErasQuery,
   GetErasQueryVariables,
+  GetLibraryItemQuery,
+  GetLibraryItemQueryVariables,
   GetLibraryItemsPreviewQuery,
   GetLibraryItemsPreviewQueryVariables,
+  GetLibraryItemsSkeletonQuery,
+  GetLibraryItemsSkeletonQueryVariables,
 } from "graphql/operations-types";
 
 const graphQL = async (query: string, variables?: string) => {
-  const res = await fetch(process.env.URL_GRAPHQL, {
+  const res = await fetch(`${process.env.URL_GRAPHQL}`, {
     method: "POST",
     body: JSON.stringify({
       query: query,
@@ -33,7 +37,8 @@ function getQueryFromOperations(queryName: string): string {
   const lines = operations.split("\n");
   lines.map((line, index) => {
     if (startingIndex === -1) {
-      if (line.startsWith(`query ${queryName}`)) startingIndex = index;
+      if (line.startsWith(`query ${queryName}(`)) startingIndex = index;
+      if (line.startsWith(`query ${queryName} {`)) startingIndex = index;
     } else if (endingIndex === -1) {
       if (line.startsWith("query")) endingIndex = index;
     }
@@ -61,3 +66,18 @@ export async function getLibraryItemsPreview(
   const query = getQueryFromOperations("getLibraryItemsPreview");
   return await graphQL(query, JSON.stringify(variables));
 }
+
+export async function getLibraryItemsSkeleton(
+  variables: GetLibraryItemsSkeletonQueryVariables
+): Promise<GetLibraryItemsSkeletonQuery> {
+  const query = getQueryFromOperations("getLibraryItemsSkeleton");
+  return await graphQL(query, JSON.stringify(variables));
+}
+
+export async function getLibraryItem(
+  variables: GetLibraryItemQueryVariables
+): Promise<GetLibraryItemQuery> {
+  const query = getQueryFromOperations("getLibraryItem");
+  return await graphQL(query, JSON.stringify(variables));
+}
+

src/pages/chronology/overview.tsx

@@ -6,7 +6,6 @@ import NavOption from "components/Panels/NavOption";
 import ChronologyYearComponent from "components/Chronology/ChronologyYearComponent";
 import { applyCustomAppProps } from "pages/_app";
 import {
-  ChronologyItemEntity,
   GetChronologyItemsQuery,
   GetErasQuery,
 } from "graphql/operations-types";
@@ -25,17 +24,16 @@ applyCustomAppProps(ChronologyOverview, {
 export default function ChronologyOverview(props: Props): JSX.Element {
   // Group by year the Chronology items
 
-  let chronologyItemYearGroups: ChronologyItemEntity[][] = [];
+  let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][] =
+    [];
 
   if (props.chronologyItems.chronologyItems) {
     props.chronologyItems.chronologyItems.data.map((item) => {
-      if (item && item.attributes) {
       if (!chronologyItemYearGroups.hasOwnProperty(item.attributes.year)) {
         chronologyItemYearGroups[item.attributes.year] = [item];
       } else {
         chronologyItemYearGroups[item.attributes.year].push(item);
       }
-      }
     });
   }
 
@@ -45,40 +43,26 @@ export default function ChronologyOverview(props: Props): JSX.Element {
         <ReturnButton url="/chronology" title="Chronology" />
         <hr />
 
-        {props.chronologyEras.chronologyEras
+        {props.chronologyEras.chronologyEras.data.map((era) => (
-          ? props.chronologyEras.chronologyEras.data.map((era) => (
-              <>
-                {era.attributes && era.attributes.title ? (
           <NavOption
             key={era.id}
             url={"#" + era.attributes.slug}
-                    title={
+            title={era.attributes.title[0] ? era.attributes.title[0].title : ""}
-                      era.attributes.title[0]
-                        ? era.attributes.title[0].title
-                        : ""
-                    }
             subtitle={
-                      era.attributes.starting_year +
+              era.attributes.starting_year + " → " + era.attributes.ending_year
-                      " → " +
-                      era.attributes.ending_year
             }
             border={true}
           />
-                ) : (
+        ))}
-                  ""
-                )}
-              </>
-            ))
-          : ""}
       </SubPanel>
 
       <ContentPanel>
         {chronologyItemYearGroups.map((items, index: number) => {
-          if (items && items[0].attributes?.year) {
+          if (items && items[0].attributes.year) {
             return (
               <ChronologyYearComponent
                 key={index}
-                year={items[0].attributes?.year}
+                year={items[0].attributes.year}
                 items={items}
               />
             );
@@ -90,6 +74,7 @@ export default function ChronologyOverview(props: Props): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale)
     return {
       props: {
         chronologyItems: await getChronologyItems({
@@ -98,4 +83,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
         chronologyEras: await getEras({ language_code: context.locale }),
       },
     };
+  else {
+    return { props: {} };
+  }
 };

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

@@ -1,20 +1,18 @@
 import { useRouter } from "next/router";
 import ContentPanel from "components/Panels/ContentPanel";
-import { getAssetURL } from "queries/helpers";
-import {
-  getLibraryItem,
-  getBreadcrumbs,
-  getLibraryItemsSkeleton,
-  LibraryItem,
-  LibrarySubItem,
-} from "queries/library/[...slug]";
 import Image from "next/image";
 import Link from "next/link";
-import { GetStaticProps } from "next";
+import { GetStaticPaths, GetStaticProps } from "next";
 import { applyCustomAppProps } from "pages/_app";
+import {
+  getLibraryItem,
+  getLibraryItemsSkeleton,
+} from "graphql/operations";
+import { GetLibraryItemQuery } from "graphql/operations-types";
+import { getAssetURL } from "queries/helpers";
 
 type Props = {
-  libraryItem: LibraryItem;
+  libraryItem: GetLibraryItemQuery;
 };
 
 applyCustomAppProps(Library, {
@@ -24,25 +22,22 @@ applyCustomAppProps(Library, {
 
 export default function Library(props: Props): JSX.Element {
   const router = useRouter();
+  const libraryItem = props.libraryItem.libraryItems.data[0];
   return (
     <>
       <ContentPanel>
-        <h1>{props.libraryItem.attributes.title}</h1>
+        <h1>{libraryItem.attributes.title}</h1>
-        <h2>{props.libraryItem.attributes.subtitle}</h2>
+        <h2>{libraryItem.attributes.subtitle}</h2>
         <Image
           src={getAssetURL(
-            props.libraryItem.attributes.thumbnail.data.attributes.url
+            libraryItem.attributes.thumbnail.data.attributes.url
           )}
-          alt={
+          alt={libraryItem.attributes.thumbnail.data.attributes.alternativeText}
-            props.libraryItem.attributes.thumbnail.data.attributes
+          width={libraryItem.attributes.thumbnail.data.attributes.width}
-              .alternativeText
+          height={libraryItem.attributes.thumbnail.data.attributes.height}
-          }
-          width={props.libraryItem.attributes.thumbnail.data.attributes.width}
-          height={props.libraryItem.attributes.thumbnail.data.attributes.height}
         />
 
-        {props.libraryItem.attributes.subitems.data.map(
+        {libraryItem.attributes.subitems.data.map((subitem) => (
-          (subitem: LibrarySubItem) => (
           <Link
             href={router.asPath + "/" + subitem.attributes.slug}
             key={subitem.id}
@@ -55,8 +50,7 @@ export default function Library(props: Props): JSX.Element {
                     subitem.attributes.thumbnail.data.attributes.url
                   )}
                   alt={
-                      subitem.attributes.thumbnail.data.attributes
+                    subitem.attributes.thumbnail.data.attributes.alternativeText
-                        .alternativeText
                   }
                   width={subitem.attributes.thumbnail.data.attributes.width}
                   height={subitem.attributes.thumbnail.data.attributes.height}
@@ -66,25 +60,31 @@ export default function Library(props: Props): JSX.Element {
               )}
             </div>
           </Link>
-          )
+        ))}
-        )}
       </ContentPanel>
     </>
   );
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
-  if (context.params && Array.isArray(context.params.slug) && context.locale) {
+  if (context.params && Array.isArray(context.params.slug)) {
+    const slug = context.params.slug.pop();
+    if (slug && context.locale) {
       return {
         props: {
-        libraryItem: await getLibraryItem(context.params.slug, context.locale),
+          libraryItem: await getLibraryItem({
+            slug: slug,
+            language_code: context.locale,
+          }),
         },
       };
     }
+  }
+
   return { props: {} };
 };
 
-export async function getStaticPaths() {
+export const getStaticPaths: GetStaticPaths = async () => {
   const paths = await getAllSlugs();
   return {
     paths,
@@ -99,9 +99,10 @@ async function getAllSlugs() {
     };
   };
 
-  const data = await getLibraryItemsSkeleton();
+  const data = await getLibraryItemsSkeleton({});
+  console.log(data);
   const paths: Path[] = [];
-  data.map((item) => {
+  data.libraryItems.data.map((item) => {
     const breadcrumbs = getBreadcrumbs([], item);
     breadcrumbs.map((breadcrumb) => {
       paths.push({ params: { slug: breadcrumb } });
@@ -109,3 +110,22 @@ async function getAllSlugs() {
   });
   return paths;
 }
+
+export type LibraryItemSkeleton = {
+  attributes: {
+    slug: string;
+    subitems: {
+      data: LibraryItemSkeleton[];
+    };
+  };
+};
+
+function getBreadcrumbs(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;
+}

src/pages/library/index.tsx

@@ -16,7 +16,6 @@ applyCustomAppProps(Library, {
 });
 
 export default function Library(props: Props): JSX.Element {
-
   console.log(props);
   return (
     <>
@@ -32,7 +31,7 @@ export default function Library(props: Props): JSX.Element {
       </SubPanel>
 
       <ContentPanel>
-        {props.libraryItems.libraryItems?.data.map((item) => (
+        {props.libraryItems.libraryItems.data.map((item) => (
           <LibraryItemComponent key={item.id} item={item} />
         ))}
       </ContentPanel>
@@ -41,9 +40,15 @@ export default function Library(props: Props): JSX.Element {
 }
 
 export const getStaticProps: GetStaticProps = async (context) => {
+  if (context.locale)
     return {
       props: {
-      libraryItems: await getLibraryItemsPreview({language_code: context.locale}),
+        libraryItems: await getLibraryItemsPreview({
+          language_code: context.locale,
+        }),
       },
     };
+  else {
+    return { props: {} };
+  }
 };

src/queries/helpers.ts

@@ -1,65 +1,3 @@
-export const queryGraphQL = async (query: string, variables?: string) => {
-  const res = await fetch(process.env.URL_GRAPHQL, {
-    method: "POST",
-    body: JSON.stringify({
-      query: query,
-      variables: variables
-    }),
-    headers: {
-      "content-type": "application/json",
-      Authorization: "Bearer " + process.env.ACCESS_TOKEN,
-    },
-  });
-  return (await res.json()).data;
-};
-
 export function getAssetURL(url: string): string {
   return process.env.NEXT_PUBLIC_URL_CMS + url;
 }
-
-export type Source = {
-  data: {
-    attributes: {
-      name: string;
-    };
-  };
-};
-
-export type UploadImage = {
-  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,183 +0,0 @@
-import {
-  BasicDate,
-  BasicPrice,
-  BasicSize,
-  queryGraphQL,
-  UploadImage,
-} from "queries/helpers";
-
-export type LibraryItemSkeleton = {
-  attributes: {
-    slug: string;
-    subitems: {
-      data: LibraryItemSkeleton[];
-    };
-  };
-};
-
-export async function getLibraryItemsSkeleton(): Promise<
-  LibraryItemSkeleton[]
-> {
-  return (
-    await queryGraphQL(
-      `
-      {
-        libraryItems(filters: { root_item: { eq: true } }) {
-          data {
-            attributes {
-              slug
-              subitems {
-                data {
-                  attributes {
-                    slug
-                    subitems {
-                      data {
-                        attributes {
-                          slug
-                          subitems {
-                            data {
-                              attributes {
-                                slug
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      `
-    )
-  ).libraryItems.data;
-}
-
-export function getBreadcrumbs(
-  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(
-      `
-      {
-        libraryItems(
-          filters: {slug: {eq: "${slug.pop()}"}}
-        ) {
-          data {
-            id
-            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
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      `
-    )
-  ).libraryItems.data[0];
-}

src/queries/library/index.ts

@@ -1,86 +0,0 @@
-import {
-  UploadImage,
-  queryGraphQL,
-  BasicPrice,
-  BasicDate,
-  BasicSize,
-} from "queries/helpers";
-
-export type LibraryItem = {
-  id: string;
-  attributes: {
-    title: string;
-    subtitle: string;
-    slug: string;
-    thumbnail: UploadImage;
-    release_date: BasicDate;
-    price: BasicPrice;
-    size: BasicSize;
-    description: {
-      description: string;
-    };
-  };
-};
-
-export async function getLibraryItems(
-  language_code: string | undefined
-): Promise<LibraryItem[]> {
-  return (
-    await queryGraphQL(
-      `
-      {
-        libraryItems(
-          filters: { root_item: { eq: true } }
-          pagination: { limit: -1 }
-          sort: ["slug:asc"]
-        ) {
-          data {
-            id
-            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
-              }
-            }
-          }
-        }
-      }
-      `
-    )
-  ).libraryItems.data;
-}