Получить результат запроса graphql при рендеринге и перерисовать НО LAZILY

Question

У меня есть приложение React Apollo, и я пытаюсь сделать так, чтобы у меня был компонент, который отображает некоторые данные с использованием диаграмм. Для этих данных у меня есть несколько фильтров, которые я сохраняю в локальном состоянии компонента (Использование перехватчиков)

const [filters, setFilters] = useState(defaultFilters);

Теперь мне нужно, чтобы при монтировании компонента извлекались данные с использованием фильтров по умолчанию. Но я также хочу повторно получать данные, когда пользователь обновляет фильтры И щелкает по ссылке , и я получаю результаты, используя новые фильтры.

Поскольку я также хочу получить результаты при обновлении фильтра я использую хук useLazyQuery, предоставляемый apollo

const [getData, {data}] = useLazyQuery(GET_DATA_QUERY, { variables: {filters} });

useEffect(getData, []); // this useEffect runs only when the component mounts and never again

Но, что происходит, когда мое состояние, filters , обновляет функцию getData, которая автоматически запускается! ВСЕГДА! (ЗА СЦЕНОЙ)

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

2. Как мне исправить мой текущий код. Вызов функции getData внутри функции useEffect заставляет ее запускаться при каждом повторном рендеринге.

Я думаю, что проблема, определенная в этом stackoverflow-question , немного похожа на мой.

Answer 1

Часть проблемы в том, что у вас действительно есть два разных состояния, для которых вы пытаетесь использовать один хук. У вас есть состояние, которое представляет значения ваших входов в пользовательском интерфейсе, а затем у вас есть состояние, которое представляет фильтры, которые вы хотите применить к своим диаграммам. Это два отдельных бита состояния.

Самое простое решение - просто сделать что-то вроде этого:

const [inputFilters, setInputFilters] = useState(defaultFilters)
const [appliedFilters, setAppliedFilters] = useState(inputFilters)
const { data } = useQuery(GET_DATA_QUERY, { variables: { filters: appliedFilters } })

const handleSubmit = () => setAppliedFilters(inputFilters)
const handleSomeInputChange = event => setInputFilters(...)

Таким образом, вы используете inputFilters/setInputFilters только для управления состоянием ваших входов. Когда пользователь нажимает вашу кнопку отправки, appliedFilters устанавливаются на то, что inputFilters в данный момент, и ваш запрос будет обновляться для отображения новых переменных.