「Next.js 13新機能のApp DirectoryとSupabaseでブログ構築」のstore.js内のnameとavater_urlを追加したい。

解決済

React

初心者

Node.js

nekomusume

2023/06/16 15:54

実現したいこと

/store/index.ts内にあるUserに対しsupabaseのprofileから取得したnameとavater_urlを追加したい。

発生している問題

/store/index.ts内のuserにnameとavater_urlを追加してみました。

しかしこのままではnameとavater_urlは空白のままです。
この後どうすれば良いかわかりません。

ログインしたタイミングでsupabaseのprofileデータからnameとavater_urlを取得してstore内の変数を更新したいです。

ソースコード

/store/index.ts

import { create } from 'zustand'

type User = {
  id: string | undefined
  email: string | undefined
  name: string | null
  avater_url: string | null
}

type State = {
  user: User
  setUser: (payload: User) => void
}

const useStore = create<State>((set) => ({
  // 初期値
  user: { id: '', email: '', name:'' , avater_url:'' }
  // アップデート
  setUser: (payload) => set({ user: payload }),
}))


export default useStore

自分で試したこと

アバターアイコンをヘッダーに作りたいためstore内にnameとavater_urlを保有することを思いついた次第です。

補足情報

回答 2件

回答するにはログインが必要です

はる@講師

2年以上前

supabase-listener.tsxで、ユーザーIDとメールアドレスを状態管理に設定していますので、名前とアバターURLを取得して、設定してみてください。

リスナー関数は認証状態を監視していますので、ここで設定するのが良いかと思います。

nekomusume

2年以上前

参考URL：
先日ご回答いただいたソース（https://www.fullstackchannel.com/questions/112）

「supabase-listener.tsx」setUserの中に下記のようにnameとavater_urlを追加してみたところ出来ました。
ありがとうございます！

        setUser({
          id,
          email,
          name,
          avatar_url,
        })

import { create } from 'zustand' type User = { id: string | undefined email: string | undefined name: string | null avater_url: string | null } type State = { user: User setUser: (payload: User) => void } const useStore = create<State>((set) => ({ // 初期値 user: { id: '', email: '', name:'' , avater_url:'' } // アップデート setUser: (payload) => set({ user: payload }), })) export default useStore