Experiment with React-Query

Note: "use server" is not good because force the fetch to be action/static so the client doesn't call them again explicitly during render (I think?)

eslint.config.mjs

@@ -1,6 +1,7 @@
 import { dirname } from "path";
 import { fileURLToPath } from "url";
 import { FlatCompat } from "@eslint/eslintrc";
+import pluginQuery from '@tanstack/eslint-plugin-query';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -11,6 +12,7 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
+  ...pluginQuery.configs['flat/recommended'],
 ];
 
 export default eslintConfig;

package.json

@@ -9,16 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.71.3",
+    "lowdb": "^7.0.1",
     "match-sorter": "^8.0.0",
     "next": "15.2.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "server-only": "^0.0.1",
     "sort-by": "^1.2.0",
     "tiny-invariant": "^1.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@next/eslint-plugin-next": "^15.2.4",
+    "@tanstack/eslint-plugin-query": "^5.68.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@tanstack/react-query':
+        specifier: ^5.71.3
+        version: 5.71.3(react@19.1.0)
+      lowdb:
+        specifier: ^7.0.1
+        version: 7.0.1
       match-sorter:
         specifier: ^8.0.0
         version: 8.0.0
@@ -20,6 +26,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.1.0(react@19.1.0)
+      server-only:
+        specifier: ^0.0.1
+        version: 0.0.1
       sort-by:
         specifier: ^1.2.0
         version: 1.2.0
@@ -33,6 +42,9 @@ importers:
       '@next/eslint-plugin-next':
         specifier: ^15.2.4
         version: 15.2.4
+      '@tanstack/eslint-plugin-query':
+        specifier: ^5.68.0
+        version: 5.68.0(eslint@9.23.0)(typescript@5.8.2)
       '@types/node':
         specifier: ^20
         version: 20.17.29
@@ -318,6 +330,19 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tanstack/eslint-plugin-query@5.68.0':
+    resolution: {integrity: sha512-w/+y5LILV1GTWBB2R/lKfUzgocKXU1B7O6jipLUJhmxCKPmJFy5zpfR1Vx7c6yCEsQoKcTbhuR/tIy+1sIGaiA==}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0
+
+  '@tanstack/query-core@5.71.3':
+    resolution: {integrity: sha512-SW7PXYpKiQCZU5pPOXG2UiHX1oSAxLyxoJiYbQ3aLYiABJW0UnfBZ9PVnO/x4ZCIVK30wfDn0h6Mrsr10q922Q==}
+
+  '@tanstack/react-query@5.71.3':
+    resolution: {integrity: sha512-4GZxKqiMX+CH4CxXiUBNipbqzk2V5jUU8Z4d6J+lSDu8OejcLtjx1hEDJzabFZHwd+ZHCsYLAJmM54kCS1/ekA==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@tybys/wasm-util@0.9.0':
     resolution: {integrity: sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==}
 
@@ -1118,6 +1143,10 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lowdb@7.0.1:
+    resolution: {integrity: sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==}
+    engines: {node: '>=18'}
+
   match-sorter@8.0.0:
     resolution: {integrity: sha512-bGJ6Zb+OhzXe+ptP5d80OLVx7AkqfRbtGEh30vNSfjNwllu+hHI+tcbMIT/fbkx/FKN1PmKuDb65+Oofg+XUxw==}
 
@@ -1348,6 +1377,9 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+
   set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -1401,6 +1433,10 @@ packages:
   stable-hash@0.0.5:
     resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
 
+  steno@4.0.2:
+    resolution: {integrity: sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==}
+    engines: {node: '>=18'}
+
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1762,6 +1798,21 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/eslint-plugin-query@5.68.0(eslint@9.23.0)(typescript@5.8.2)':
+    dependencies:
+      '@typescript-eslint/utils': 8.29.0(eslint@9.23.0)(typescript@5.8.2)
+      eslint: 9.23.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@tanstack/query-core@5.71.3': {}
+
+  '@tanstack/react-query@5.71.3(react@19.1.0)':
+    dependencies:
+      '@tanstack/query-core': 5.71.3
+      react: 19.1.0
+
   '@tybys/wasm-util@0.9.0':
     dependencies:
       tslib: 2.8.1
@@ -2247,8 +2298,8 @@ snapshots:
       '@typescript-eslint/parser': 8.29.0(eslint@9.23.0)(typescript@5.8.2)
       eslint: 9.23.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0)(eslint@9.23.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@9.23.0)
