Я пытаюсь получить имя пользователя на панели навигации. Имя пользователя = столбец «имя пользователя» таблицы "profiles"
в моей базе данных Supabase. Как вы можете видеть ниже, на данный момент он заполнен электронными письмами пользователей. Я не могу изменить его просто на user.username, потому что «пользователь» - это неправильная таблица.
Мой компонент navbar.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 и не могу найти ничего полезного в извлечении данных из таблиц супабазы, кроме документов самой супабазы. Извините за мой плохой английский .. Заранее спасибо
Используете ли вы какой-либо начальный шаблон или следуете какому-либо руководству?
useUser
— это хук, реализованный auth-helper
для предоставления пользовательского объекта.
Чтобы получить эти данные из таблицы профилей, вы можете использовать supabase-js:
const getUserDetails = () => supabase.from('profiles').select('username').single();
Вы можете реализовать свой собственный хук, который вы можете использовать в своем приложении, чтобы ссылаться на данные пользователя.
Пример реализации такого хука вы можете найти здесь: https://github.com/vercel/nextjs-subscription-payments/blob/main/utils/useUser.tsx
мне нужно больше информации
Я сделал это, решение:
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.info(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;
Спасибо за ответ. Да, я использовал следующий учебник: youtube.com/watch?v=Doy2OfNvnoI