vercel · leerob · Oct 11, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 29, 2023
diff --git a/examples/with-fauna/actions/entry.js b/examples/with-fauna/actions/entry.js
@@ -0,0 +1,22 @@
+"use server"
+import { revalidatePath } from "next/cache"
+import { createEntry } from "@/lib/fauna"
+
+
+export async function createEntryAction(prevState, formData) {
+    const name = formData.get('name')
+    const message = formData.get('message')
+    try {
+        await createEntry(name, message)
+        revalidatePath('/')
+        return { 
+            successMessage: 'Thank you for signing the guest book',
+            errorMessage: null
+        }   
+    } catch (error) {
+        return { 
+            successMessage: null,
+            errorMessage: 'Something went wrong. Please try again' 
+        }
+    }
+}
diff --git a/examples/with-fauna/app/api/entries/route.js b/examples/with-fauna/app/api/entries/route.js
@@ -0,0 +1,22 @@
+import { getAllEntries, createEntry } from '@/lib/fauna'
+import { NextResponse } from 'next/server'
+
+
+export const GET = async (req, res) => {
+  try {
+    const entries = await getAllEntries()
+    return NextResponse.json(entries)
+  } catch (error) {
+    throw new Error(error.message)
+  }
+}
+
+export const POST = async (req, res) => {
+  const { name, message } = await req.json()
+  try {
+    const newentry = await createEntry(name, message)
+    return NextResponse.json(newentry)
+  } catch (error) {
+    throw new Error(error.message)
+  }
+}
diff --git a/examples/with-fauna/app/guestbook-page.js b/examples/with-fauna/app/guestbook-page.js
@@ -0,0 +1,45 @@
+import cn from 'classnames'
+import 'tailwindcss/tailwind.css'
+import formatDate from 'date-fns/format'
+import EntryForm from '@/components/EntryForm'
+
+const EntryItem = ({ entry }) => (
+  <div className="flex flex-col space-y-2">
+    <div className="prose dark:prose-dark w-full">{entry.message}</div>
+    <div className="flex items-center space-x-3">
+      <p className="text-sm text-gray-500">{entry.name}</p>
+      <span className="text-gray-200 dark:text-gray-800">/</span>
+      <p className="text-sm text-gray-400 dark:text-gray-600">
+        {formatDate(new Date(entry.createdAt.isoString), "d MMM yyyy 'at' h:mm bb")}
+      </p>
+    </div>
+  </div>
+)
+
+export default async function GuestbookPage({ entries }) {
+	return (
+		<main className="max-w-4xl mx-auto p-4">
+			<div
+				className={cn(
+					'border border-blue-200 rounded p-6',
+					'my-4 w-full dark:border-gray-800 bg-blue-50',
+					'dark:bg-blue-opaque'
+				)}
+			>
+				<h5 className={cn('text-lg md:text-xl font-bold', 'text-gray-900')}>
+					Sign the Guestbook
+				</h5>
+				<p className="my-1 text-gray-800">
+					Share a message for a future visitor.
+				</p>
+        <EntryForm />
+			</div>
+
+			<div className="mt-4 space-y-8 px-2">
+				{entries?.map((entry) => (
+					<EntryItem key={entry.id} entry={entry} />
+				))}
+			</div>
+		</main>
+	)
+}
diff --git a/examples/with-fauna/app/layout.js b/examples/with-fauna/app/layout.js
@@ -0,0 +1,12 @@
+export const metadata = {
+  title: 'Next.js + Fauna example',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({ children }) {
+ return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/examples/with-fauna/app/page.js b/examples/with-fauna/app/page.js
@@ -0,0 +1,7 @@
+import { getAllEntries } from '@/lib/fauna'
+import GuestbookPage from './guestbook-page'
+
+export default async function Page() {
+  const entries = await getAllEntries()
+  return <GuestbookPage entries={entries}/>
+}
diff --git a/examples/with-fauna/components/EntryForm.js b/examples/with-fauna/components/EntryForm.js
@@ -0,0 +1,60 @@
+'use client'
+
+import cn from 'classnames'
+import { createEntryAction } from '@/actions/entry'
+import { experimental_useFormState as useFormState } from 'react-dom'
+import { experimental_useFormStatus as useFormStatus } from 'react-dom'
+import LoadingSpinner from '@/components/LoadingSpinner'
+import SuccessMessage from '@/components/SuccessMessage'
+import ErrorMessage from '@/components/ErrorMessage'
+
+const inputClasses = cn(
+	'block py-2 bg-white dark:bg-gray-800',
+	'rounded-md border-gray-300 focus:ring-blue-500',
+	'focus:border-blue-500 text-gray-900 dark:text-gray-100'
+)
+
+const initialState = {
+	successMessage: null,
+	errorMessage: null
+}
+
+export default function EntryForm() {
+	const [state, formAction] = useFormState(createEntryAction, initialState)
+	const { pending } = useFormStatus()
+
+	return (
+		<>
+		<form className="flex relative my-4" action={formAction}>
+			<input
+				required
+				className={cn(inputClasses, 'w-1/3 mr-2 px-4')}
+				aria-label="Your name"
+				placeholder="Your name..."
+				name="name"
+			/>
+			<input
+				required
+				className={cn(inputClasses, 'pl-4 pr-32 flex-grow')}
+				aria-label="Your message"
+				placeholder="Your message..."
+				name="message"
+			/>
+			<button
+				className={cn(
+					'flex items-center justify-center',
+					'absolute right-1 top-1 px-4 font-bold h-8',
+					'bg-gray-100 dark:bg-gray-700 text-gray-900',
+					'dark:text-gray-100 rounded w-28'
+				)}
+				type="submit"
+				disabled={pending}
+			>
+				{ pending ? <LoadingSpinner /> : 'Sign' }
+			</button>
+		</form>
+		{ state?.successMessage ? <SuccessMessage>{state.successMessage}</SuccessMessage> : null }
+		{ state?.errorMessage ? <ErrorMessage>{state.errorMessage}</ErrorMessage> : null }
+		</>
+	)
+}
diff --git a/examples/with-fauna/jsconfig.json b/examples/with-fauna/jsconfig.json
@@ -2,6 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
+      "@/actions/*": ["actions/*"],
       "@/components/*": ["components/*"],
       "@/lib/*": ["lib/*"]
     }

diff --git a/examples/with-fauna/lib/constants.js b/examples/with-fauna/lib/constants.js
diff --git a/examples/with-fauna/lib/fauna.js b/examples/with-fauna/lib/fauna.js
@@ -1,49 +1,31 @@
-import { GraphQLClient, gql } from 'graphql-request'
-import { resolveDbDomain } from './constants'
+import { Client, fql } from 'fauna'
 
-const CLIENT_SECRET =
-  process.env.FAUNA_ADMIN_KEY || process.env.FAUNA_CLIENT_SECRET
-const FAUNA_GRAPHQL_DOMAIN = resolveDbDomain().replace('db', 'graphql')
-const FAUNA_GRAPHQL_BASE_URL = `https://${FAUNA_GRAPHQL_DOMAIN}/graphql`
-
-const graphQLClient = new GraphQLClient(FAUNA_GRAPHQL_BASE_URL, {
-  headers: {
-    authorization: `Bearer ${CLIENT_SECRET}`,
-  },
+const client = new Client({
+  secret: process.env.FAUNA_CLIENT_SECRET,
 })
 
-export const listGuestbookEntries = () => {
-  const query = gql`
-    query Entries($size: Int) {
-      entries(_size: $size) {
-        data {
-          _id
-          _ts
-          name
-          message
-          createdAt
-        }
-      }
-    }
-  `
-
-  return graphQLClient
-    .request(query, { size: 999 })
-    .then(({ entries: { data } }) => data)
+export const getAllEntries = async () => {
+	try {
+		const dbresponse = await client.query(fql`
+		Entry.all()
+	`)
+		return dbresponse.data.data
+	} catch (error) {
+		throw new Error(error.message)
+	}
 }
 
-export const createGuestbookEntry = (newEntry) => {
-  const mutation = gql`
-    mutation CreateGuestbookEntry($input: GuestbookEntryInput!) {
-      createGuestbookEntry(data: $input) {
-        _id
-        _ts
-        name
-        message
-        createdAt
-      }
-    }
-  `
-
-  return graphQLClient.request(mutation, { input: newEntry })
-}
+export const createEntry = async (name, message) => {
+	try {
+		const dbresponse = await client.query(fql`
+			Entry.create({
+				name: ${name},
+				message: ${message},
+				createdAt: Time.now(),
+			})`
+		)
+		return dbresponse.data
+	} catch (error) {
+		throw new Error(error.message)
+	}
+}
diff --git a/examples/with-fauna/next.config.js b/examples/with-fauna/next.config.js
@@ -0,0 +1,7 @@
+const nextConfig = {
+    experimental: {
+      serverActions: true,
+    },
+}
+
+module.exports = nextConfig
diff --git a/examples/with-fauna/package.json b/examples/with-fauna/package.json
@@ -9,19 +9,16 @@
   "dependencies": {
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
-    "faunadb": "4.5.4",
-    "graphql": "16.8.1",
-    "graphql-request": "4.3.0",
+    "fauna": "^1.2.0",
     "next": "latest",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "swr": "^2.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",
     "postcss": "^8.4.14",
+    "request": "^2.88.2",
     "stream-to-promise": "3.0.0",
-    "tailwindcss": "^3.1.2",
-    "request": "^2.88.2"
+    "tailwindcss": "^3.1.2"
   }
 }
diff --git a/examples/with-fauna/pages/api/entries/index.js b/examples/with-fauna/pages/api/entries/index.js