如何在单个功能组件中使用多个 graphql 查询挂钩?
How to use multiple graphql query hooks in single function component in react?
我使用 useQuery
调用多个 graphql query
。它显示错误
Too many re-renders. React limits the number of renders to prevent an infinite loop.
我知道它为什么会出现,但我不知道如何防止这个错误。这是Functional components
我的代码在这里
const [categoryList, updateCategoryList] = useState([]);
const [payeeList, updatePayeeList] = useState([]);
if (data) {
const categories = (data.categories as unknown) as Category[];
if (
!isEqual(categoryList, categories) ||
categoryList.length !== categories.length
) {
updateCategoryList([...categories]);
}
}
if (isEmpty(payeeList)) {
const { loading, data } = useQuery(payeesQuery);
if (data) {
const payees = (data.payees as unknown) as Payee[];
if (!isEqual(payeeList, payees) || payeeList.length !== payees.length) {
updateCategoryList([...payees]);
}
}
}
对不起大家,我是菜鸟。
例如你可以这样使用
const ExampleComponent = () => {
const { loading:payeesLoading, data:payeesData } = useQuery(payeesQuery);
const { loading:secondLoading, data:secondData } = useQuery(secondQuery);
useEffect(() => { //effect hook for first query
} ,[payeesData] )
useEffect(() => { //effect hook for second query
} ,[secondData] )
return (<div>
your contents
</div>)
}
像这样您可以在单个组件中编写多个查询。
我使用 useQuery
调用多个 graphql query
。它显示错误
Too many re-renders. React limits the number of renders to prevent an infinite loop.
我知道它为什么会出现,但我不知道如何防止这个错误。这是Functional components
我的代码在这里
const [categoryList, updateCategoryList] = useState([]);
const [payeeList, updatePayeeList] = useState([]);
if (data) {
const categories = (data.categories as unknown) as Category[];
if (
!isEqual(categoryList, categories) ||
categoryList.length !== categories.length
) {
updateCategoryList([...categories]);
}
}
if (isEmpty(payeeList)) {
const { loading, data } = useQuery(payeesQuery);
if (data) {
const payees = (data.payees as unknown) as Payee[];
if (!isEqual(payeeList, payees) || payeeList.length !== payees.length) {
updateCategoryList([...payees]);
}
}
}
对不起大家,我是菜鸟。
例如你可以这样使用
const ExampleComponent = () => {
const { loading:payeesLoading, data:payeesData } = useQuery(payeesQuery);
const { loading:secondLoading, data:secondData } = useQuery(secondQuery);
useEffect(() => { //effect hook for first query
} ,[payeesData] )
useEffect(() => { //effect hook for second query
} ,[secondData] )
return (<div>
your contents
</div>)
}
像这样您可以在单个组件中编写多个查询。