Add with-edgedb example (#35929)

## Documentation / Examples
 
- [X] Make sure the linting passes by running `yarn lint`

examples/with-edgedb/.eslintignore

@@ -0,0 +1 @@
+dbschema/edgeql-js

examples/with-edgedb/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.vscode
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# query builder
+dbschema/edgeql-js

examples/with-edgedb/README.md

@@ -0,0 +1,150 @@
+# Full-stack EdgeDB + Next.js application
+
+A simple blog application built with Next.js, TypeScript, [React](https://reactjs.org/), and [EdgeDB](https://www.edgedb.com/docs) on the backend.
+
+## 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-edgedb&project-name=with-edgedb&repository-name=with-edgedb&env=EDGEDB_DSN)
+
+## How to use
+
+### Download the example project
+
+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:
+
+```bash
+npx create-next-app --example with-edgedb with-edgedb-app
+# or
+yarn create next-app --example with-edgedb with-edgedb-app
+# or
+pnpm create next-app -- --example with-edgedb with-edgedb-app
+```
+
+Then `cd` into the created directory.
+
+```bash
+$ cd with-edgedb-app
+```
+
+### Install the CLI
+
+First install the EdgeDB CLI if you haven't already.
+
+```bash
+# macOS/Linux
+$ curl --proto '=https' --tlsv1.2 -sSf https://sh.edgedb.com | sh
+
+# Windows (Powershell)
+$ iwr https://ps1.edgedb.com -useb | iex
+```
+
+### Initialize the EdgeDB project
+
+Initialize the project with the following CLI command:
+
+```bash
+$ edgedb project init
+```
+
+After you follow the prompts, this command will spin up a local EdgeDB instance and apply all the migrations inside `dbschema/migrations`. Now that the project is initialized, all EdgeDB clients initialized inside the project directory will connect to this instance automatically—no need for environment variables or hard-coded configuration. ([Read more about projects here.](https://www.edgedb.com/docs/guides/projects))
+
+### Install dependencies
+
+Install npm dependencies:
+
+```bash
+$  npm install
+# or
+$  yarn
+```
+
+### Generate the query builder
+
+This project uses the EdgeQL query builder for TypeScript. This tool can express any EdgeQL query in a code-first way and infers a static return type. Generate it with the following command:
+
+```bash
+$ npx edgeql-js
+```
+
+The query builder consists of several files that are generated into the `dbschema/edgeql-js` directory. Import it like so:
+
+```ts
+import e from './dbschema/edgeql-js'
+```
+
+### Seed the database
+
+```bash
+$ npx ts-node seed.ts
+```
+
+### Start the app
+
+```bash
+$ yarn dev
+```
+
+The application should now be running on http://localhost:3000.
+
+## Notes
+
+#### packages structure
+
+- `/`: See all published posts
+- `/drafts`: See all drafts
+- `/create`: Form to create new draft
+- `/blog/:id`: See either an edit page or a published post, depending on the publish status of the post.
+
+#### API structure
+
+- `POST /api/post`: Create a new post
+  - Body: `{title: string; content: string; authorName: string}`
+- `PATCH /api/post/:id`: Update a post by `id`
+  - Body: `{title?: string; content?: string;}`
+- `PUT /api/publish/:id`: Publish a post by `id`
+- `DELETE /api/post/:id`: Delete a post by `id`
+
+## Evolving the app
+
+Evolving the application typically requires three steps:
+
+1. Update the schema in `dbschema/default.esdl`
+2. Generate a new migration with `edgedb migration create`
+3. Apply the migration with `edgedb migrate`
+4. Regenerate the query builder with `npx edgeql-js`
+5. Update the application code, as needed.
+
+## Deployment
+
+To deploy this application, deploy EdgeDB to your preferred cloud provider:
+
+- [AWS](https://www.edgedb.com/docs/guides/deployment/aws_aurora_ecs)
+- [Google Cloud](https://www.edgedb.com/docs/guides/deployment/gcp)
+- [Azure](https://www.edgedb.com/docs/guides/deployment/azure_flexibleserver)
+- [DigitalOcean](https://www.edgedb.com/docs/guides/deployment/digitalocean)
+- [Fly.io](https://www.edgedb.com/docs/guides/deployment/fly_io)
+- [Docker](https://www.edgedb.com/docs/guides/deployment/docker) (cloud-agnostic)
+
+Then:
+
+1. Find your instance's DSN (AKA connection string). The exact instructions for this depend on which cloud you are deploying to.
+
+2. Use this DSN to migrate your remote instance to the latest schema. Run this command from inside your project directory.
+
+```
+edgedb migrate --dsn <your-instance-dsn> --tls-security insecure
+```
+
+You have to disable TLS checks with `--tls-security insecure`. All EdgeDB instances use TLS by default, but configuring it is out of scope of this project.
+
+3. Deploy this app to Vercel with the button above. You'll be prompted to provide a value for `EDGEDB_DSN`, the value from the previous step.
+
+4. Open the application at the deployment URL supplied by Vercel.
+
+## Next steps
+
+- Check out the [EdgeDB docs](https://www.edgedb.com/docs)
+- Join the EdgeDB [Discord server](https://edgedb.com/p/discord)
+- Check out the code on [GitHub](https://github.com/edgedb/edgedb)

examples/with-edgedb/client.ts

@@ -0,0 +1,9 @@
+import { createClient } from 'edgedb'
+import e from './dbschema/edgeql-js'
+
+// reads value of EDGEDB_DSN automatically
+export const client = createClient({
+  // TLS configuration is beyond the scope of this example project
+  tlsSecurity: 'insecure',
+})
+export { e }

examples/with-edgedb/components/Header.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Header: React.FC = () => {
+  return (
+    <nav>
+      <div className="left">
+        <Link href="/">
+          <a>Blog</a>
+        </Link>
+        <Link href="/drafts">
+          <a>Drafts</a>
+        </Link>
+      </div>
+      <div className="right">
+        <Link href="/create">
+          <a>+ New draft</a>
+        </Link>
+      </div>
+      <style jsx>{`
+        nav {
+          display: flex;
+          padding: 2rem;
+          align-items: center;
+        }
+
+        .bold {
+          font-weight: bold;
+        }
+
+        a {
+          text-decoration: none;
+          color: #000;
+          display: inline-block;
+        }
+
+        a + a {
+          margin-left: 1rem;
+        }
+
+        .right {
+          margin-left: auto;
+        }
+
+        .right a {
+          border: 2px solid black;
+          padding: 0.5rem 1rem;
+          border-radius: 3px;
+        }
+      `}</style>
+    </nav>
+  )
+}
+
+export default Header

examples/with-edgedb/components/Layout.tsx

@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react'
+import Header from './Header'
+
+type Props = {
+  children: ReactNode
+}
+
+const Layout: React.FC<Props> = (props) => (
+  <div style={{ paddingBottom: '30px' }}>
+    <Header />
+    <div className="layout">{props.children}</div>
+    <style jsx global>{`
+      html {
+        box-sizing: border-box;
+      }
+
+      *,
+      *:before,
+      *:after {
+        box-sizing: inherit;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        font-size: 16px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+          Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+          'Segoe UI Symbol';
+        background: rgba(0, 0, 0, 0);
+      }
+
+      input,
+      textarea,
+      button {
+        font-size: 16px;
+      }
+
+      button {
+        cursor: pointer;
+      }
+    `}</style>
+    <style jsx>{`
+      .layout {
+        padding: 0 2rem;
+      }
+    `}</style>
+  </div>
+)
+
+export default Layout

examples/with-edgedb/components/Post.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import Link from 'next/link'
+import { PostProps } from '../pages/blog/[id]'
+
+const Post: React.FC<{ post: PostProps }> = ({ post }) => {
+  return (
+    <Link href={`/blog/${post.id}`} passHref>
+      <div>
+        <h2>{post.title}</h2>
+        <small>By {post.authorName}</small>
+        <br />
+        <br />
+        <ReactMarkdown className={'react-markdown'}>
+          {post.content || ''}
+        </ReactMarkdown>
+        <style jsx>{`
+          div {
+            color: inherit;
+            padding: 2rem;
+            cursor: pointer;
+          }
+          h2 {
+            margin: 0px;
+            padding-bottom: 4px;
+          }
+          small {
+            color: #888;
+          }
+          .react-markdown,
+          .react-markdown > p {
+            margin: 0px;
+          }
+        `}</style>
+      </div>
+    </Link>
+  )
+}
+
+export default Post

examples/with-edgedb/dbschema/default.esdl

@@ -0,0 +1,11 @@
+module default {  
+
+  type Post {
+    required property title -> str;
+    required property content -> str { default := '' };
+    required property authorName -> str { default := 'Unknown author' };
+    property published -> datetime;
+    property publishedISO := <str>.published;
+  }
+
+}

examples/with-edgedb/dbschema/migrations/00001.edgeql

@@ -0,0 +1,15 @@
+CREATE MIGRATION m1gcnribdubi476w7daqzhuxvbutfpiqyhhbm2nyfv3xhzc6z757ia
+    ONTO initial
+{
+  CREATE TYPE default::Post {
+      CREATE REQUIRED PROPERTY authorName -> std::str {
+          SET default := 'Unknown author';
+      };
+      CREATE REQUIRED PROPERTY content -> std::str {
+          SET default := '';
+      };
+      CREATE PROPERTY published -> std::datetime;
+      CREATE PROPERTY publishedISO := (<std::str>.published);
+      CREATE REQUIRED PROPERTY title -> std::str;
+  };
+};

examples/with-edgedb/edgedb.toml

@@ -0,0 +1,2 @@
+[edgedb]
+server-version = "1.2"

examples/with-edgedb/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.