前提
React, Firebase, react-router, react-firebase-hooksを用いてログインしたユーザーが記事を投稿、閲覧できるSPAを作成しています。
Reduxなどは使用していません。
ログインしたユーザーのみが記事一覧をFirestoreから取得することができる仕様です。
最上位コンポーネントのApp.jsxに認証情報user
とFirestoreから取得した記事一覧データposts
をstateとして保持し、下位コンポーネントにpropsとして渡すことで記事の表示などを行っています。
ユーザーがログインしていない状態の場合はposts
はパーミッションエラーで取得できないためundefined
となります。
非ログインユーザーアクセスを試みた際は、ログインページにリダイレクトしてログインを促すような実装です。
実現したいこと
現状、ログインページでログインを行いuser
ステートが更新されたあとも、posts
がログイン前のundefined
のままとなってしまい、記事が取得できない問題があります。
ブラウザの更新を行うと再度posts
の読み込みが走るためuser
とposts
が揃い記事表示できるようにはなるのですが、「ユーザーログインが行われたタイミングでposts
を読み込み直す」ような実装をどのように行えばよいかがわかりません。
設計自体を変えたほうがいい場合は、どのように設計すべきかをご教授いただけると幸いです。
該当のソースコード
- App.jsx
jsx
1const App = () => { 2 const [user, userLoading] = useAuthState(firebase.auth()); 3 const [posts, postsLoading, postsError] = useCollectionData( 4 firestore.collection('post').orderBy('postTime', 'desc'), 5 ); 6 7 return ( 8 <> 9 {userLoading || postsLoading ? ( 10 <p>please wait ...</p> 11 ) : ( 12 <MuiThemeProvider theme={theme}> 13 <GlobalStyle /> 14 <BrowserRouter> 15 <Header user={user} /> 16 <Content> 17 <Router user={user} posts={posts} /> 18 </Content> 19 </BrowserRouter> 20 </MuiThemeProvider> 21 )} 22 </> 23 ); 24};
試したこと
- App.jsx
jsx
1const App = () => { 2 // 省略 3 4 if (user && postsError) { 5 ... // ログインできているのにposts読み込みが失敗しているときの再読み込み処理を書こうと考えましたが、どう書けばよいのか思いつきませんでした…… 6 } 7 8 // 省略 9};
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。