refactor(frontend): switch to graffle and re-organize directories

Author: alcercu

frontend/package.json

@@ -11,8 +11,10 @@
     "prepare": "cd .. && husky frontend/.husky"
   },
   "dependencies": {
+    "@opentelemetry/api": "^1.9.0",
+    "es-toolkit": "^1.25.2",
+    "graffle": "^8.0.0-next.75",
     "graphql": "^16.9.0",
-    "graphql-request": "^7.1.0",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18"

frontend/src/components/Footer.tsx

@@ -2,9 +2,13 @@ import React from "react";
 
 import Image from "next/image";
 
-import { Social } from "@/pages/queries";
+import { socialsQueryType } from "@/queries/socials";
 
-const Footer: React.FC<{ socials: Social[] }> = ({ socials }) => {
+interface IFooter {
+  socials: socialsQueryType["socials"];
+}
+
+const Footer: React.FC<IFooter> = ({ socials }) => {
   return (
     <div className={
       "py-4 bg-gradient-to-b from-light-blue to-30% to-kleros-purple"

frontend/src/pages/components/TrustedBy.tsx

@@ -1,17 +1,14 @@
 import Footer from "@/components/Footer";
-import { graphQLClient } from "@/utils/graphQLClient";
+import TrustedBy from "@/components/TrustedBy";
+import { partnersQuery, partnersQueryType } from "@/queries/partners";
+import { socialsQuery, socialsQueryType } from "@/queries/socials";
 
-import TrustedBy from "./components/TrustedBy";
-import {
-  partnersQueryDocument,
-  Partner,
-  Social,
-  footerQueryDocument,
-} from "./queries";
+interface IHome {
+  partners: partnersQueryType["partners"];
+  socials: socialsQueryType["socials"];
+}
 
-const Home: React.FC<{ partners: Partner[]; socials: Social[] }> = (
-  { partners, socials }
-) => {
+const Home: React.FC<IHome> = ({ partners, socials }) => {
   return (
     <div>
       <TrustedBy {...{ partners }}/>
@@ -21,14 +18,12 @@ const Home: React.FC<{ partners: Partner[]; socials: Social[] }> = (
 }
 
 export const getStaticProps = async () => {
-  const partnersData: { partners: Partner[] } =
-    await graphQLClient.request(partnersQueryDocument, {});
-  const socialsData: { socials: Social[] } =
-    await graphQLClient.request(footerQueryDocument, {});
+  const { partners } = await partnersQuery.run();
+  const { socials } = await socialsQuery.run();
   return {
     props: {
-      partners: partnersData?.partners,
-      socials: socialsData?.socials
+      partners,
+      socials,
     }
   };
 };

frontend/src/pages/index.tsx

@@ -1,15 +1,14 @@
-import { GraphQLClient } from "graphql-request";
-
+import { Graffle } from "@/graffle/__.js";
 import { getStrapiURL } from "@/utils/getStrapiURL";
 
 const endpoint = getStrapiURL("/graphql");
 
 const token = process.env.STRAPI_TOKEN;
 
-export const graphQLClient = new GraphQLClient(
-  endpoint,
-  {
-    headers: { Authorization: `Bearer ${token}` }
-  }
-);
+export const graffle = Graffle.create({
+  schema: endpoint,
+  transport: {
+    headers: { Authorization: `Bearer ${token}` },
+  },
+});