+      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0))(eslint@9.23.0)
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.23.0)
       eslint-plugin-react: 7.37.4(eslint@9.23.0)
       eslint-plugin-react-hooks: 5.2.0(eslint@9.23.0)
@@ -2267,7 +2318,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@9.23.0):
+  eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -2278,22 +2329,22 @@ snapshots:
       tinyglobby: 0.2.12
       unrs-resolver: 1.3.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@9.23.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0))(eslint@9.23.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@9.23.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0))(eslint@9.23.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.29.0(eslint@9.23.0)(typescript@5.8.2)
       eslint: 9.23.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0)(eslint@9.23.0)
+      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0)(eslint@9.23.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0))(eslint@9.23.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -2304,7 +2355,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.23.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0)(eslint@9.23.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0))(eslint@9.23.0)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -2758,6 +2809,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lowdb@7.0.1:
+    dependencies:
+      steno: 4.0.2
+
   match-sorter@8.0.0:
     dependencies:
       '@babel/runtime': 7.27.0
@@ -2996,6 +3051,8 @@ snapshots:
 
   semver@7.7.1: {}
 
+  server-only@0.0.1: {}
+
   set-function-length@1.2.2:
     dependencies:
       define-data-property: 1.1.4
@@ -3092,6 +3149,8 @@ snapshots:
 
   stable-hash@0.0.5: {}
 
+  steno@4.0.2: {}
+
   streamsearch@1.1.0: {}
 
   string.prototype.includes@2.0.1:

src/app/(sidebar)/contacts/[contactId]/Contact.tsx

@@ -1,57 +1,60 @@
 "use client";
 
-import Form from "next/form";
 import { ContactRecord } from "@/app/data";
+import Form from "next/form";
+import { use } from "react";
+import { useRouter } from "next/navigation";
 
