{c.first || c.last ? (
diff --git a/src/app/api/contacts/[contactId]/route.ts b/src/app/api/contacts/[contactId]/route.ts
new file mode 100644
index 0000000..2d31f4a
--- /dev/null
+++ b/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 });
+}
\ No newline at end of file
diff --git a/src/app/api/contacts/route.ts b/src/app/api/contacts/route.ts
new file mode 100644
index 0000000..b907feb
--- /dev/null
+++ b/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 });
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7406ee3..67f6304 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ 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",
@@ -16,7 +17,7 @@ export default function RootLayout({
return (
- {children}
+ {children}
);
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
new file mode 100644
index 0000000..4913781
--- /dev/null
+++ b/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 (
+ {children}
+ );
+}
\ No newline at end of file