我在我的Next.js项目中遇到了很多问题。我有一个postgres数据库,我设置,我使用棱镜。我创建了一个文件,它从一个API中拉取我想要的所有数据,并将其存储在DB中。我现在正试图在我的页面上使用这些数据。我创建了一个名为connect-db.ts的文件,它位于pages/API目录中。我也试着把它移到lib目录。我一直得到这个错误:我不知道我在这里还能做什么。我已经看到了关于这个问题的其他帖子,但大多数只是说你不能在浏览器中运行棱镜,我知道我只是有困难实现它。
connect-db.ts:
import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient();
export async function getAllIssues() {
const allIssues = await prisma.issue.findMany({
});
return allIssues;
}
export async function getProjects() {
const projects = await prisma.projects.findMany({
});
return projects;
}
export async function getAllData() {
const allIssues = await getAllIssues();
const projects = await getProjects();
return {
allIssues,
projects,
};
}
这是使用此数据的 Jmeter 板文件。
import React, { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import Layout from "../components/layout";
import AccessDenied from "../components/access-denied";
import { getData } from "./api/connect-db";
interface Issue {
id: string;
url: string;
title: string;
identifier: string;
createdAt: string;
}
export default function Dashboard() {
const [myName, setMyName] = useState("");
const [myIssues, setMyIssues] = useState<Issue[]>([]);
const [pagination, setPagination] = useState({ first: 20, after: null });
const accessToken = process.env.NEXT_PUBLIC_TOKEN;
const [projects, setProjects] = useState<any[]>([]);
useEffect(() => {
async function getIssues() {
try {
const data = await getData(accessToken);
setMyName(data.myName); // Use the myName property from the data object
setAllIssues(data.allIssues.nodes);
setProjects(data.projects.nodes);
} catch (error) {
console.error("Error retrieving data:", error);
}
}
getIssues();
}, [accessToken]);
const { data: session } = useSession();
if (!session) {
return (
<Layout>
<AccessDenied />
</Layout>
);
}
const createNewTask = () => {
window.location.href = "";
};
const loadMoreIssues = async () => {
const lastIssue = allIssues[allIssues.length - 1];
const after = lastIssue ? lastIssue.id : null;
setPagination((prevPagination) => ({ ...prevPagination, after }));
};
return (
<Layout>
<div className="">
<h1 className="text-6xl py-5">Hi, {myName}</h1>
<div className="text-3xl my-5">Welcome to your Dashboard.</div>
<section className="mt-5">
<div className="text-2xl">
<button
className="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
onClick={createNewTask}
>
New Task
</button>
</div>
{allIssues.length ? (
<Cards issues={allIssues} linkable={session.role !== "admin"} />
) : (
<div>No issues found.</div>
)}
</section>
{allIssues.length >= 20 && (
<section className="mt-5">
<button
onClick={loadMoreIssues}
className="bg-gray-200 hover:bg-gray-200 text-green-800 rounded-md px-3 py-2 mt-2"
>
Load More
</button>
</section>
)}
</div>
</Layout>
);
}
我肯定我做错了什么,但我正在学习next.js,我认为这是如何工作的,所以现在我有点即兴发挥,可以使用一些帮助。
1条答案
按热度按时间vsdwdz231#
我想问题出在这条线上
在这里,您正在将一个依赖于Prisma的函数导入到您的客户端(react) Jmeter 板,这意味着您基本上是在客户端上示例化Prisma。
如果你想在你的客户端从你的/API获取数据,你必须获取它。例如:
基本上你必须在useEffect中使用fetch({...})而不是getData
不要忘记你的API/connect-db应该有一个默认的导出,比如