Выполнить ловушку useQuery () при возврате к предыдущему экрану реагировать на собственный стековый навигатор

Question

Я знаю, что одним из фиксированных правил в React является то, что вы не можете выполнять какие-либо хуки внутри методов в функциональном компоненте или даже внутри других хуков, таких как хук useEffect. Он должен быть выполнен в теле самого компонента.

Итак, сегодня, работая над приложением для викторины, я столкнулся с ситуацией, когда после прохождения экрана в стековом навигаторе я хочу go вернуться назад. на этот экран снова, нажав на кнопку назад. Но на этот раз я хочу изменить информацию на предыдущем экране данными из запроса graphql, используя хук useQuery, предоставленный клиентом Apollo.

Я могу определить, является ли предыдущий экран фокусным, используя свойство isFocused на подпорках. Если это изменится, то я снова получу данные, используя useQuery.

Я могу сделать это просто так:

    React.useEffect(() => {
        //how do I fetch data from here using useQuery if React prohibits me to use useQuery here?
    }, [props.isFocused]);

Так вот в чем мой вопрос, есть ли способ обойти это? Буду признателен за ваш ответ.

Answer 1

Как вы сказали, вы не можете вызывать хуки внутри других хуков или методов. Другими словами, вы не можете вызывать хуки условно. Если вы используете хук useQuery, вы должны быть готовы к тому, что он будет запускать запрос при каждом повторном рендеринге компонента (хотя он кэширует результаты, поэтому вам не нужно беспокоиться о производительности).

Вместо этого вы должны просто вызвать хук useQuery внутри компонента и просто вызвать обновление компонента в фокусе. Это уже должно быть повторное рендеринг на фокусе, так как реквизит isFocused меняется, предположительно. Если нет, вы можете обратиться к this .