Experiment with React-Query

src/app/(sidebar)/loaders.ts

@@ -1,11 +1,21 @@
-import { getContact, getContacts } from "@/app/data";
+import { ContactRecord } from "@/app/data";
 
-export const fetchContacts = async () => {
-  console.log("fetch contacts")
-  return await getContacts();
-};
+export async function fetchContacts() {
+  console.log("fetchContacts()");
+  const response = await fetch('/api/contacts');
+  if (!response.ok) {
+    console.log("ERROR!?");
+    throw new Error(`Network Error ${response.status}: ${response.statusText}`);
+  }
+  const data: { contacts: ContactRecord[] } = await response.json();
+  return data.contacts;
+}
 
-export const fetchContact = async (contactId: string) => {
-  console.log(`fetch contact ${contactId}`)
-  return await getContact(contactId);
-};
+export async function fetchContact(contactId: string) {
+  console.log("fetchContacts()");
+  const response = await fetch(`/api/contacts/${contactId}`);
+  if (!response.ok) {
+    throw new Error(`Network Error ${response.status}: ${response.statusText}`);
+  }
+  return (await response.json())['contact'] as ContactRecord;
+}