use common in vercel example

Author: ruslantalpa

vercel-postgresql-neon/.dockerignore

@@ -2,7 +2,6 @@ Dockerfile
 .dockerignore
 node_modules
 npm-debug.log
-README.md
 .next
 .git
 .env.local

vercel-postgresql-neon/.gitignore

@@ -38,3 +38,6 @@ next-env.d.ts
 .state
 db.sqlite
 fly.toml
+
+# wrangler cache
+.wrangler

vercel-postgresql-neon/README.md

@@ -1,13 +1,11 @@
 # Northwind Traders (by subZero)
 ### Running on Vercel + PostgreSQL (Neon)
 This is a demo of the Northwind dataset, see it live at [northwind-postgresql.vercel.app/](https://northwind-postgresql.vercel.app/).
-- Frontend is implemented in NextJS</li>
+- Frontend is implemented in NextJS
 - Backend is implemented in Typescript and leverages subZero as a library to automatically expose a PostgREST compatible backend on top of the underlying database
-- Data is stored in a PostgreSQL database
+- Data is stored in a PostgreSQL database hosted on [Neon](https://neon.tech/)
 - Everything is deployed to [Vercel](https://vercel.com)
 
-This dataset was sourced from [northwind-SQLite3](https://github.com/jpwhite3/northwind-SQLite3)
-
 ## Running locally
 - Clone the repo
 - Install dependencies (you will need to have SQLite installed on your machine)
@@ -32,7 +30,7 @@ This dataset was sourced from [northwind-SQLite3](https://github.com/jpwhite3/no
 - Setup a PostgreSQL database on [Neon](https://neon.tech) and get a connection string
 - Provision the database
   ```bash
-  psql <db_connection_string> -f northwindtraders.sql
+  psql <db_connection_string> -f northwindtraders-postgresql.sql
   ```
 - Link the current directory to a Vercel project
   ```bash
@@ -47,26 +45,29 @@ This dataset was sourced from [northwind-SQLite3](https://github.com/jpwhite3/no
     vercel --prod
     ```
 
-
-
-
-
-
 ## Implementation details
 
 Most of the files in this directory are your basic NextJS setup with some configuration for tailwindcss and typescript.
 The interesting files are:
 
-- The file implementing [the backend](pages/api/[...path].ts)
+- The file implementing [the backend](https://github.com/subzerocloud/showcase/blob/main/vercel-postgresql-neon/pages/api/%5B...path%5D.ts)
     Most of the code deals with the configuration of the backend, and 99% of the functionality is withing these lines:
     ```typescript
     // parse the Request object into and internal AST representation
-    let subzeroRequest = await subzero.parse(publicSchema, `${urlPrefix}/`, role, request)
+    let subzeroRequest = await subzero.parse(publicSchema, `${urlPrefix}/`, role, req)
     // .....
     // generate the SQL query from the AST representation
-    const { query, parameters } = subzero.fmt_main_query(subzeroRequest, queryEnv)
+    const { query, parameters } = subzero.fmtMainQuery(subzeroRequest, queryEnv)
     // .....
     // execute the query
-    const r = await db.query(query, parameters)
+    result = (await db.query(query, parameters)).rows[0]
+    // .....
+    // send the response back to the client
+    res.send(result.body)
     ```
 
+### Credits
+
+- This dataset was sourced from [northwind-SQLite3](https://github.com/jpwhite3/northwind-SQLite3)
+- Inspired by [Cloudflare D1 Demo](https://northwind.d1sql.com/)
+

vercel-postgresql-neon/declarations.d.ts

@@ -1,4 +1,9 @@
 declare module '*.sql' {
     const content: string;
     export default content;
+}
+
+declare module '*.md' {
+    const content: string;
+    export default content;
 }

vercel-postgresql-neon/docker-compose.yaml

@@ -11,4 +11,4 @@ services:
       - POSTGRES_DB=app
 
     volumes:
-      - "./northwindtraders.sql:/docker-entrypoint-initdb.d/northwindtraders.sql"
+      - "./northwindtraders-postgres.sql:/docker-entrypoint-initdb.d/northwindtraders-postgres.sql"

vercel-postgresql-neon/next.config.js

@@ -3,6 +3,13 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   output: 'standalone',
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.md$/,
+      use: 'raw-loader'
+    })
+    return config
+  }
 }
 
 module.exports = nextConfig

vercel-postgresql-neon/northwindtraders.sql renamed to vercel-postgresql-neon/northwindtraders-postgres.sql

@@ -8,18 +8,20 @@
     "start": "next start"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.3",
-    "@heroicons/react": "^2.0.12",
-    "@types/yargs": "^17.0.13",
+    "pg": "^8.8.0",
     "itty-router": "^2.6.6",
     "next": "12.3.1",
-    "pg": "^8.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^8.0.3",
     "subzerocloud": "^0.1.3",
     "swr": "^1.3.0"
   },
   "devDependencies": {
+    "@headlessui/react": "^1.7.3",
+    "@heroicons/react": "^2.0.12",
+    "@tailwindcss/typography": "^0.5.7",
+    "@types/yargs": "^17.0.13",
     "@tailwindcss/forms": "^0.5.3",
     "@types/node": "18.11.0",
     "@types/pg": "^8.6.5",
@@ -28,6 +30,7 @@
     "autoprefixer": "^10.4.12",
     "postcss": "^8.4.18",
     "tailwindcss": "^3.1.8",
-    "typescript": "4.8.4"
+    "typescript": "4.8.4",
+    "raw-loader": "^4.0.2"
   }
 }

vercel-postgresql-neon/package.json

@@ -123,8 +123,7 @@ router.all('/:table', async (req: NextApiRequest, res: NextApiResponse) => {
     try {
         const txMode = method === 'GET' ? 'READ ONLY' : 'READ WRITE'
         db.query(`BEGIN ISOLATION LEVEL READ COMMITTED ${txMode}`)
-        const r = await db.query(query, parameters)
-        result = r.rows[0]
+        result = (await db.query(query, parameters)).rows[0]
         db.query('COMMIT')
     } catch (e) {
         throw e

vercel-postgresql-neon/pages/api/[...path].ts

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getCustomers } from '../utils/api'
 
 const limit = 20
 const title = 'Customers'
@@ -19,8 +18,7 @@ const columns = [
 const Customers: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const options = {headers: {'Prefer': 'count=exact'}}
-    const { data, error } = useSWR<any>([`/api/Customers?limit=${limit}&offset=${offset}`, options], fetcher)
+    const { data, error } = getCustomers(offset, limit)
     const { first, last, total, rows } = data || {}
 
     return (

vercel-postgresql-neon/pages/customers.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getStats } from '../utils/api'
 
 const limit = 5
 const title = 'Dashboard'
@@ -21,8 +20,7 @@ const columns = [
 const Dashboard: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const randomInt = Math.floor(Math.random() * 1000)
-    const { data, error } = useSWR<any>(`/api/stats`, fetcher)
+    const { data, error } = getStats()
     const { rows:all_rows } = data || {}
     const total = all_rows?.length || 0
     const first = offset

vercel-postgresql-neon/pages/dash.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getEmployees } from '../utils/api'
 
 const limit = 20
 const title = 'Employees'
@@ -18,8 +17,7 @@ const columns = [
 const Employees: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const options = {headers: {'Prefer': 'count=exact'}}
-    const { data, error } = useSWR<any>([`/api/Employees?select=Name:$concat(FirstName, LastName),Title,Address,City,Country&limit=${limit}&offset=${offset}`, options], fetcher)
+    const { data, error } = getEmployees(offset, limit)
     const { first, last, total, rows } = data || {}
 
     return (

vercel-postgresql-neon/pages/employees.tsx

@@ -1,29 +1,14 @@
-/* eslint-disable @next/next/no-img-element */
 import type { NextPage } from 'next'
+import ReactMarkdown from 'react-markdown'
+import readme from '../README.md'
 const Home: NextPage = () => {
     return (
         <div className="px-8 mt-5">
-            <div>
-                <h1 className="text-xl font-semibold text-gray-900">Welcome to Northwind Traders (by subZero)</h1>
-            </div>
-            <div className="mx-auto py-4 text-base card-content">
-                
-                <h2 className='text-xl text-gray-400 mb-5'>Running on Varcel and Neon</h2>
-                <img alt='' className='float-right object-scale-down w-96' src="dbimage.webp" />
-                <p className='pt-4'>This is a demo of the Northwind dataset</p>
-                <p className='pt-4'>You can see the <a className='link' href='https://github.com/subzerocloud/showcase/tree/main/vercel-postgresql-neon'>source code</a> and additional implementation details on Github</p>
-                
-                <ul>
-                    <li className='pt-4'>Frontend is implemented in NextJS</li>
-                    <li className='pt-4'>Backend is implemented in Typescript and leverages subZero as a library to automatically expose a PostgREST compatible backend on top of the underlying database</li>
-                    <li className='pt-4'>Data is stored in a PostgreSql database and hosted on <a href="https://neon.tech/" className='link'>Neon</a> </li>
-                    <li className='pt-4'>Everything is deployed to <a href="https://vercel.com/" className='link'>Vercel</a></li>
-                </ul>
-                <p className='pt-4'>This dataset was sourced from <a className='link' href="https://github.com/jpwhite3/northwind-SQLite3">northwind-SQLite3</a>.</p>
-
-                <p className='pt-4'>You can use the UI to explore Supplies, Orders, Customers, Employees and Products, or you can use search if you know what you&apos;re looking for.</p>
-                
-            </div>
+            <article className="prose prose-slate">
+            <ReactMarkdown
+                children={readme}
+                />
+            </article>
         </div>
     );
 }

vercel-postgresql-neon/pages/index.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getOrders } from '../utils/api'
 
 const limit = 20
 const title = 'Orders'
@@ -21,8 +20,7 @@ const columns = [
 const Orders: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const options = {headers: {'Prefer': 'count=exact'}}
-    const { data, error } = useSWR<any>([`/api/Orders?select=OrderID,ShippedDate:ShippedDate::date,ShipName,ShipCity,ShipCountry,details:Order Details(ProductID,UnitPrice,Quantity)&limit=${limit}&offset=${offset}`, options], fetcher)
+    const { data, error } = getOrders(offset, limit)
     const { first, last, total, rows } = data || {}
 
     return (

vercel-postgresql-neon/pages/orders.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getProducts } from '../utils/api'
 
 const limit = 20
 const title = 'Products'
@@ -18,8 +17,7 @@ const columns = [
 const Products: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const options = {headers: {'Prefer': 'count=exact'}}
-    const { data, error } = useSWR<any>([`/api/Products?limit=${limit}&offset=${offset}`, options], fetcher)
+    const { data, error } = getProducts(offset, limit)
     const { first, last, total, rows } = data || {}
 
     return (

vercel-postgresql-neon/pages/products.tsx

@@ -1,8 +1,7 @@
 import type { NextPage } from 'next'
 import {useState} from 'react'
-import useSWR from 'swr'
 import Table from '../components/table'
-import { fetcher } from '../utils/utils'
+import { getSuppliers } from '../utils/api'
 
 const limit = 20
 const title = 'Suppliers'
@@ -19,8 +18,7 @@ const columns = [
 const Suppliers: NextPage = () => {
     const [page, setPage] = useState(1)
     const offset = (page - 1) * limit
-    const options = {headers: {'Prefer': 'count=exact'}}
-    const { data, error } = useSWR<any>([`/api/Suppliers?limit=${limit}&offset=${offset}`, options], fetcher)
+    const { data, error } = getSuppliers(offset, limit)
     const { first, last, total, rows } = data || {}
 
     return (

vercel-postgresql-neon/pages/suppliers.tsx

@@ -1,6 +1,7 @@
 // While the introspection query can detect most relations automaticlly based on foreign keys,
 // in situations where they are not detected (ex: views in sqlite).
 // Custom relations can be defined here
+
 export default [
     // {
     //     "constraint_name": "tasks_project_id_fkey",

vercel-postgresql-neon/relations.js

@@ -9,6 +9,7 @@ module.exports = {
   ],
   plugins: [
     require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
   ],
   theme: {},
 };

vercel-postgresql-neon/tailwind.config.js

@@ -17,5 +17,5 @@
     "sourceMap": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "functions/**/*"]
 }

vercel-postgresql-neon/tsconfig.json

@@ -0,0 +1,49 @@
+import { parseRangeHeader } from 'subzerocloud'
+import useSWR from 'swr'
+interface FetcherResult {
+    status: number
+    first: number
+    last: number
+    total: number
+    rows: any
+}
+const apiBaseUrl = '/api'
+const common_options = { headers: { 'Prefer': 'count=exact' } };
+
+export async function fetcher(url: string, options?: any): Promise<FetcherResult> {
+    return await fetch(url, options).then(async (res) => {
+        const status = res.status
+        const rows:any = await res.json()
+
+        if (status >= 400) { 
+            throw new Error(rows.message) 
+        }
+        const { first, last, total } = parseRangeHeader(res.headers.get('Content-Range') || '')
+        return { status, first, last, total, rows }
+    })
+}
+
+export function getSuppliers(offset: number, limit: number) {
+    return useSWR<any>([`${apiBaseUrl}/Suppliers?limit=${limit}&offset=${offset}`, common_options], fetcher)
+}
+
+export function getProducts(offset: number, limit: number) {
+    return useSWR<any>([`${apiBaseUrl}/Products?limit=${limit}&offset=${offset}`, common_options], fetcher)
+}
+
+export function getOrders(offset: number, limit: number) {
+    const options = { headers: { 'Prefer': 'count=exact' } }
+    return useSWR<any>([`${apiBaseUrl}/Orders?select=OrderID,ShippedDate:ShippedDate::date,ShipName,ShipCity,ShipCountry,details:Order Details(ProductID,UnitPrice,Quantity)&limit=${limit}&offset=${offset}`, common_options], fetcher)
+}
+
+export function getEmployees(offset: number, limit: number) {
+    return useSWR<any>([`${apiBaseUrl}/Employees?select=Name:$concat(FirstName, LastName),Title,Address,City,Country&limit=${limit}&offset=${offset}`, common_options], fetcher)
+}
+
+export function getStats() {
+    return useSWR<any>(`${apiBaseUrl}/stats`, fetcher)
+}
+
+export function getCustomers(offset: number, limit: number) {
+    return useSWR<any>([`${apiBaseUrl}/Customers?limit=${limit}&offset=${offset}`, common_options], fetcher)
+}