Как я могу предотвратить повторный рендеринг реагирующего компонента с помощью запроса apollo? - PullRequest
Новая
       11

Как я могу предотвратить повторный рендеринг реагирующего компонента с помощью запроса apollo?

1 голос
/ 20 марта 2020

У меня есть компонент реагирования, который включен в мою панель вкладок (Material-ui).

И этот компонент имеет множество хуков Apollo useQuery (15 useQuery) для получения некоторых данных. Я попытался использовать параметр loading, который является результатом каждого 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}/> )}
        </>
    );

Когда этот компонент появился впервые, я смог управлять рендерингом, потому что параметры загрузки useQuery хуков возвращают true.

Однако, когда я снова открываю этот компонент (я просто нажал на другие вкладки и вернулся), этот компонент рендерится 15 раз всегда (я просто напечатал его, используя console.log() для каждого компонента). Я проверил параметры загрузки, и у них никогда не было true.

Поэтому, когда я снова открыл этот компонент, я даже не получил сообщение о загрузке, и мне показалось, что он немного останавливается.

Как я могу решить эту проблему?

...