Как мне структурировать мое приложение, где useQuery используется в родительском и дочернем компонентах? - PullRequest
Новая
       23

Как мне структурировать мое приложение, где useQuery используется в родительском и дочернем компонентах?

0 голосов
/ 16 марта 2020

У меня есть приложение, в котором родительский компонент делает запрос, чтобы получить данные, используемые его дочерними элементами. Если useQuery используется в потомке, я получаю эту ошибку:

Ошибка 

react_devtools_backend.js:6 Warning: React has detected a change in the order of Hooks

Я знаю, что ошибка возникает, когда я реализую useQuery внутри Дитя, поэтому я, вероятно, неправильно структурирую свои запросы, но я не уверен, как это сделать.

Родитель. js

const CoreLayout = (props) => {
  const [categoryList, setCategoryList] = useState();
  const [siteData, setSiteData] = useState();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if(categoryList && siteData) {
      setLoading(false);
    }
  }, [categoryList, siteData])


  const getCategories =  gql`
    query categoryList($slug: String!) {
      ...
    }
  `;

  const getSiteData =  gql`
    query cmsStoreBlocks($slug: String!) {
      ...
    }
  `;



  const { loading: pageLoading, error: pageError, data:pageData } = useQuery(getSiteData, {
    variables: { 
      slug: props.match.params.slug 
    },
    context: { headers: { "Store": props.match.params.slug } },
    onCompleted: (data) => {
      setSiteData(data.cmsStoreBlocks.items);
    }
  });

  const { loading: categoryLoading, error: categoryError, data:categoryData } = useQuery(getCategories, {
    variables: { 
      slug: props.match.params.slug
    },
    onCompleted: (data) => {
    setCategoryList(data.categoryList[0].children);
  }
  });

  if (loading) return 'loading';
  if (pageError || categoryError) return `Error! ${pageError || categoryError}`;

  const { children, site, location } = props;

  return (
    <div>
      <ContextProvider initialState={initialState} reducer={reducer}>
          <Route path='/:slug' render={(props) => <TwoColumn router={props} />} />
      </ContextProvider>
    </div>
  );

}

Ребенок. js

function Child(props) {
  const [{orderPage, categories}, dispatchState] = useStateValue();

  const getPlans =  gql`
  query products($categoryID: String!) {
    products( ... )
  }`;

  const { loading, error, data } = useQuery(getPlans, {
    variables: {
      categoryID: getCategoryIdByName(categories, 'plans')
    }
  });


  if(loading) return '';
  if(error) return `Error: ${error}`;

  return (
    ...
  )
}
...