-export default function Contact() {
-  const contact = {
-    first: "Your",
-    last: "Name",
-    avatar: "https://placecats.com/200/200",
-    twitter: "your_handle",
-    notes: "Some notes",
-    favorite: true,
-  };
+export default function Contact({
+  contact
+}: {
+  contact: Promise<ContactRecord>
+}) {
+  const c = use(contact);
+  const router = useRouter();
 
   return (
     <div id="contact">
       <div>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          alt={`${contact.first} ${contact.last} avatar`}
-          key={contact.avatar}
-          src={contact.avatar}
+          alt={`${c.first} ${c.last} avatar`}
+          key={c.avatar}
+          src={c.avatar}
         />
       </div>
 
       <div>
         <h1>
-          {contact.first || contact.last ? (
+          {c.first || c.last ? (
             <>
-              {contact.first} {contact.last}
+              {c.first} {c.last}
             </>
           ) : (
             <i>No Name</i>
           )}
-          <Favorite contact={contact}/>
+          <Favorite contact={c}/>
         </h1>
 
-        {contact.twitter ? (
+        {c.twitter ? (
           <p>
             <a
-              href={`https://twitter.com/${contact.twitter}`}
+              href={`https://twitter.com/${c.twitter}`}
             >
-              {contact.twitter}
+              {c.twitter}
             </a>
           </p>
         ) : null}
 
-        {contact.notes ? <p>{contact.notes}</p> : null}
+        {c.notes ? <p>{c.notes}</p> : null}
 
         <div>
-          <Form action="edit">
-            <button type="submit">Edit</button>
-          </Form>
+          <button
+            type="button"
+            onClick={() => router.push(`/contacts/${c.id}/edit`)}
+          >
+            Edit
+          </button>
 
           <Form
             action="destroy"

src/app/(sidebar)/contacts/[contactId]/edit/page.tsx

@@ -0,0 +1,85 @@
+import Form from "next/form";
+import { fetchContact } from "@/app/(sidebar)/loaders";
+import { notFound, redirect } from "next/navigation";
+import { updateContact } from "@/app/data";
+
+
+async function editContact(contactId: string, formData: FormData) {
+  "use server";
+  const updates = Object.fromEntries(formData);
+  await updateContact(contactId, updates);
+  redirect(`/contacts/${contactId}`);  // This makes the server component data be reloaded.
+  /*
+   * The server component architecture is a HTMX-like structure where the component rendered is STATE-LESS
+   * and that means that they don't automagically update.
+   * How do you say a server component to "re-render"? YOU REFRESH THE PAGE! THIS IS AS INTENDED!!!
+   * Do you want a component that re-render interactively from a "signal" client-side?
+   * That's a classical Client Component you dummy!! Go fetch clientside library and use that instead of Server Comps.
+   */
+}
+
+export default async function EditContactPage({
+  params
+}: {
+  params: Promise<{ contactId: string }>
+}) {
+  const { contactId } = await params;
+  const contact = await fetchContact(contactId).then((c) => {
+    if (c === null) notFound();
+    return c;
+  });
+  const editThisContact = editContact.bind(null, contactId);
+
+  return (
+    <Form key={contact.id} id="contact-form" action={editThisContact}>
+      <p>
+        <span>Name</span>
+        <input
+          aria-label="First name"
+          defaultValue={contact.first}
+          name="first"
+          placeholder="First"
+          type="text"
+        />
+        <input
+          aria-label="Last name"
+          defaultValue={contact.last}
+          name="last"
+          placeholder="Last"
+          type="text"
+        />
+      </p>
+      <label>
+        <span>Twitter</span>
+        <input
+          defaultValue={contact.twitter}
+          name="twitter"
+          placeholder="@jack"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Avatar URL</span>
+        <input
+          aria-label="Avatar URL"
+          defaultValue={contact.avatar}
+          name="avatar"
+          placeholder="https://example.com/avatar.jpg"
+          type="text"
+        />
+      </label>
+      <label>
+        <span>Notes</span>
+        <textarea
+          defaultValue={contact.notes}
+          name="notes"
+          rows={6}
+        />
+      </label>
+      <p>
+        <button type="submit">Save</button>
+        <button type="button">Cancel</button>
+      </p>
+    </Form>
+  );
+}

src/app/(sidebar)/contacts/[contactId]/loading.tsx

@@ -0,0 +1,5 @@
+export default function ContactLoading() {
+  return (
+    <div>Loading Contact...</div>
+  );
+}

src/app/(sidebar)/contacts/[contactId]/not-found.tsx

@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <main id="error-page">
+      <h1>404</h1>
+      <p>The requested contact could not be found.</p>
+    </main>
+  );
+}

src/app/(sidebar)/contacts/[contactId]/page.tsx

@@ -0,0 +1,19 @@
+import { notFound } from "next/navigation";
+import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
+import { fetchContact } from "@/app/(sidebar)/loaders";
+
+export default async function ContactPage({
+  params
+}: {
+  params: Promise<{ contactId: string }>
+}) {
+  const { contactId } = await params;
+  const contact = fetchContact(contactId).then((c) => {
+    if (c === null) notFound();
+    return c;
+  });
+
+  return (
+    <Contact contact={contact}/>
+  );
+}

src/app/(sidebar)/layout.tsx

@@ -0,0 +1,71 @@
+import React, { Suspense } from "react";
+import Link from "next/link";
+import Form from "next/form";
+import ContactList from "./sidebar-contacts";
+import { createEmptyContact, getContacts } from "@/app/data";
+import { revalidatePath } from "next/cache";
+import { fetchContacts } from "@/app/(sidebar)/loaders";
+import {
+  QueryClient,
+  dehydrate,
+  HydrationBoundary,
+} from "@tanstack/react-query";
+
+async function newContact() {
+  "use server";
+  await createEmptyContact();
+  revalidatePath('/');
+}
+
+export default async function SidebarRootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const queryClient = new QueryClient();
+  await queryClient.prefetchQuery({
+    queryKey: ['contacts'],
+    queryFn: () => getContacts(),
+  });
+  /*
+   * The problem here was that the `fetch` that Next uses inside function called server-side is the Node one, where you
+   * cannot use Relative Paths!!!
+   * So the most simple solution was to bypass the fetch and directly call the data function here.
+   * Basically the API is used only for the data refresh.
+   */
+
+  return (
+    <>
+      <div id="sidebar">
+        <h1>
+          <Link href="/about">React Router Contacts</Link>
+        </h1>
+        <div>
+          <Form id="search-form" role="search" action="." formMethod="get">
+            <input
+              aria-label="Search contacts"
+              id="q"
+              name="q"
+              placeholder="Search"
+              type="search"/>
+            <div
+              aria-hidden
+              hidden={true}
+              id="search-spinner"/>
+          </Form>
+          <Form action={newContact}>
+            <button type="submit">New</button>
+          </Form>
+        </div>
+        <nav>
+          <HydrationBoundary state={dehydrate(queryClient)}>
+            <ContactList/>
+          </HydrationBoundary>
+        </nav>
+      </div>
+      <div id={'detail'}>
+        {children}
+      </div>
+    </>
+  );
+}

src/app/(sidebar)/loaders.ts

@@ -0,0 +1,21 @@
+import { ContactRecord } from "@/app/data";
+
+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 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;
+}

src/app/(sidebar)/page.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Home() {
+  return (
+    <p id="index-page">
+      This is a demo for React Router.
+      <br/>
+      Check out{" "}
+      <a href="https://reactrouter.com">
+        the docs at reactrouter.com
+      </a>
+      .
+    </p>
+  );
+}

src/app/(sidebar)/sidebar-contacts.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import Link from "next/link";
+import { useQuery } from "@tanstack/react-query";
+import { fetchContacts } from "@/app/(sidebar)/loaders";
+
+export default function ContactList() {
+  const { data } = useQuery({
+    queryKey: ['contacts'],
+    queryFn: () => fetchContacts()
+  });
+  if (data === undefined) return <div>Error during prefetch...</div>;
+
+  return (
+    <ul>
+      {data.map((c) => (
+        <li key={c.id}>
+          <Link href={`/contacts/${c.id}`}>
+            {c.first || c.last ? (
+              <>
+                {c.first} {c.last}
+              </>
+            ) : (
+              <i>No Name</i>
+            )}
+            {c.favorite ? (
+              <span>★</span>
+            ) : null}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/app/about/page.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+export default function About() {
+  return (
+    <div id="about">
+      <Link href="/">← Go to demo</Link>
+      <h1>About React Router Contacts</h1>
+
+      <div>
+        <p>
+          This is a demo application showing off some of the
+          powerful features of React Router, including
+          dynamic routing, nested routes, loaders, actions,
+          and more.
+        </p>
+
+        <h2>Features</h2>
+        <p>
+          Explore the demo to see how React Router handles:
+        </p>
+        <ul>
+          <li>
+            Data loading and mutations with loaders and
+            actions
+          </li>
+          <li>
+            Nested routing with parent/child relationships
+          </li>
+          <li>URL-based routing with dynamic segments</li>
+          <li>Pending and optimistic UI</li>
+        </ul>
+
+        <h2>Learn More</h2>
+        <p>
+          Check out the official documentation at{" "}
+          <a href="https://reactrouter.com">
+            reactrouter.com
+          </a>{" "}
+          to learn more about building great web
+          applications with React Router.
+        </p>
+      </div>
+    </div>
+  );
+}

src/app/api/contacts/[contactId]/route.ts

@@ -0,0 +1,11 @@
+import { NextResponse } from 'next/server';
+import { getContact } from "@/app/data";
+
+export async function GET(
+  { params }: { params: Promise<{ contactId: string }> }
+) {
+  const { contactId } = await params;
+  console.log(`fetch contact ${contactId}`);
+  const contact = await getContact(contactId);
+  return NextResponse.json({ contact: contact });
+}

src/app/api/contacts/route.ts

@@ -0,0 +1,8 @@
+import { NextResponse } from 'next/server';
+import { getContacts } from "@/app/data";
+
+export async function GET() {
+  console.log("fetch contacts");
+  const contacts = await getContacts();
+  return NextResponse.json({ contacts: contacts });
+}

src/app/data.ts

@@ -2,11 +2,16 @@
 // 🛑 Nothing in here has anything to do with React Router, it's just a fake database
 ////////////////////////////////////////////////////////////////////////////////
 // noinspection UnnecessaryLocalVariableJS,JSUnusedGlobalSymbols
+import "server-only";
 
 import { matchSorter } from "match-sorter";
 // @ts-expect-error - no types, but it's a tiny function
 import sortBy from "sort-by";
 import invariant from "tiny-invariant";
+import { Low } from "lowdb";
+import { JSONFile } from "lowdb/node";
+import { join } from "path";
+import { mkdir } from "fs/promises";
 
 type ContactMutation = {
   id?: string;
@@ -23,42 +28,97 @@ export type ContactRecord = ContactMutation & {
   createdAt: string;
 };
 
-////////////////////////////////////////////////////////////////////////////////
-// This is just a fake DB table. In a real app you'd be talking to a real db or
-// fetching from an existing API.
-const fakeContacts = {
-  records: {} as Record<string, ContactRecord>,
+// Define the database schema
+type Schema = {
+  records: Record<string, ContactRecord>;
+};
 
+// Set up lowdb
+const initDb = async (): Promise<Low<Schema>> => {
+  // Ensure the db directory exists
+  const dbDir = join(process.cwd(), '.db');
+  await mkdir(dbDir, { recursive: true });
+
+  const file = join(dbDir, 'contacts.json');
+  const adapter = new JSONFile<Schema>(file);
+  const defaultData: Schema = { records: {} };
+  const db = new Low<Schema>(adapter, defaultData);
+
+  // Load existing data
+  await db.read();
+
+  // Initialize if needed
+  if (!db.data) {
+    db.data = defaultData;
+  }
+
+  return db;
+};
+
+// Create a singleton instance of the database
+let dbPromise: Promise<Low<Schema>> | null = null;
+
+const getDb = () => {
+  if (!dbPromise) {
+    dbPromise = initDb();
+  }
+  return dbPromise;
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// This is a DB wrapper using lowdb for persistence
+const fakeContacts = {
   async getAll(): Promise<ContactRecord[]> {
-    return Object.keys(fakeContacts.records)
-      .map((key) => fakeContacts.records[key])
+    const db = await getDb();
+    return Object.keys(db.data.records)
+      .map((key) => db.data.records[key])
       .sort(sortBy("-createdAt", "last"));
   },
 
   async get(id: string): Promise<ContactRecord | null> {
-    return fakeContacts.records[id] || null;
+    const db = await getDb();
+    return db.data.records[id] || null;
   },
 
   async create(values: ContactMutation): Promise<ContactRecord> {
+    const db = await getDb();
     const id = values.id || Math.random().toString(36).substring(2, 9);
     const createdAt = new Date().toISOString();
     const newContact = { id, createdAt, ...values };
-    fakeContacts.records[id] = newContact;
+    db.data.records[id] = newContact;
+    await db.write();
     return newContact;
   },
 
   async set(id: string, values: ContactMutation): Promise<ContactRecord> {
-    const contact = await fakeContacts.get(id);
+    const db = await getDb();
+    const contact = await this.get(id);
     invariant(contact, `No contact found for ${id}`);
     const updatedContact = { ...contact, ...values };
-    fakeContacts.records[id] = updatedContact;
+    db.data.records[id] = updatedContact;
+    await db.write();
     return updatedContact;
   },
 
-  destroy(id: string): null {
-    delete fakeContacts.records[id];
+  async destroy(id: string): Promise<null> {
+    const db = await getDb();
+    delete db.data.records[id];
+    await db.write();
     return null;
   },
+
+  // New reset function to restore the initial data
+  async reset(): Promise<void> {
+    const db = await getDb();
+    db.data.records = {};
+    await db.write();
+
+    // Restore initial data
+    const initialContacts = getInitialContacts();
+    for (const contact of initialContacts) {
+      await this.create(contact);
+    }
+  }
 };
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -93,228 +153,243 @@ export async function updateContact(id: string, updates: ContactMutation) {
 }
 
 export async function deleteContact(id: string) {
-  fakeContacts.destroy(id);
+  await fakeContacts.destroy(id);
 }
 
-[
-  {
-    avatar:
-      "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
-    first: "Shruti",
-    last: "Kapoor",
-    twitter: "@shrutikapoor08",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/1940-400o400o2-Enh9dnYmrLYhJSTTPSw3MH.jpg",
-    first: "Glenn",
-    last: "Reyes",
-    twitter: "@glnnrys",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
-    first: "Ryan",
-    last: "Florence",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
-    first: "Oscar",
-    last: "Newman",
-    twitter: "@__oscarnewman",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/fd45-400o400o2-fw91uCdGU9hFP334dnyVCr.jpg",
-    first: "Michael",
-    last: "Jackson",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/b07e-400o400o2-KgNRF3S9sD5ZR4UsG7hG4g.jpg",
-    first: "Christopher",
-    last: "Chedeau",
-    twitter: "@Vjeux",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/262f-400o400o2-UBPQueK3fayaCmsyUc1Ljf.jpg",
-    first: "Cameron",
-    last: "Matheson",
-    twitter: "@cmatheson",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/820b-400o400o2-Ja1KDrBAu5NzYTPLSC3GW8.jpg",
-    first: "Brooks",
-    last: "Lybrand",
-    twitter: "@BrooksLybrand",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/df38-400o400o2-JwbChVUj6V7DwZMc9vJEHc.jpg",
-    first: "Alex",
-    last: "Anderson",
-    twitter: "@ralex1993",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/5578-400o400o2-BMT43t5kd2U1XstaNnM6Ax.jpg",
-    first: "Kent C.",
-    last: "Dodds",
-    twitter: "@kentcdodds",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/c9d5-400o400o2-Sri5qnQmscaJXVB8m3VBgf.jpg",
-    first: "Nevi",
-    last: "Shah",
-    twitter: "@nevikashah",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/2694-400o400o2-MYYTsnszbLKTzyqJV17w2q.png",
-    first: "Andrew",
-    last: "Petersen",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/907a-400o400o2-9TM2CCmvrw6ttmJiTw4Lz8.jpg",
-    first: "Scott",
-    last: "Smerchek",
-    twitter: "@smerchek",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/08be-400o400o2-WtYGFFR1ZUJHL9tKyVBNPV.jpg",
-    first: "Giovanni",
-    last: "Benussi",
-    twitter: "@giovannibenussi",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/f814-400o400o2-n2ua5nM9qwZA2hiGdr1T7N.jpg",
-    first: "Igor",
-    last: "Minar",
-    twitter: "@IgorMinar",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/fb82-400o400o2-LbvwhTVMrYLDdN3z4iEFMp.jpeg",
-    first: "Brandon",
-    last: "Kish",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/fcda-400o400o2-XiYRtKK5Dvng5AeyC8PiUA.png",
-    first: "Arisa",
-    last: "Fukuzaki",
-    twitter: "@arisa_dev",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/c8c3-400o400o2-PR5UsgApAVEADZRixV4H8e.jpeg",
-    first: "Alexandra",
-    last: "Spalato",
-    twitter: "@alexadark",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/7594-400o400o2-hWtdCjbdFdLgE2vEXBJtyo.jpg",
-    first: "Cat",
-    last: "Johnson",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/5636-400o400o2-TWgi8vELMFoB3hB9uPw62d.jpg",
-    first: "Ashley",
-    last: "Narcisse",
-    twitter: "@_darkfadr",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/6aeb-400o400o2-Q5tAiuzKGgzSje9ZsK3Yu5.JPG",
-    first: "Edmund",
-    last: "Hung",
-    twitter: "@_edmundhung",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/30f1-400o400o2-wJBdJ6sFayjKmJycYKoHSe.jpg",
-    first: "Clifford",
-    last: "Fajardo",
-    twitter: "@cliffordfajard0",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/6faa-400o400o2-amseBRDkdg7wSK5tjsFDiG.jpg",
-    first: "Erick",
-    last: "Tamayo",
-    twitter: "@ericktamayo",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/feba-400o400o2-R4GE7eqegJNFf3cQ567obs.jpg",
-    first: "Paul",
-    last: "Bratslavsky",
-    twitter: "@codingthirty",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/c315-400o400o2-spjM5A6VVfVNnQsuwvX3DY.jpg",
-    first: "Pedro",
-    last: "Cattori",
-    twitter: "@pcattori",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/eec1-400o400o2-HkvWKLFqecmFxLwqR9KMRw.jpg",
-    first: "Andre",
-    last: "Landgraf",
-    twitter: "@AndreLandgraf94",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/c73a-400o400o2-4MTaTq6ftC15hqwtqUJmTC.jpg",
-    first: "Monica",
-    last: "Powell",
-    twitter: "@indigitalcolor",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/cef7-400o400o2-KBZUydbjfkfGACQmjbHEvX.jpeg",
-    first: "Brian",
-    last: "Lee",
-    twitter: "@brian_dlee",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/f83b-400o400o2-Pyw3chmeHMxGsNoj3nQmWU.jpg",
-    first: "Sean",
-    last: "McQuaid",
-    twitter: "@SeanMcQuaidCode",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/a9fc-400o400o2-JHBnWZRoxp7QX74Hdac7AZ.jpg",
-    first: "Shane",
-    last: "Walker",
-    twitter: "@swalker326",
-  },
-  {
-    avatar:
-      "https://sessionize.com/image/6644-400o400o2-aHnGHb5Pdu3D32MbfrnQbj.jpg",
-    first: "Jon",
-    last: "Jensen",
-    twitter: "@jenseng",
-  },
-].forEach((contact) => {
-  fakeContacts.create({
+// New function to reset the database to initial state
+export async function resetDatabase() {
+  console.log("RESET DATABASE");
+  await fakeContacts.reset();
+}
+
+// Helper function to get initial contacts data
+function getInitialContacts() {
+  return [
+    {
+      avatar:
+        "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
+      first: "Shruti",
+      last: "Kapoor",
+      twitter: "@shrutikapoor08",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/1940-400o400o2-Enh9dnYmrLYhJSTTPSw3MH.jpg",
+      first: "Glenn",
+      last: "Reyes",
+      twitter: "@glnnrys",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
+      first: "Ryan",
+      last: "Florence",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
+      first: "Oscar",
+      last: "Newman",
+      twitter: "@__oscarnewman",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/fd45-400o400o2-fw91uCdGU9hFP334dnyVCr.jpg",
+      first: "Michael",
+      last: "Jackson",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/b07e-400o400o2-KgNRF3S9sD5ZR4UsG7hG4g.jpg",
+      first: "Christopher",
+      last: "Chedeau",
+      twitter: "@Vjeux",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/262f-400o400o2-UBPQueK3fayaCmsyUc1Ljf.jpg",
+      first: "Cameron",
+      last: "Matheson",
+      twitter: "@cmatheson",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/820b-400o400o2-Ja1KDrBAu5NzYTPLSC3GW8.jpg",
+      first: "Brooks",
+      last: "Lybrand",
+      twitter: "@BrooksLybrand",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/df38-400o400o2-JwbChVUj6V7DwZMc9vJEHc.jpg",
+      first: "Alex",
+      last: "Anderson",
+      twitter: "@ralex1993",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/5578-400o400o2-BMT43t5kd2U1XstaNnM6Ax.jpg",
+      first: "Kent C.",
+      last: "Dodds",
+      twitter: "@kentcdodds",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/c9d5-400o400o2-Sri5qnQmscaJXVB8m3VBgf.jpg",
+      first: "Nevi",
+      last: "Shah",
+      twitter: "@nevikashah",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/2694-400o400o2-MYYTsnszbLKTzyqJV17w2q.png",
+      first: "Andrew",
+      last: "Petersen",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/907a-400o400o2-9TM2CCmvrw6ttmJiTw4Lz8.jpg",
+      first: "Scott",
+      last: "Smerchek",
+      twitter: "@smerchek",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/08be-400o400o2-WtYGFFR1ZUJHL9tKyVBNPV.jpg",
+      first: "Giovanni",
+      last: "Benussi",
+      twitter: "@giovannibenussi",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/f814-400o400o2-n2ua5nM9qwZA2hiGdr1T7N.jpg",
+      first: "Igor",
+      last: "Minar",
+      twitter: "@IgorMinar",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/fb82-400o400o2-LbvwhTVMrYLDdN3z4iEFMp.jpeg",
+      first: "Brandon",
+      last: "Kish",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/fcda-400o400o2-XiYRtKK5Dvng5AeyC8PiUA.png",
+      first: "Arisa",
+      last: "Fukuzaki",
+      twitter: "@arisa_dev",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/c8c3-400o400o2-PR5UsgApAVEADZRixV4H8e.jpeg",
+      first: "Alexandra",
+      last: "Spalato",
+      twitter: "@alexadark",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/7594-400o400o2-hWtdCjbdFdLgE2vEXBJtyo.jpg",
+      first: "Cat",
+      last: "Johnson",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/5636-400o400o2-TWgi8vELMFoB3hB9uPw62d.jpg",
+      first: "Ashley",
+      last: "Narcisse",
+      twitter: "@_darkfadr",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/6aeb-400o400o2-Q5tAiuzKGgzSje9ZsK3Yu5.JPG",
+      first: "Edmund",
+      last: "Hung",
+      twitter: "@_edmundhung",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/30f1-400o400o2-wJBdJ6sFayjKmJycYKoHSe.jpg",
+      first: "Clifford",
+      last: "Fajardo",
+      twitter: "@cliffordfajard0",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/6faa-400o400o2-amseBRDkdg7wSK5tjsFDiG.jpg",
+      first: "Erick",
+      last: "Tamayo",
+      twitter: "@ericktamayo",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/feba-400o400o2-R4GE7eqegJNFf3cQ567obs.jpg",
+      first: "Paul",
+      last: "Bratslavsky",
+      twitter: "@codingthirty",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/c315-400o400o2-spjM5A6VVfVNnQsuwvX3DY.jpg",
+      first: "Pedro",
+      last: "Cattori",
+      twitter: "@pcattori",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/eec1-400o400o2-HkvWKLFqecmFxLwqR9KMRw.jpg",
+      first: "Andre",
+      last: "Landgraf",
+      twitter: "@AndreLandgraf94",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/c73a-400o400o2-4MTaTq6ftC15hqwtqUJmTC.jpg",
+      first: "Monica",
+      last: "Powell",
+      twitter: "@indigitalcolor",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/cef7-400o400o2-KBZUydbjfkfGACQmjbHEvX.jpeg",
+      first: "Brian",
+      last: "Lee",
+      twitter: "@brian_dlee",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/f83b-400o400o2-Pyw3chmeHMxGsNoj3nQmWU.jpg",
+      first: "Sean",
+      last: "McQuaid",
+      twitter: "@SeanMcQuaidCode",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/a9fc-400o400o2-JHBnWZRoxp7QX74Hdac7AZ.jpg",
+      first: "Shane",
+      last: "Walker",
+      twitter: "@swalker326",
+    },
+    {
+      avatar:
+        "https://sessionize.com/image/6644-400o400o2-aHnGHb5Pdu3D32MbfrnQbj.jpg",
+      first: "Jon",
+      last: "Jensen",
+      twitter: "@jenseng",
+    },
+  ].map(contact => ({
     ...contact,
     id: `${contact.first
       .toLowerCase()
       .split(" ")
-      .join("_")}-${contact.last.toLocaleLowerCase()}`,
-  });
-});
+      .join("_")}-${contact.last.toLowerCase()}`,
+  }));
+}
+
+// Initialize with seed data on first load
+(async () => {
+  const db = await getDb();
+  if (Object.keys(db.data.records).length === 0) {
+    await resetDatabase();
+  }
+})();

src/app/layout.tsx

@@ -1,9 +1,8 @@
-import type { Metadata } from "next";
 import React from "react";
+import type { Metadata } from "next";
 
 import "./globals.css";
-import Form from "next/form";
-import Link from "next/link";
+import Providers from "@/app/providers";
 
 export const metadata: Metadata = {
   title: "Next.js Address Book",
@@ -18,41 +17,7 @@ export default function RootLayout({
   return (
     <html lang="en">
     <body>
-    <div id="sidebar">
-      <h1>React Router Contacts</h1>
-      <div>
-        <Form id="search-form" role="search" action="." formMethod="get">
-          <input
-            aria-label="Search contacts"
-            id="q"
-            name="q"
-            placeholder="Search"
-            type="search"
-          />
-          <div
-            aria-hidden
-            hidden={true}
-            id="search-spinner"
-          />
-        </Form>
-        <Form action="." formMethod="post">
-          <button type="submit">New</button>
-        </Form>
-      </div>
-      <nav>
-        <ul>
-          <li>
-            <Link href={`/contacts/1`}>Your Name</Link>
-          </li>
-          <li>
-            <Link href={`/contacts/2`}>Your Friend</Link>
-          </li>
-        </ul>
-      </nav>
-    </div>
-    <div id={'detail'}>
-      {children}
-    </div>
+    <Providers>{children}</Providers>
     </body>
     </html>
   );

src/app/page.tsx

@@ -1,8 +0,0 @@
-import Form from "next/form";
-import React from "react";
-
-export default function Home() {
-  return (
-    <div></div>
-  );
-}

src/app/providers.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import {
+  isServer,
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import React from "react";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+}