postgresql 在Next.js 13项目中使用prisma检索数据时出现问题

kmpatx3s  于 2023-06-29  发布在  PostgreSQL
关注(0)|答案(1)|浏览(196)

我在我的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,我认为这是如何工作的,所以现在我有点即兴发挥,可以使用一些帮助。

vsdwdz23

vsdwdz231#

我想问题出在这条线上

import { getData } from "./api/connect-db";

在这里,您正在将一个依赖于Prisma的函数导入到您的客户端(react) Jmeter 板,这意味着您基本上是在客户端上示例化Prisma。
如果你想在你的客户端从你的/API获取数据,你必须获取它。例如:

const data = await fetch("/api/connect-db")

基本上你必须在useEffect中使用fetch({...})而不是getData
不要忘记你的API/connect-db应该有一个默认的导出,比如

export default async function handler(req, res) {
  const allIssues = await prisma.issue.findMany({});

  return allIssues;
}

相关问题