import type { NextPage } from "next"; import Head from "next/head"; import styles from "../styles/Home.module.css"; import useSWR, { mutate } from "swr"; import React, { useState } from "react"; async function httpGet(url: string) { const resp = await fetch(url); return resp.json(); } async function httpPost(url: string, payload: any) { return fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload), }); } async function httpDelete(url: string) { return fetch(url, { method: "DELETE" }); } const Home: NextPage = () => { const api = "/api/items"; const { data, error } = useSWR(api, httpGet, { revalidateOnFocus: false, }); const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [httpError, setHttpError] = useState(""); const handleSubmit = async (evt: any) => { evt.preventDefault(); const payload = { title: title, description: description, }; console.log(payload); const res = await httpPost(api, payload); console.log(res); if (res.status === 201) { setHttpError(""); mutate(api); } else { const body = await res.json(); console.log(body); setHttpError(body.error); } }; const handleDelete = async (id: string) => { console.log("delete", id); const res = await httpDelete(`${api}/${id}`); mutate(api); }; if (!error && !data) return
Loading...
; let errorComponent = ; if (error) errorComponent =
Error: {error}
; if (httpError) errorComponent =
Error: {httpError}
; return (
App Runner Multi-Region App

App Runner

Multi-Region App

{errorComponent}
{/* dynamic */}
{data.map((item: any) => { return (

{item.title}

{item.description}

); })}
); }; export default Home;