useLazyQuery - проблема повторного рендеринга

Question

Требование:

Я хочу вызвать запрос 1-й раз автоматически в useEffect, а затем вручную в функциях.

Проблема: Неизменное нарушение: Слишком много повторных визуализаций.

 const [getComment, { loading, data }] = useLazyQuery(getCommentsQuery);
  useEffect(() => {
    getComment({
      variables: {
        input: {
          id: "5e5cb512e90bd40017385305",
        },
      },
    });
  }, []);

  if (data && data.getPost) {
    var allNewComments = data.getPost.comments;
    setAllComments(allNewComments);  // re-renders
  }

setState вызывает эту проблему, я полагаю.

Answer 1

«Части тела» функционального компонента запускаются для каждого изменения, требуются условия (или useEffect перехватчики) для блокировки непредвиденных действий.

Просто не используйте useState для allComments? Вы можете использовать fe

const allNewComments = (data && data.getPost) ? data.getPost.comments : [];

... если вы хотите перебрать allNewComments

Если вы все еще хотите использовать useState (в сочетании с useLazyQuery) .. используйте его в опции / обработчике onCompleted, например:

const [getComment, { loading, data }] = useLazyQuery(getCommentsQuery, {
  variables: {
    input: {
      id: "5e5cb512e90bd40017385305",
    },
  },
  onCompleted: (data) => {setAllNewComments( data.getPost.comments )}