Аполлон useQuery и обновление реквизита родителя с его результатом - PullRequest
Новая
       7

Аполлон useQuery и обновление реквизита родителя с его результатом

1 голос
/ 10 апреля 2020

У меня есть родительский компонент-обертка, который принимает некоторые реквизиты, связанные с макетом, и дочерний компонент (представляющий страницу), который должен выполнить запрос GraphQL через Apollo и обновить реквизиты этого родителя с помощью результата (скажем, заголовка страницы) , Родитель, которому нужно обновить реквизиты, - это не шаблон, который я выбрал, а реализация компонента, который я должен использовать. 

App = () {
  const [layout, setLayout] = useState({});

  return (
    <Wrapper layout={layout: 'foo'}>
      <PageComponent setLayout={setLayout} />
    </Wrapper>
  );
}


PageComponent = (props) => {
  const { loading, error, data } = useQuery(QUERY); // Apollo's useQuery

  useEffect(() => {
    props.setPageParams({ title: data.lists[0].title });
  }, [data]);

  if (loading) return <p>Loading</p>;
  if (error) return <p>Error</p>;

  return (
    <p>component!</p>
  );
}

Я перепробовал слишком много разных подходов, чтобы записать их все здесь, но результаты - одно из двух: a l oop в useEffect (что я несколько понимаю, я думаю, что передача data в useEffect заставляет его устанавливать реквизиты родителя и повторно визуализировать дочерний элемент каждый раз, потому что он является объектом и не подвергается глубокому сравнению), или следующее: 

Cannot update a component (`App`) while rendering a different component (`PageComponent`).

Последнее происходит при попытке нескольких подходов без useEffect, например: 

if(data && data.lists && awaitingPageLayout) {
  props.setLayout({ title: data.lists[0].title });
  awaitingPageLayout = false;
}

Я также пытался использовать команду useQuery onCompleted, что, как мне кажется, привело к еще одному l oop.

Надеясь на pu sh в правильном направлении, я из идей здесь. Цените свое время!

...