こんにちは。
コメントのテストです。
よろしくお願いします。

グエン

回答もマークダウン形式を利用すると、見やすくなります。

```python
print("マークダウン")
```

はる@講師

## 実現したいこと

何を実現したいのか、具体的にご記載ください。

分かりやすい質問をすることで、回答しやくなります。                    


## 発生している問題

現在発生している問題とエラーメッセージをご記載ください。

エラーメッセージはマークダウン形式で書くと、見やすくなります。

```
AttributeError: xxxxxx
```                                                        

## ソースコード

エラー周辺のソースコードを、ご記載ください。                        

```python
# ニュース一覧
class NewsListView(ListAPIView):
    queryset = News.objects.all().order_by('-created_at')
    serializer_class = NewsSerializer
    permission_classes = (AllowAny,)
```

## 自分で試したこと

エラーを解決するために、試したことをご記載ください。

より回答しやくなります。    

## 補足情報

windowsとmacでは解決方法が異なる場合があります。

開発環境、言語、フレームワーク、バージョンなど、詳しくご記載ください。

### 実現したいこと
ユーザーが投稿した自分のブログのタイトルと作成日を表示するマイページを作りたいです。どのようにsupabaseからデータ取得して画面表示すればいいのかうまくいきません。

### 発生している問題
supabaseからuser.idに紐づくブログのtitleとcreated_atを取得してconsole.logでは表示できているのですが、return 部分で反映できず画面表示できません。

### ソースコード
`````
"use client";

import { format } from "date-fns";
import { useSupabase } from "../supabase-provider";
import useStore from "../../../store";

const BlogList = () => {
 const { supabase } = useSupabase();
 const { user } = useStore();

 // supabaseからリスト取得
 const getBlogList = async () => {
 const { data: blogsData } = await supabase
 .from("blogs")
 .select("id, title, created_at")
 .eq("profile_id", user.id)
 .order("created_at", { ascending: false }); // 作成日順に並び替え

 // リストが見つからない場合
 if (!blogsData) return;

 console.log(blogsData); // 正常にデータ取得できている
 };
 getBlogList();

 return (
 <ul>
 {blogsData.map((blog: any) => {
 return (
 <li key={blog.id}>
 {blog.title}
 
 {format(new Date(blog.created_at), "yyyy/MM/dd")}
 
 </li>
 );
 })}
 </ul>
 );
};

export default BlogList;
``````
### 自分で試したこと
(１) // supabaseからリスト取得 の部分で、

``const getBlogList = async () => {``と
``};getBlogList();``
を付けず、

async は
``const BlogList = async () => {``
に付けてみたところ、Objects are not valid as a React child (found: [object Promise]). のエラーが出てしまいました。


(２)ユーザーidに紐づけてデータ取得するためには、サーバーコンポーネントではなくクライエントコンポーネントで書くのかと思い試しましたが、根本的に間違っているのでしょうか。

### 補足情報
初学者で基本の理解もまだ充分ではないのですが、先生の動画や記事に出会ってから挫折せず続けられるようになりました。よろしくお願いいたします。

Next.js

初心者

データベース

「Next.js13とSupabaseのブログ完全版」でユーザーが投稿した自分のブログリストを表示させたい

ポッキー

### 実現したいこと
ページリロードをしてもstateを保持してログイン状態が持続
するようにしたい。


### 発生している問題
Navigation.jsを {isAuthenticated ?} でログイン状態の時に表示が変わるように設定しているが、ページリロードをやページ遷移をすると stateがリセットされてしまい、表示が切り替わってしまう。

### 自分で試したこと
stateを保持するredux-persistを使用し、公式ページなどを参考にコードを書いてみました。
結果は、
ページ遷移にはログイン状態を保持することができましたが、
ページリロードをするとログイン状態を保持することができませんでした。

ご教授をお願いしたいです。 

### ソースコード
```
//src/reduser/store.jsx

import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'
import postSlice from './postSlice'

//redux-persist設定
import storage from 'redux-persist/lib/storage'
import { 
 persistReducer, 
 FLUSH,
 REHYDRATE,
 PAUSE,
 PERSIST,
 PURGE,
 REGISTER,
} from 'redux-persist'

const persistConfig = {
 key: 'root',
 storage,
}

const persistedReducer = persistReducer(persistConfig, authSlice)

const store = configureStore({
 reducer: {
 auth: persistedReducer,
 post: postSlice,
 },
 middleware: (getDefaultMiddleware) => 
 getDefaultMiddleware({
 serializableCheck: {
 ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
 },
 }),
})

export default store
```
```
//pages/_app.jsx

//redux設定
import { Provider } from 'react-redux'
//redux-persist設定
import store from 'src/reducer/store'
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist' 

const persistor = persistStore(store)

function App({ Component, pageProps }){
 return (
 <Povider store={store}>
 <PersistGate persistor={persistor}>
 <Layout>
 <Head>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 </Head>
 <Component {...pageProps} />
 </Layout>
 </PersistGate>
 </Provider>
 );
}
```
```
//src/reducer/authSlice.jsx

import {
 // アカウント登録
 REGISTER_SUCCESS,
 REGISTER_FAIL,

 //ログイン
 LOGIN_SUCCESS,
 LOGIN_FAIL,

 //アカウント情報取得
 USER_SUCCESS, 
 USER_FAIL,

 //リフレッシュトークン取得
 REFRESH_SUCESS,
 REFRESH_FAIL,
 
 // 読み込み中
 SET_AUTH_LOADING,
 REMOVE_AUTH_LOADING,

 //認証チェック
 AUTHENTICATED_SUCCESS,
 AUTHENTICATED_FAIL,
 LOGOUT_SUCCESS,
 } from 'actions/types'

