Update Fauna example with new guestbook (#27295)

Based on #26708

- Renames FaunaDB -> Fauna
- Moves to Tailwind instead of bespoke styling
- Use SWR instead of hand-rolled fetch wrapper
- List/Create API for Guestbook
- Preps for setting correct environment variables from Vercel integration

Author: artem-kurnikov

examples/with-fauna/.env.local.example

@@ -0,0 +1 @@
+FAUNADB_SECRET=

examples/with-graphql-faunadb/.gitignore examples/with-fauna/.gitignoreexamples/with-graphql-faunadb/.gitignore renamed to examples/with-fauna/.gitignore

@@ -32,3 +32,5 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+.idea

examples/with-fauna/README.md

@@ -0,0 +1,62 @@
+# Fauna GraphQL Guestbook Starter
+
+This Guestbook Single-Page Application (SPA) example shows you how to use [Fauna's GraphQL endpoint](https://docs.fauna.com/fauna/current/api/graphql/) in your Next.js project.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-fauna&project-name=fauna-nextjs-guestbook&repository-name=fauna-nextjs-guestbook&demo-title=Next.js%20Fauna%20Guestbook%20App&demo-description=A%20simple%20guestbook%20application%20built%20with%20Next.js%20and%20Fauna&integration-ids=oac_Erlbqm8Teb1y4WhioE3r2utY)
+
+## Why Fauna
+
+By importing a `.gql` or `.graphql` schema into Fauna ([see our sample schema file](./schema.gql)), Fauna will generate required Indexes and GraphQL resolvers for you -- hands free 👐 ([some limitations exist](https://docs.fauna.com/fauna/current/api/graphql/#limitations)).
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```
+npx create-next-app --example with-fauna with-fauna-app
+# or
+yarn create next-app --example with-fauna with-fauna-app
+```
+
+You can start with this template [using `create-next-app`](#using-create-next-app) or by [downloading the repository manually](#download-manually).
+
+To use a live Fauna database, create a database at [dashboard.fauna.com](https://dashboard.fauna.com/) and generate an admin token by going to the **Security** tab on the left and then click **New Key**. Give the new key a name and select the 'Admin' Role. Copy the token since the setup script will ask for it. Do not use it in the frontend, it has superpowers which you don't want to give to your users.
+
+The database can then be set up with the delivered setup by running:
+
+```
+npm run setup
+# or using yarn
+yarn setup
+```
+
+This script will ask for the admin token. Once you provide it with a valid token, this is what the script automatically does for you:
+
+- **Import the GraphQL schema**, by importing a GraphQL schema in Fauna, Fauna automatically sets up collections and indexes to support your queries. This is now done for you with this script but can also be done from the [dashboard.fauna.com](https://dashboard.fauna.com/) UI by going to the GraphQL tab
+- **Create an index and UDF**, in order to implement custom sorting (by createdAt field), we need to create a GraphQL resolver that uses [UDF](https://docs.fauna.com/fauna/current/api/graphql/functions?lang=javascript) based on sorting index.
+- **Create a role suitable for the Client**, Fauna has a security system that allows you to define which resources can be accessed for a specific token. That's how we limit our clients powers, feel free to look at the scripts/setup.js script to see how we make roles and tokens.
+- **Create a token for that role**, this is the token to be used in the app.
+
+At the end, a `.env.local` [file](https://nextjs.org/docs/basic-features/environment-variables) will be created for you with the newly generated client token assigned to an environment variable.
+
+### Run locally
+
+Install packages, set up if needed, then run the development server:
+
+```bash
+npm install
+# if you haven't run setup yet
+npm run setup
+npm run dev
+# or using yarn
+yarn
+# if you haven't run setup yet
+yarn setup
+yarn dev
+```
+
+Your app should be up and running on [http://localhost:3000](http://localhost:3000)!

examples/with-fauna/components/ErrorMessage.js

@@ -0,0 +1,19 @@
+export default function ErrorMessage({ children }) {
+  return (
+    <p className="flex items-center text-sm font-bold text-red-800 dark:text-red-400">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="mr-2 h-4 w-4"
+      >
+        <path
+          fillRule="evenodd"
+          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {children}
+    </p>
+  )
+}

examples/with-fauna/components/LoadingSpinner.js

@@ -0,0 +1,24 @@
+export default function LoadingSpinner() {
+  return (
+    <svg
+      className="animate-spin h-5 w-5 text-gray-900 dark:text-gray-100"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  )
+}

examples/with-fauna/components/SuccessMessage.js

@@ -0,0 +1,19 @@
+export default function SuccessMessage({ children }) {
+  return (
+    <p className="flex items-center text-sm font-bold text-green-700 dark:text-green-400">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        className="mr-2 h-4 w-4"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+          clipRule="evenodd"
+        />
+      </svg>
+      {children}
+    </p>
+  )
+}

examples/with-fauna/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"],
+      "@/lib/*": ["lib/*"]
+    }
+  }
+}

examples/with-fauna/lib/fauna.js

@@ -0,0 +1,46 @@
+import { GraphQLClient, gql } from 'graphql-request'
+
+const FAUNADB_GRAPHQL_ENDPOINT = 'https://graphql.fauna.com/graphql'
+const FAUNADB_SECRET = process.env.FAUNADB_SECRET
+
+const graphQLClient = new GraphQLClient(FAUNADB_GRAPHQL_ENDPOINT, {
+  headers: {
+    authorization: `Bearer ${FAUNADB_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 createGuestbookEntry = (newEntry) => {
+  const mutation = gql`
+    mutation CreateGuestbookEntry($input: GuestbookEntryInput!) {
+      createGuestbookEntry(data: $input) {
+        _id
+        _ts
+        name
+        message
+        createdAt
+      }
+    }
+  `
+
+  return graphQLClient.request(mutation, { input: newEntry })
+}

examples/with-fauna/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "with-fauna",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "Guestbook example with Next.js and Fauna.",
+  "scripts": {
+    "dev": "next",
+    "build": "yarn setup && next build",
+    "start": "next start",
+    "setup": "node ./scripts/setup.js"
+  },
+  "dependencies": {
+    "classnames": "2.3.1",
+    "date-fns": "2.23.0",
+    "faunadb": "4.3.0",
+    "graphql": "15.5.1",
+    "graphql-request": "3.5.0",
+    "next": "latest",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "request": "2.88.2",
+    "swr": "0.5.6"
+  },
+  "devDependencies": {
+    "autoprefixer": "10.3.1",
+    "postcss": "8.3.6",
+    "prettier": "2.3.2",
+    "tailwindcss": "2.2.7",
+    "stream-to-promise": "3.0.0"
+  }
+}

examples/with-fauna/pages/api/entries/index.js

@@ -0,0 +1,30 @@
+import { listGuestbookEntries, createGuestbookEntry } from '@/lib/fauna'
+
+export default async function handler(req, res) {
+  const handlers = {
+    GET: async () => {
+      const entries = await listGuestbookEntries()
+
+      res.json(entries)
+    },
+
+    POST: async () => {
+      const {
+        body: { name, message },
+      } = req
+      const created = await createGuestbookEntry({
+        name,
+        message,
+        createdAt: new Date(),
+      })
+
+      res.json(created)
+    },
+  }
+
+  if (!handlers[req.method]) {
+    return res.status(405).end()
+  }
+
+  await handlers[req.method]()
+}