Use directus return types, fix project link nested type API response

src/pages/api/revalidate.ts

@@ -25,13 +25,18 @@ async function getURLs(
     const urls = ["/technology"];
 
     // Get all projects with the technology
-    const all_projects = await directus.request(readItems("project"));
+    const all_projects = await directus.request(readItems("project", {
-    if (all_projects != null) {
+      fields: ["id", {
-      for (const project of all_projects) {
+        technologies: ["id"],
-        if (project.technologies?.some((t) => t.id === key))
+      }],
-          urls.push(`/projects/${project.id}`);
+    }));
-      }
+
-    }
+    // if (all_projects != null) {
+    //   for (const project of all_projects) {
+    //     if (project.technologies?.some((t) => t.id === key))
+    //       urls.push(`/projects/${project.id}`);
+    //   }
+    // }
 
     return urls;
   }

src/pages/projects.tsx

@@ -1,19 +1,26 @@
 import AppWrapper from "@/components/AppWrapper";
-import directus, { Project } from "@/utils/directus";
+import directus from "@/utils/directus";
 import { cn } from "@/utils/helpers";
 import { readItems } from "@directus/sdk";
 import { GetStaticPropsResult, type NextPage } from "next";
 import Link from "next/link";
 
 type Props = {
-  projects: Project[];
+  projects: Awaited<ReturnType<typeof getProjects>>;
 };
 
-export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {
+async function getProjects() {
-  const projects = await directus.request(readItems("project"));
+  return await directus.request(readItems("project", {
+    fields: ["name", "shortDescription", "icon", {links: ["url"]}],
+  }));
+}
+
+export async function getStaticProps(): Promise<GetStaticPropsResult<Props>> {;
 
   return {
-    props: {projects}
+    props: {
+      projects: await getProjects(),
+    }
   }
 }
 
@@ -21,11 +28,12 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
   return (
     <AppWrapper dotsClassName="animate-bg-fast">
       <div className="max-w-500 mx-auto mt-20 grid h-full w-max grid-cols-1 gap-x-20 gap-y-7 py-2 md:grid-cols-2 lg:grid-cols-3">
-        {projects.map(({ name, shortDescription: description, links, icon }) => (
+        {projects.map(({ name, shortDescription: description, links, icon }) => {
+          return (
             <Link
               key={name}
               className="flex relative max-w-[30rem] flex-shrink items-center opacity-75 transition-opacity hover:opacity-100 bg-black/30 hover:bg-white/5 py-2 rounded"
-            href={links[0]?.url ?? "#"}
+              href={links![0]?.url ?? "#"}
               target="_blank"
               rel="noreferrer"
               title={name}
@@ -41,7 +49,8 @@ const ProjectsPage: NextPage<Props> = ({projects}) => {
                 </div>
               </div>
             </Link>
-        ))}
+          );
+        })}
       </div>
     </AppWrapper>
   );

src/utils/directus.ts

@@ -4,6 +4,9 @@ export interface Schema {
   metadata: Metadata;
   project: Project[];
   technology: Technology[];
+  link: Link[];
+  project_technology: ProjectTechnology[];
+  project_link: ProjectLink[];
 }
 
 export interface Technology {
@@ -12,19 +15,42 @@ export interface Technology {
   url: string | null;
 }
 
+export interface ProjectTechnology {
+  id: string;
+  project_id: string;
+  technology_id: string;
+}
+
 export interface Project {
   id: string;
+  
+  // One2Many
+  links: number[] | ProjectLink[];
+  // Many2Many
+  technologies: number[] | ProjectTechnology[];
+
   icon: string | null;
   name: string;
   description: string;
   shortDescription: string;
-  links: Link[];
+
+  featured: boolean;
   wakatimeOffset: number | null;
-  technologies: Technology[] | null;
   bannerImage: string;
 }
 
 export interface Link {
+  id: string;
+  project_id: string;
+  icon: string;
+  url: string;
+  description: string | null;
+}
+
+export interface ProjectLink {
+  id: string;
+  project_id: string;
+  sort: number;
   icon: string;
   url: string;
   description: string | null;