const initialState = {
 user: null,
 isAuthenticated: null,
 loading: false,
}


function authReducer(state = initialState, action) {
 const { type, payload } = action

 switch (type) {
 // アカウント登録----------------------------------------------
 case REGISTER_SUCCESS:
 return {
 ...state,
 }
 case REGISTER_FAIL:
 return {
 ...state,
 }

 //ログイン----------------------------------------------
 case LOGIN_SUCCESS:
 return {
 ...state,
 isAuthenticated: true,
 }
 case LOGIN_FAIL:
 return {
 ...state,
 isAuthenticated: false,
 }

 //アカウント情報取得----------------------------------------------
 case USER_SUCCESS:
 return {
 ...state,
 user: payload.user,
 }
 case USER_FAIL:
 return {
 ...state,
 user: null,
 }
 //リフレッシュトークン取得----------------------------------------------
 case REFRESH_SUCESS:
 return {
 ...state,
 }
 case REFRESH_FAIL:
 return {
 ...state,
 isAuthenticated: false,
 user: null,
 }

 // 読み込み中----------------------------------------------
 case SET_AUTH_LOADING:
 return {
 ...state,
 loading: true,
 }
 case REMOVE_AUTH_LOADING:
 return {
 ...state,
 loading: false,
 }

 // 認証チェック----------------------------------------------
 case AUTHENTICATED_SUCCESS:
 return {
 ...state,
 isAuthenticated: true,
 }
 case AUTHENTICATED_FAIL:
 return {
 ...state,
 isAuthenticated: false
 }

 //ログアウト-----------------------------------------------
 case LOGOUT_SUCCESS:
 return {
 ...state,
 isAuthenticated: false,
 user: null,
 }
 case LOGIN_FAIL:
 return {
 ...state,
 }

 default:
 return state
 }
}

export default authReducer
```

//


### 補足情報

Django

Django REST Framework + NextJS + redux(redux-persist) [ログイン状態の持続(stateの保持)]

hayato

### 実現したいこと
Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築でチュートリアルを勧めているものの、Chapter20の
認証チェックでerrorが出て進めないのです。

### 発生している問題
アカウント登録画面で、アカウント情報を入力して送信ボタンを押すと、
POST http://localhost:3000/api/account/register 500 (Internal Server Error)　とerrorが出ています。

詳細をみると、
action/auth.jsx の fetch('/api/account/register', がエラーのようです。

http://localhost:3000/api/account/registerにアクセスすると、
{"error":"Method GET not allowed"}　が表示されます。

### ソースコード
```
import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,
  } from './types'

// アカウント登録
export const register = (name, email, password) => async (dispatch) => {
    dispatch({
      type: SET_AUTH_LOADING,
    })
  
    const body = JSON.stringify({
      name,
      email,
      password,
    })
  
    try {
      const res = await fetch('/api/account/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: body,
      })
  
      if (res.status === 200) {
        dispatch({
          type: REGISTER_SUCCESS,
        })
      } else {
        dispatch({
          type: REGISTER_FAIL,
        })
      }
    } catch (err) {
      dispatch({
        type: REGISTER_FAIL,
      })
    }
  
    dispatch({
      type: REMOVE_AUTH_LOADING,
    })
  }
```
### 自分で試したこと
ソースコードを見返しても間違っているところは見られませんでした。
postman でAPI動作確認をしたところ、問題はなかったです。

### 補足情報
redux 設定の時に、createStoreが非推奨なので、
reduxtoolkit  を使用しています。公式ページを観ながら作りました。
もしかするとこれが原因かもしれないです。
src/app/authSlice.jsx
```
import { createSlice } from "@reduxjs/toolkit";
import {
    // アカウント登録
    REGISTER_SUCCESS,
    REGISTER_FAIL,
  
    // 読み込み中
    SET_AUTH_LOADING,
    REMOVE_AUTH_LOADING,
  } from 'actions/types'

const initialState = {
    loading: false,
}
export const authSlice = createSlice({
    name:'auth',
    initialState,
    reducers: {
        increment: (state = initialState, action) =>{
            const { type, payload } = action

            switch (type) {
                // アカウント登録
                case REGISTER_SUCCESS:
                  return {
                    ...state,
                  }
                case REGISTER_FAIL:
                  return {
                    ...state,
                  }
            
                // 読み込み中
                case SET_AUTH_LOADING:
                  return {
                    ...state,
                    loading: true,
                  }
                case REMOVE_AUTH_LOADING:
                  return {
                    ...state,
                    loading: false,
                  }
                default:
                  return state
            }
        }
    }
})
export const { increment } = authSlice.actions
export default authSlice.reducer
```

src/app/store.jsx
```
import { configureStore } from '@reduxjs/toolkit'
import authSlice from './authSlice'

export const store = configureStore({
  reducer: {
    auth: authSlice,
  },
})
```

間違っている点があれば、是非教えていただけると助かります。

Django REST Framework + NextJS + Stripeサブスク有料会員サイト構築 redux について

### 実現したいこと
/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を保有することを思いついた次第です。


### 補足情報

React

Node.js

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

nekomusume

### FullStackChannelに質問を投稿する際に「改行」できない？
### 自分で試したこと
 入れてみましたが、改行できない？
使い方を教えてほしいです。
よろしくお願いいたします。