导航栏中的用户名Next.js -Typescript-Supabase

Question

我试图在导航栏中获得用户的用户名。用户名=列"用户名";表"profiles"在我的Supabase数据库。正如您在下面看到的，它现在被用户的电子邮件填充。我不能简单地将其更改为用户。用户名因为"user"是错的表…

我的导航。TSX组件看起来像这样:

import { useUser, useSupabaseClient } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import Link from "next/link";
const NavbarComponent = () => {
const supabaseClient = useSupabaseClient();
const user = useUser();
const router = useRouter();
function signOutUser() {
supabaseClient.auth.signOut();
router.push("/"); // localhost:3000
}
return (
<Navbar isBordered isCompact>
<Navbar.Brand as={Link} href="/">
ShareArticles
</Navbar.Brand>
<Navbar.Content hideIn="xs" variant="highlight-rounded">
<Navbar.Link href="/mainFeed">Main Feed</Navbar.Link>
<Navbar.Link href="/createArticle">Create Article</Navbar.Link>
</Navbar.Content>
<Navbar.Content>
{!user ?  /*User doesnt exist*/
<>
<Navbar.Link href="/login">
<Button auto flat>
Login
</Button>
</Navbar.Link>
</>
:         /* User does exist */
<>
<Navbar.Item>
<Navbar.Link href="/updateAccount">{user?.email}</Navbar.Link> 
// Here is now the email, but I want the username! of the table profiles
</Navbar.Item>
<Navbar.Item>
<Button auto flat onPress={() => signOutUser()}>
Sign Out
</Button>
</Navbar.Item>
</>
}  
</Navbar.Content>
</Navbar>
) 
}
export default NavbarComponent;  

我_app。TSX是这样的:

import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { SessionContextProvider } from "@supabase/auth-helpers-react";
import { useState } from "react";
import { NextUIProvider } from "@nextui-org/react";
import { Box } from "../components/Box";
import Navbar from '../components/NavbarComponent';
import { userAgent } from 'next/server';
// Providers (providing Supabase to our application, nextui providers)
// Navbar
// Navbar
// Box (container for the content)
function MyApp({ Component, pageProps }: AppProps) {
const [supabaseClient] = useState(() => createBrowserSupabaseClient());
// Supabase URL? Supabase Anon key? CREATE A SUPABASE ACCOUNT
return  (
<SessionContextProvider
supabaseClient={supabaseClient}
>
<NextUIProvider>
<Navbar/>
<Box css={{ px: "$12", py: "$15", mt: "$12", "@xsMax": {px: "$10"}, maxWidth: "800px", margin: "0 auto" }}>
<Component {...pageProps} />
</Box>
</NextUIProvider>
</SessionContextProvider>
)
}
export default MyApp

提前感谢!

我已经尝试将useUser更改为useProfiles并添加

type Profiles = Database["public"]["Tables"]["profiles"]["Row"];

但是什么都没起作用…我是Nextjs框架的新手，除了supabase本身的文档之外，我找不到任何关于从supabase表中获取数据的有用信息。对不起，我的英语不好，提前谢谢

Answer 1

您是否使用任何入门模板或遵循任何教程?

useUser是由auth-helper实现的钩子，用来提供user对象。

要从配置文件表中获取数据，可以使用supabase-js:

const getUserDetails = () => supabase.from('profiles').select('username').single();

你可以实现你自己的钩子，你可以在整个应用程序中使用它来引用回用户的详细信息。

你可以在这里找到一个这样的钩子实现的例子:https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/useUser.tsx

Answer 2

我做到了，解决方案:

import { Navbar, Button, Text } from "@nextui-org/react";
import {  useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { useRouter } from "next/router";
import Link from "next/link";
// import { useUser } from '@utils/useUser';
import { User } from '@supabase/supabase-js';
import { useEffect, useState } from "react";
const NavbarComponent = () => {
const supabaseClient = useSupabaseClient();
const user = useUser();
const router = useRouter();
const [profile, setProfile] = useState<any>({});
useEffect( () => {
async function getProfile() {
const {data, error} = await supabaseClient
.from("profiles")
.select("*")
.filter("id", "eq", user?.id)
.single();
if (error) {
console.log(error);
} else {
setProfile(data);
}
}
if(typeof user?.id !== "undefined") {
getProfile();
}
}, [user?.id])

function signOutUser() {
supabaseClient.auth.signOut();
router.push("/"); // localhost:3000
}
return (
<Navbar isBordered isCompact>
<Navbar.Brand as={Link} href="/">
ShareArticles
</Navbar.Brand>
<Navbar.Content hideIn="xs" variant="highlight-rounded">
<Navbar.Link href="/mainFeed">Main Feed</Navbar.Link>
<Navbar.Link href="/createArticle">Create Article</Navbar.Link>
</Navbar.Content>
<Navbar.Content>
{!user ?  /*User doesnt exist*/
<>
<Navbar.Link href="/login">
<Button auto flat>
Login
</Button>
</Navbar.Link>
</>
:         /* User does exist */
<>
<Navbar.Item>
<Navbar.Link href="/updateAccount">{profile.username}</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Navbar.Link href="/testNav">testNav</Navbar.Link>
</Navbar.Item>
<Navbar.Item>
<Button auto flat onPress={() => signOutUser()}>
Sign Out
</Button>
</Navbar.Item>
</>
}  
</Navbar.Content>
</Navbar>
)
}
export default NavbarComponent;