使用 NextJS、Prisma 和 ClerkJS 构建查询答案

【问题标题】：Building query with NextJS, Prisma, and ClerkJS使用 NextJS、Prisma 和 ClerkJS 构建查询
【发布时间】：2023-02-07 04:50:45
【问题描述】：

我正在使用 NextJS、Prisma 和 ClerkJS 制作项目原型。我试图了解如何为我的 Prisma 搜索子句提供各种参数/道具。特别是我需要从 ClerkJS 获取用户的电子邮件地址。这是我当前的索引文件：

import React from "react";
import prisma from "../../prisma/initPrisma"

const FacilitiesPage = ({ facilities }) => {
  return (
    <div className={styles.dashCards}>
      {facilities.map((facility) => {
        return (
          <div className={styles.card} key={facility.id}>
            <h4>{facility.name}</h4>
          </div>
        );
      })}
    </div>
  );
};

export async function getStaticProps() {
  const facilities = await prisma.facility.findMany({
    where: {
      ownerEmail: 'harcodedemail'
    },
  });

  return {
    props: {
      facilities,
    },
  };
}

export default FacilitiesPage;

显然我不能硬编码系统中每个用户的电子邮件地址。 ClerkJS 提供several ways 来查询用户对象并从中返回各种信息，我可以将其传递给getStaticProps（或可能是getServerSideProps）。但是我尝试过的任何东西都不起作用。坦率地说，我仍在学习“React 方式”来做很多事情。

TL;DR：如何为 getStaticProps 中的查询字符串提供 props？

【问题讨论】：

getStaticProps 在构建时在服务器上运行，它无权访问特定于请求的数据，如查询字符串。您应该将该逻辑移至客户端，或者改用getServerSideProps。
@juliomalves 好的，这就是我慢慢接受的。我还没有找到任何可靠的例子来说明我正在尝试使用 getServerSideProps 做什么，包括在 Prisma 文档中。你能给我举个具体的例子吗？谢谢！
如果您的目标是简单地检索查询字符串，getServerSideProps 提供一个context 对象作为参数，其中包含一个query 字段。
实际上我想做的是注入查询，使用当前登录用户的电子邮件地址来确定我的查询范围。
Clerk.dev 于 2022 年 8 月发布了有关 SSR 支持的文章（答案是肯定的，他们有一个新组件）clerk.dev/blog/next-js-ssr-authentication-with-clerk

标签： reactjs next.js prisma clerk

【解决方案1】：

Clerk.dev 的人刚刚回答了这个问题。您需要使用 getServerSideProps，然后使用新的“withServerSideAuth”组件。这是博客文章https://clerk.dev/blog/next-js-ssr-authentication-with-clerk 中的 sn-p：

import { withServerSideAuth } from "@clerk/nextjs/ssr";

export const getServerSideProps = withServerSideAuth(async ({ req, resolvedUrl }) => {
  const {sessionId,getToken} = req.auth;
 
    if (!sessionId) {
    return { redirect: { destination: "/sign-in?redirect_url=" + resolvedUrl } };
  }
    // use a token for your Clerk integrations
    const hasuraToken = await getToken({ template: 'hasura' });

    // retrieve data from your Hasura integration 
    
  return { props: {} };
});

【讨论】：