Invalidation when creating new is correct, but the invalidation when editing a contact doesn't work properly.

eslint.config.mjs

@@ -1,7 +1,6 @@
 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);
@@ -12,7 +11,6 @@ const compat = new FlatCompat({
 
 const eslintConfig = [
   ...compat.extends("next/core-web-vitals", "next/typescript"),
-  ...pluginQuery.configs['flat/recommended'],
 ];
 
 export default eslintConfig;

package.json

@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.71.3",
     "lowdb": "^7.0.1",
     "match-sorter": "^8.0.0",
     "next": "15.2.4",
@@ -22,7 +21,6 @@
   "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,9 +8,6 @@ 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
@@ -42,9 +39,6 @@ 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
@@ -330,19 +324,6 @@ 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==}
 
@@ -1798,21 +1779,6 @@ 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
@@ -2298,8 +2264,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(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0)
+      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-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-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-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)
@@ -2318,7 +2284,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  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-import-resolver-typescript@3.10.0(eslint-plugin-import@2.31.0)(eslint@9.23.0):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.0
@@ -2329,22 +2295,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-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-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)
     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-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-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):
     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(@typescript-eslint/parser@8.29.0(eslint@9.23.0)(typescript@5.8.2))(eslint@9.23.0))(eslint@9.23.0)
+      eslint-import-resolver-typescript: 3.10.0(eslint-plugin-import@2.31.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-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-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):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -2355,7 +2321,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-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-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)
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3

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

@@ -2,12 +2,16 @@ import Form from "next/form";
 import { fetchContact } from "@/app/(sidebar)/loaders";
 import { notFound, redirect } from "next/navigation";
 import { updateContact } from "@/app/data";
+import { revalidatePath } from "next/cache";
 
 
 async function editContact(contactId: string, formData: FormData) {
   "use server";
   const updates = Object.fromEntries(formData);
   await updateContact(contactId, updates);
+  revalidatePath('/(sidebar)', 'layout');
+  revalidatePath(`/contacts/${contactId}`, 'page');
+  revalidatePath(`/contacts/${contactId}/edit`, 'page');
   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

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

@@ -1,6 +1,7 @@
 import { notFound } from "next/navigation";
 import Contact from "@/app/(sidebar)/contacts/[contactId]/Contact";
 import { fetchContact } from "@/app/(sidebar)/loaders";
+import React, { Suspense } from "react";
 
 export default async function ContactPage({
   params
@@ -14,6 +15,8 @@ export default async function ContactPage({
   });
 
   return (
-    <Contact contact={contact}/>
+    <Suspense fallback={<div>Loading contact...</div>}>
+      <Contact contact={contact}/>
+    </Suspense>
   );
 }

src/app/(sidebar)/layout.tsx

@@ -2,37 +2,22 @@ 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 { createEmptyContact } 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('/');
+  revalidatePath('/(sidebar)', 'layout');
 }
 
-export default async function SidebarRootLayout({
+export default function SidebarRootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const queryClient = new QueryClient();
+  const contacts = fetchContacts();
-  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 (
     <>
@@ -58,9 +43,9 @@ export default async function SidebarRootLayout({
           </Form>
         </div>
         <nav>
-          <HydrationBoundary state={dehydrate(queryClient)}>
+          <Suspense fallback={<div>Loading...</div>}>
-            <ContactList/>
+            <ContactList contacts={contacts}/>
-          </HydrationBoundary>
+          </Suspense>
         </nav>
       </div>
       <div id={'detail'}>

src/app/(sidebar)/loaders.ts

@@ -1,21 +1,13 @@
-import { ContactRecord } from "@/app/data";
+import { getContact, getContacts } from "@/app/data";
 
-export async function fetchContacts() {
+// This files is a non-needed interface file. I can directly call getContact/s into Server Components.
-  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) {
+export const fetchContacts = async () => {
-  console.log("fetchContacts()");
+  console.log("fetch contacts");
-  const response = await fetch(`/api/contacts/${contactId}`);
+  return await getContacts();
-  if (!response.ok) {
+};
-    throw new Error(`Network Error ${response.status}: ${response.statusText}`);
+
-  }
+export const fetchContact = async (contactId: string) => {
-  return (await response.json())['contact'] as ContactRecord;
+  console.log(`fetch contact ${contactId}`);
-}
+  return await getContact(contactId);
+};

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

@@ -1,19 +1,12 @@
-"use client";
+import { ContactRecord } from "@/app/data";
-
+import React, { use } from "react";
 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>;
 
+export default function ContactList({ contacts }: { contacts: Promise<ContactRecord[]> }) {
+  const allContacts = use(contacts);
   return (
     <ul>
-      {data.map((c) => (
+      {allContacts.map((c) => (
         <li key={c.id}>
           <Link href={`/contacts/${c.id}`}>
             {c.first || c.last ? (

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

@@ -1,11 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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/layout.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import type { Metadata } from "next";
 
 import "./globals.css";
-import Providers from "@/app/providers";
 
 export const metadata: Metadata = {
   title: "Next.js Address Book",
@@ -17,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="en">
     <body>
-    <Providers>{children}</Providers>
+    {children}
     </body>
     </html>
   );

src/app/providers.tsx

@@ -1,49 +0,0 @@
-'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>
-  );
-}