无效钩子调用.当我在useEffect中调用useQuery时，钩子只能在函数组件的内部调用

Question

我正在使用apollo-graphql在我的反应项目，我得到的错误

无效的钩子调用。钩子只能在函数组件的内部调用

这是我的代码

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
// **************** COMPONENTS ****************
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";
export default function index() {
const insuranceId = useSelector((state) => state.mortgage.insuranceId);
// Panels Heading to show on all panels
useEffect(() => {
if (insuranceId) {
getMortgageData(insuranceId);
}
}, [insuranceId]);
function getMortgageData(insuranceId) {
const { loading, error, data } = useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
});
console.log(data);
}
return <section className="mortage-journey"></section>;
}

一旦我运行这个，我得到的错误，我知道，useQuery本身是一个钩子，我不能从useEffect内部调用它，但然后应该是这个的解决方案，因为我需要保险id从我的redux状态首先，并发送到查询。

谢谢!

Answer 1

当你从React组件的顶层以外的任何地方调用它时，你就违反了钩子规则。

useEffect接受一个回调函数，你从这个函数调用钩子。这是个问题。

我在useQuery中发现了这个skip选项，它可以帮助您有条件地调用useQuery。

useEffect(() => {
const { loading, error, data } = 
useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
skip : (!insuranceId)
});
}, [insuranceId]);

任何时候insuranceId改变你的回调运行，所以它在挂载后运行一次，然后在后续的更改中运行。

Answer 2

尝试使用refetch。像这样:

const { data, refetch } = useQuery(MY_QUERY);
useEffect(() => {
refetch();
}, id);

你可以在任何你喜欢的地方使用refetch，在useEffect或一个按钮点击onclick处理程序。

或者，如果您不想让它第一次运行，您可以使用useLazyQuery:

const [goFetch, { data }] = useLazyQuery(MY_QUERY);

现在你可以使用goFetch或者任何你喜欢的名字

你的整个例子可能看起来像:

import React, { useEffect, useState, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import { GET_MORTGAGE_JOURNEY } from "../../../../Graphql/Journeys/query";
export default function index() {
const insuranceId = useSelector((state) => state.mortgage.insuranceId);
const { loading, error, data, refetch } = useQuery(GET_MORTGAGE_JOURNEY, {
variables: { id: insuranceId },
});
useEffect(() => {
if (insuranceId) {
refetch({id: insuranceId});
}
}, [insuranceId]);

return <section className="mortage-journey"></section>;
}