feat: migrate to latest directus sdk

Author: scheidtdav

app/i18next-options.ts

@@ -1,6 +1,8 @@
+export const supportedLanguages = ["en", "de"] as const;
+
 export default {
   // This is the list of languages your application supports
-  supportedLngs: ["en", "de"],
+  supportedLngs: supportedLanguages,
   // This is the language you want to use in case
   // if the user language is not in the supportedLngs
   fallbackLng: "en",

app/lib/directus.ts

@@ -1,40 +1,45 @@
-import { Directus, type ID  } from '@directus/sdk';
+import {
+  createDirectus,
+  type DirectusClient,
+  rest,
+  type RestClient,
+} from "@directus/sdk";
 
-const directusUrl = process.env.DIRECTUS_URL || 'http://localhost:8055'
+const directusUrl = process.env.DIRECTUS_URL || "http://localhost:8055";
 
 export type UseCase = {
-    id: ID,
-    status: string,
-    image: string,
-    title: string,
-    description: string,
-    content: string,
-    language: "de" | "en"
-}
+  id: number | string;
+  status: string;
+  image: string;
+  title: string;
+  description: string;
+  content: string;
+  language: "de" | "en";
+};
 
 export type Feature = {
-    id: ID,
-    title: string,
-    description: string,
-    icon: string,
-    language: "de" | "en"
-}
+  id: number | string;
+  title: string;
+  description: string;
+  icon: string;
+  language: "de" | "en";
+};
 
 export type Partner = {
-    id: ID,
-    name: string,
-    logo: string,
-    link: string
-}
+  id: number | string;
+  name: string;
+  logo: string;
+  link: string;
+};
 
 type DirectusCollection = {
-    use_cases: UseCase,
-    features: Feature,
-    partners: Partner
-}
+  use_cases: UseCase[];
+  features: Feature[];
+  partners: Partner[];
+};
 
-const directus = new Directus<DirectusCollection>(directusUrl)
+const directus = createDirectus<DirectusCollection>(directusUrl).with(rest());
 
-export async function getDirectusClient () {
-    return directus
-}
+export function getDirectusClient(): DirectusClient<DirectusCollection> & RestClient<DirectusCollection> {
+  return directus;
+}

app/routes/_index.tsx

@@ -1,3 +1,4 @@
+import { readItems } from "@directus/sdk";
 import { useMediaQuery } from "@mantine/hooks";
 import { motion } from "framer-motion";
 import { useTranslation } from "react-i18next";
@@ -11,6 +12,7 @@ import Integrations from "~/components/landing/sections/integrations";
 import Partners from "~/components/landing/sections/partners";
 import PricingPlans from "~/components/landing/sections/pricing-plans";
 import Stats from "~/components/landing/stats";
+import { type supportedLanguages } from "~/i18next-options";
 import i18next from "~/i18next.server";
 import  { type Partner, getDirectusClient  } from "~/lib/directus";
 import { getLatestDevices } from "~/models/device.server";
@@ -44,26 +46,26 @@ const sections = [
 ];
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
-  let locale = await i18next.getLocale(request);
-  const directus = await getDirectusClient();
+  const locale = await i18next.getLocale(request) as typeof supportedLanguages[number];
+  const directus = getDirectusClient();
 
-  const useCasesResponse = await directus.items("use_cases").readByQuery({
+  const useCasesResponse = await directus.request(readItems("use_cases", {
     fields: ["*"],
     filter: {
-      language: locale,
+      language: {_eq: locale },
     },
-  });
+  }));
 
-  const featuresResponse = await directus.items("features").readByQuery({
+  const featuresResponse = await directus.request(readItems("features", {
     fields: ["*"],
     filter: {
-      language: locale,
+      language: {_eq: locale },
     },
-  });
+  }));
 
-  const partnersResponse = await directus.items("partners").readByQuery({
+  const partnersResponse = await directus.request(readItems("partners", {
     fields: ["*"],
-  });
+  }));
 
   //* Get user Id from session
   const userId = await getUserId(request);
@@ -78,9 +80,9 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   const latestDevices = await getLatestDevices();
 
   return data({
-    useCases: useCasesResponse.data,
-    features: featuresResponse.data,
-    partners: partnersResponse.data,
+    useCases: useCasesResponse,
+    features: featuresResponse,
+    partners: partnersResponse,
     stats: stats,
     header: { userId: userId, userName: userName },
     locale: locale,