apollo-clientのuseQueryフックを複数使う場合のエラー回避について

Question

コンポーネント内でフックを利用する場合に、1回目のクエリの結果から対象のタイプを判別し
そのタイプによって抽出するクエリを分けたい場合
コンポーネントやfunctionで分けたのですが
Rendered more hooks than during the previous render.
のエラーに苦しめられています。

なぜこうなるかというと、
useQueryの場合、

const { loading , error, data} = useQuery(
    QueryString
    { variables: { id: id } }
  );
if (_loading) return <h4>loading</h4>;

などで、クエリ接続中はreturnするのが一般的に使われていますが
2回目のクエリを呼び出す際には、またuseQueryフックを利用する為

Rendered more hooks than during the previous render.のエラーが発生します

下のはざっとやりたいことの説明です

const { loading , error, data} = useQuery(
    QueryString1
    { variables: { id: id } }
  );
if (_loading) return <h4>loading</h4>;

// 初期化
var queryString2 = []
if (data[0].type === "TYPE_A"){
    queryString2 = "分岐して投げたいクエリ"
}

//　同コンポーネント内でこのクエリを取得するとエラーが発生する
const { loading : load2, error : error2, data : data2} = useQuery(
    QueryString2
    { variables: { id: id } }
  );

初歩的な質問で申し訳ありませんが
非同期処理でクエリの実行結果を取得してから、違うクエリを投げたい場合
どのようにして取得するのが一般的なのでしょうか
・コンポーネント分割
・関数を分割

など試して見ましたが

if (_loading) return <h4>loading</h4>;

このリターンが存在する限りエラーが発生してしまいます。

解決策として
status的なものを、親コンポーネントでにわたしてそこでリターンすればいいと思うのですが
一番ルートとなる親コンポーネントでは、コンポーネントをwebpackでラップしているので簡単に渡せない状況です。

どなたかご教授いただけましたら幸いです

Comments

[M.F]

そもそも、useLazyQueryを使えればいいのですが私が利用しているimportにuseLazyQueryがないのと
apollo-clientのuseQueryでasync / await Promiseをサポートしていないことが発端でした

[M.F]

useLazyQueryを使うと
Attempted import error: 'useLazyQuery' is not exported from 'apollo-client'.

[M.F]

react-graphqlモジュールを使用しています
現在もuseLazyQueryはサポートされていないようです
https://github.com/Shopify/quilt/issues/1382

Answer 1

コンポーネントの分割で解決できました