Reactでfetchの順番を制御したい

Question

実現したいこと

typescriptで複数のfetchの処理の順番を変えたいです。

発生している問題・分からないこと

fetchでデータを2回取得して表示を行うコンポーネントを用意します。このコンポーネントを複数実装すると2回目のfetchは全てのコンポーネントの1回目のfetchが終わらないと実行されません。この順番を変更して「1回目のfetch→別コンポーネントの1回目のfetch」ではなく「1回目のfetch→2回目のfetch→別コンポーネントの1回目のfetch」と割り込ませる方法はないでしょうか？

該当のソースコード

'use client'
import { useEffect, useState } from "react";

export default function ComponentC() {
    const [data, setData] = useState<string | null>(null);
    useEffect(() => {
        const fetchData = async () => {
            const url = `api/componentA`; //返答に3秒かかるAPI
            const response = await fetch(`${url}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ URL: url }),  // URLをリクエストボディに含める
            });
            setData("componentAから取得");
            const url2 = `api/componentB`; //返答に3秒かかるAPI
            const response2 = await fetch(`${url2}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ URL: url }),  // URLをリクエストボディに含める
            });
            setData("componentBから取得");
        };
        fetchData();
    }, []);

    return (
        <>
            <div>div{data}</div>
        </>
    );

}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

「typescript fetch 順番」などで調べた結果、fetchで実行したい関数を配列に入れて制御する方法が見つかりました。しかしこの方法だと配列の中のどのfetchを優先して実行するかの処理に加えて排他的制御が必要なので少し手間になると考えました。コンポーネントの描画順でfetchを優先する方法などはないでしょうか？

補足

特になし

Comments

[maisumakun]

なぜ順番を変えたいのでしょうか？

[dfsgerehs]

このコードでは分かりにくいのですが、2つのfetchが終了したらUIを表示するといった動作を将来的には行いたいです。このコンポーネントを100個くらい作成した時、処理時間は同じでもUIをなるべく早く表示したいため順番の制御を行いたいです。

[adihs2]

質問に
> このコンポーネントを複数実装すると
とありますがその実装とは具体的にはComponentCの一覧をイメージすればよいですか？
こんなようなものとか：
<div>
{arrayC.map(c => <ComponentC key={i} />)}
</div>

[dfsgerehs]

そのようなイメージです

Answer 1

複数のComponentCを子コンポーネントとして持つコンテナコンポーネント側で

コンポーネントの描画順でfetchを優先する

という制御を行えばよいかと思いました。一案としてはたとえばこういう感じです。

まず ComponentC に　prop fetching と onFetchingComplete を追加してこのように修正：

-'use client'
 import { useEffect, useState } from "react";
 
-export default function ComponentC() {
+export default function ComponentC({
+  fetching,
+  onFetchingComplete
+}: {
+  fetching: boolean
+  onFetchingComplete: () => void
+}) {
   const [data, setData] = useState<string | null>(null);
   useEffect(() => {
+    if (!fetching) return
+
     const fetchData = async () => {
       const url = `api/componentA`; //返答に3秒かかるAPI
       const response = await fetch(`${url}`, {
@@ -24,8 +31,8 @@ export default function ComponentC() {
       });
       setData("componentBから取得");
     };
-    fetchData();
-  }, []);
+    fetchData().then(onFetchingComplete)
+  }, [fetching, onFetchingComplete]);
 
   return (
     <>

そしてコンテナ側の実装例は下記です。

'use client'
import ComponentC from "@/components/ComponentC";
import { useState } from "react";

export default function ContainerPage() {
  const [fetchingIndex, setFetchingIndex] = useState(0);

  return (
    <div>
      {[...Array(5)].map((_, i) => (
        <ComponentC
          key={i}
          fetching={fetchingIndex === i}
          onFetchingComplete={() => setFetchingIndex(i + 1)}
        />
      ))}
    </div>
  );
}

Comments

[dfsgerehs]

この方法で実現ができました。ありがとうございます。

Answer 2

もしあなたがfetchに時間がかかることを理解していて、かつその二つの処理がなんの関連性もなくawaitする意味がないことを理解しているのであれば、以下のようにすべきでしょう。

async function fetchData() {
  Promise.all([
    fetch(`${url}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ URL: url }),  // URLをリクエストボディに含める
    }),
    fetch(`${url2}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ URL: url }),  // URLをリクエストボディに含める
    })
  ])
    .then(([response, response2]) => {
      setData("componentAから取得");
      setData("componentBから取得");
      return [response, response2]
    })
    // TODOエラー処理
    .catch(error => console.error('Error:', error));
};

要点を書きだすと以下のようなコードになるでしょう。

async function fetchData() {
  Promise.all([
    fetch(`${url}`),
    fetch(`${url2}`)
  ])
    .then(([response, response2]) => {
      setData("componentAから取得");
      setData("componentBから取得");
      return [response, response2]
    })
    // TODOエラー処理
    .catch(error => console.error('Error:', error));
};

Promise.allは配列で与えられたPromise(コードでいうとfetch)をすべて処理しますが、これは非同期的に行われるため、両方が同時に行われ、遅いほうの処理を待ちます。
.thenについてはfetch(Promise)を処理する方法と同じです。
また、このコードはおそらくPromisのresponsを処理するのが一般的であるため以下のようにも書けます。(jsonとして取得する場合。textを使う場合はjson()ではなくtext()を使用する)

async function fetchData() {
  Promise.all([
    fetch(`${url}`).then(response => response.json()),
    fetch(`${url2}`).then(response => response.json())
  ])
    .then(([response, response2]) => {
      return [response, response2]
    })
    // TODOエラー処理
    .catch(error => console.error('Error:', error));
};

以上の内容で、質問で行いたいことは解決しますでしょうか？

もし、100回同じコードを記述しないといけないのであれば以下のように記述できるかもしれません。

async function fetchData() {
  urls.push(url)
  urls.push(url2)

  Promise.all(urls.map(url => fetch(url)))
    .then(dataArray => {
      console.log(dataArray);
    })
    // TODOエラー処理
    .catch(error => console.error('Error:', error));
};

参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

補足
私はバニラjsの知識で回答していますので、Reactで不備があったり一般的なアプローチではないかもしれません。

Comments

[dfsgerehs]

この方法では実現が難しいようです。原因は、私の質問内容が不十分だったためです。申し訳ありません。APIの返答には別のURLが含まれており、このURLで2回目のfetchを行うという処理のため、この方法では対応できません。