【Next.js, Context API】REST API で取得したデータをContext

Question

いつも大変お世話になっております。
現在Nextを利用してworpdressからRESTを利用して記事情報を取得しようとしています。

記事一覧にアクセスした際に10件分の記事情報を取得し、
記事情報は Context でグローバル管理をし、記事詳細ページで使い回しをしたいと考えています。

一応自分の方でそれっぽいソースを記述してみたのですが、
何度もサーバー側にリクエスト処理がかかってしまい(ループ処理のように)、
自分の考えているように動作してくれません。

今回の質問の着地地点としては、「REST APIで取得したデータをContext APIで管理をする」です。

どなたかわかる方がいらっしゃればご教授いただけますと幸いです。
それではどうぞ宜しくお願い致します。

ソースコード

# 使用しているファイルのみ記載
.
├── contexts
│   └── PostsContext.jsx
└── pages
    ├── _app.js
    ├── api
    └── index.js

# context/PostsContext.jsx

import {createContext, useState} from "react";

const PostsContext = createContext({});

const PostsProvider = ({children}) => {

  const [posts, setPosts] = useState({})

  const fetchPosts = async () => {
    try {

      const res = await fetch('xxxxxxx/wp-json/wp/v2/posts');
      const posts = await res.json();

      setPosts(posts);
      
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <PostsContext.Provider value={{posts, fetchPosts}}>
      {children}
    </PostsContext.Provider>
  )

}

export {PostsContext, PostsProvider};

# pages/_app.js

import '../styles/globals.css'
import {PostsProvider} from "../contexts/PostsContext";

function MyApp({Component, pageProps}) {
  return (
    <PostsProvider>
      <Component {...pageProps} />
    </PostsProvider>
  )
}

export default MyApp

# pages/index.js

import Head from 'next/head'
import {useContext} from "react";
import {PostsContext} from "../contexts/PostsContext";

export default function Home() {

  const {posts, fetchPosts} = useContext(PostsContext);

  fetchPosts();

  console.log(posts);

  return (
    <></>
  )
}

#　修正後ソース

# context/PostsContext.jsx

import {createContext, useState} from "react";
import {useEffect} from "react";


const PostsContext = createContext({});

const PostsProvider = ({children}) => {

  const [posts, setPosts] = useState({})

  useEffect(async () => {

    const res = await fetch('xxxxxxx/wp-json/wp/v2/posts');
    const posts = await res.json();

    setPosts(posts);

  }, [setPosts])

  return (
    <PostsContext.Provider value={{posts}}>
      {children}
    </PostsContext.Provider>
  )

}

export {PostsContext, PostsProvider};

# pages/index.js

import Head from 'next/head'
import {useContext} from "react";
import {PostsContext} from "../contexts/PostsContext";

export default function Home() {

  const {posts} = useContext(PostsContext);

  console.log(posts);

  return (
    <></>
  )
}

出力

Answer 1

「REST APIで取得したデータをContext APIで管理をする」

この点についてはAPIのレスポンスがわからないのでなんとも言えませんが、

何度もサーバー側にリクエスト処理がかかってしまい(ループ処理のように)、

については関数コンポーネントのトップレベルでfetchPosts();を実行しているのが問題だと思われます。useEffectsなどを使用して、特定のタイミングでのみ実行されるようにしてください。

Comments

[matsuo_basho]

ありがとうございます！
ひとまず、fetchPosts()を削除し、useEffect()を利用した書き方に変更をしました。

無事にループ処理的な動作からは解放されましたが、
console.logを１度すると、コンソール上に以下の２行が出力されています。

{}
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

これはなぜ２回もconsole.log()が処理されているのでしょうか、、？

修正後のソースコードを追記しております。

[k_a]

それも同じ理由です。
`console.log()`が関数コンポーネントのトップレベルに有ることが原因です。

初回レンダリング時に`post`が`{}`(初期値)の状態で一度実行され、post(state)が更新されたので再レンダリングされて再度実行され`post`に設定された値が出力されています。

useEffectsの依存配列にセット関数のsetPostsを渡すのは違う気がします。セット関数は変化しないので依存配列に入れる意味がわかりません。初回レンダリングのみ実行するという意思なら空配列を指定すべきです。

[matsuo_basho]

ありがとうございます！

初回レンダリング時に console.log(posts); が一度実行され、
再レンダリング時にもう一度実行されたということですね。

useEffects() についてもありがとうございます！
修正致しました！

最後の質問をさせてください。
自分は最終的に外部から取得したデータをContext API(この例だとposts)に格納し
それをいろんなページで使い回しをしたいと考えているのですが、
getStaticProps() や getServerSideProps() 内では useContext() を利用することができないようで、現在のように Home() 内で useContext() を利用する形になっています。

実際この方法だと、Context API(posts)にデータを格納することができていますが、
例えば今回のようにコンソール上に初期値の{}が出力されたり、
ページのコンテンツが遅いなど、あまり望ましくない結果となってしまいます。

そもそも自分が行いたい「外部から取得したデータをContext API(この例だとposts)に格納」というのはこの方法で合っているのでしょうか？？

[k_a]

> 例えば今回のようにコンソール上に初期値の{}が出力されたり、

それは実装の問題でContext API等に関わる問題ではありません。

> ページのコンテンツが遅いなど

`getServerSideProps`から渡したpropsをコンポーネント内でContextに注入すればよいのではないですか？データの取得がバックエンドかフロントエンド化の違いでコンテンツのレンダリング速度に有意な差が出るとは思えませんが。
`getStaticProps`はSSGなので外部から取得するにはあまり適していないように思います。

[matsuo_basho]

いつも素早くご回答いただきありがとうございます！

なるほど、、せっかくk4aさんがご丁寧に説明いただいているにもかかわらず
なかなか理解ができないので、基礎知識の部分がかなり不足してる気がします、、。

一旦書籍等を購入して体系的に学び直したいと思います！

ありがとうございます！