React, firebaseのアプリでログイン後にFirestoreをstateとして読み込む方法

Question

前提

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

const App = () => {
  const [user, userLoading] = useAuthState(firebase.auth());
  const [posts, postsLoading, postsError] = useCollectionData(
    firestore.collection('post').orderBy('postTime', 'desc'),
  );

  return (
    <>
      {userLoading || postsLoading ? (
        <p>please wait ...</p>
      ) : (
        <MuiThemeProvider theme={theme}>
          <GlobalStyle />
          <BrowserRouter>
            <Header user={user} />
            <Content>
              <Router user={user} posts={posts} />
            </Content>
          </BrowserRouter>
        </MuiThemeProvider>
      )}
    </>
  );
};

試したこと

• App.jsx

const App = () => {
  // 省略

  if (user && postsError) {
    ... // ログインできているのにposts読み込みが失敗しているときの再読み込み処理を書こうと考えましたが、どう書けばよいのか思いつきませんでした……
  }

  // 省略
};

Answer 1

こちら自己解決しました！

App.jsxにはuserのみを持たせ、ログイン有無で下位コンポーネントの出し分けを行い、
ログイン時に表示する下位コンポーネントにpostを持たせることで解決しました。

• App.jsx

const App = () => {
  const [user, userLoading] = useAuthState(firebase.auth());
  if (user) {
    return <AuthorizedPage user={user} userLoading={userLoading} />;
  }

  return <UnAuthorizedPage userLoading={userLoading} />;
};

• AuthorizedPage.jsx

const AuthorizedPage = props => {
  const { user, userLoading } = props;
  const [posts, postsLoading] = useCollectionData(
    firestore.collection('post').orderBy('postTime', 'desc'),
  );

  return (
    <>
      {userLoading || postsLoading ? (
        <p>please wait ...</p>
      ) : (
        <MuiThemeProvider theme={theme}>
          <GlobalStyle />
          <BrowserRouter>
            <Header user={user} />
            <Content>
              <Router user={user} posts={posts} />
            </Content>
          </BrowserRouter>
        </MuiThemeProvider>
      )}
    </>
  );
};