Reactjs 如何防止react组件被apollo usequery重新渲染？

我有一个react组件，它包含在我的选项卡栏（材质ui）中

这个组件有很多Apollo

useQuery

钩子（15

useQuery

）来获取一些数据。我尝试使用

load

参数，该参数是每个

useQuery

的结果，以防止无用的渲染

    const { loading: loading_1, data: data_1} = useQuery<GetQuery1>(QUERY_1);
    const { loading: loading_2, data: data_2} = useQuery<GetQuery2>(QUERY_2);
    const { loading: loading_3, data: data_3} = useQuery<GetQuery3>(QUERY_3);

    // . . .

    const { loading: loading_15, data: data_15} = useQuery<GetQuery15>(QUERY_15);

    if (
        loading_1 ||
        loading_2 ||
        loading_3 ||
        // ... loading parameters
        loading_10
    ) {
        return <span>Loading...</span>;
    } 

    return (
        <>
            {loading_11 ? ("Loading ... 11") : (<MyComponent_A data={data_11} options={data_6,data_7}/> )}
            {loading_12 ? ("Loading ... 12") : (<MyComponent_B data={data_12} options={data_1,data_2,data_8}/> )}
            {loading_13 ? ("Loading ... 13") : (<MyComponent_C data={data_13} options={data_4,data_7,data_9}/> )}
            {loading_14 ? ("Loading ... 14") : (<MyComponent_D data={data_14} options={data_8,data_10}/> )}
            {loading_15 ? ("Loading ... 15") : (<MyComponent_E data={data_15} options={data_3}/> )}
        </>
    );

const{loading:loading_1，data:data_1}=useQuery（QUERY_1）；
const{loading:loading_2，data:data_2}=useQuery（QUERY_2）；
const{loading:loading_3，data:data_3}=useQuery（QUERY_3）；
// . . .
const{loading:loading_15，data:data_15}=useQuery（QUERY_15）；
如果(
加载_1||
加载_2||
装载装置3||
//…加载参数
装载10
) {
返回装载。。。；
} 
返回(
{loading_11？（“loading…11”）：（）}
{loading_12？（“loading…12”）：（）}
{loading_13？（“loading…13”）：（）}
{loading_14？（“loading…14”）：（）}
{loading_15？（“loading…15”）：（）}
);

当这个组件第一次出现时，我能够控制渲染，因为加载

useQuery

hooks的参数返回

true

但是，当我重新打开该组件时（我只是单击了其他选项卡并返回），该组件始终渲染15次（我只是使用

console.log（）

为每个组件打印了它）。我检查了加载参数，那些参数从来没有

true

所以当我重新打开这个组件时，我甚至没有收到一条加载消息，感觉它有点停止了

---

如何解决此问题？

如果组件卸载并装载，则加载应返回true，直到从缓存中获取数据，因此您可能会看到错误。另外，您可能不需要15个查询。您可以在一次操作中请求多个查询字段，这将导致向您的服务器发出一次请求。我建议将相关的useQuery放在MyComponent_a、MyComponent_B。。。以及处理每个单独组件内的加载/错误状态。您还知道，如果您导致错误，它只会影响一个组件，而不会影响整个应用程序的渲染