I am making an edit function for objects in my postgres database. I am using nextauth as well for my session. When I try to submit form data (like updating the fields defined in my schema), I get an error, client_fetch_error undefined Posting to the database works just fine. (By the way I am new to web development as a whole)
I am using next version 12.1.2 and next-auth 4.24.6
Apologies if I didn’t include some information that would be useful, ask away if I left out anything.
Here is the route that has all of the code for the edit page,
import React, { useState } from "react";
import { GetServerSideProps } from "next";
import ReactMarkdown from "react-markdown";
import Layout from "../../../components/Layout";
import Router from "next/router";
import { PostProps } from "../../../components/Post";
import prisma from '../../../lib/prisma'
import { useSession } from "next-auth/react";
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
const course = await prisma.course.findUnique({
where: {
id: String(params?.id) ,
},
include: {
author: {
select: { name: true, email: true,},
},
},
});
return {
props: course,
};
};
const Post: React.FC<PostProps> = (props) => {
const { data: session, status } = useSession();
if (status === 'loading') {
return <div>Authenticating ...</div>;
}
const userHasValidSession = Boolean(session);
const postBelongsToUser = session?.user?.email === props.author?.email;
let title = props.title;
title = `${title}`;
const [desc, setDesc] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [number, setPhone] = useState("");
const [courseid, setCourseid] = useState("");
const submitData = async (e: React.SyntheticEvent) => {
console.log("got to submit")
e.preventDefault();
try {
const body = { title, courseid, name, email, number, desc };
await fetch(`/api/post/${props.id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
await Router.push("/");
} catch (error) {
console.error(error);
}
};
return (
<Layout>
<div>
<h2>{title}</h2>
<p>By {props?.author?.name || "Unknown author"}</p>
<ReactMarkdown children={props.desc} />
<form onSubmit={submitData}>
<h3>Course ID</h3>
<input
autoFocus
onChange={(e) => setCourseid(e.target.value)}
placeholder="e.g. Math 301"
type="text"
value={courseid}
/>
<h3>Teacher's Name</h3>
<input
autoFocus
onChange={(e) => setName(e.target.value)}
placeholder="Teacher Name"
type="text"
value={name}
/>
<h3>Email</h3>
<input
autoFocus
onChange={(e) => setEmail(e.target.value)}
placeholder="Email"
type="text"
value={email}
/>
<h3>Phone</h3>
<input
autoFocus
onChange={(e) => setPhone(e.target.value)}
placeholder="Number"
type="text"
value={number}
/>
<textarea
cols={50}
onChange={(e) => setDesc(e.target.value)}
placeholder="Important Notes"
rows={8}
value={desc}
/>
{userHasValidSession && postBelongsToUser && (
<button type="submit">Edit</button>
)}
<a className="back" href="#" onClick={() => Router.push("/")}>
or Cancel
</a>
</form>
</div>
</Layout>
);
};
export default Post;
