如何让我的useQuery((在第一次渲染和后续事件(例如按钮点击(上触发？
从我所读到的内容来看，当 React 挂载一个第一次调用useQuery的组件时，Apollo 会自动执行查询，如果我想执行该查询以响应事件，我可以改用返回可以调用的函数的useLazyQuery。如果我想同时执行这两项操作怎么办？
不太确定我对 React 钩子的理解的哪一部分不正确或不完整，但我尝试在useQuery中使用refetch，这绝对允许我调用该函数，但似乎并不总是在组件挂载时触发(更令人困惑的是，有时它有，有时它没有(。我也在使用notifyOnNetworkStatusChange，我读到它需要refetch认识到它应该触发useQuery的onCompleted部分。
任何帮助将不胜感激，我想我根本不了解 Hooks。谢谢！
附言我的useQuery示例如下：
const { refetch: refetchGetTaskTypes } = useQuery(GET_TASK_TYPES(["taskId", "taskType"]), {
notifyOnNetworkStatusChange: true,
onCompleted: (data) => {
if (data !== undefined && data.getTaskTypes !== undefined && data.getTaskTypes !== state.taskTypes) {
dispatch({
type: 'GET_TASK_TYPES',
payload: {
taskTypes: data.getTaskTypes
}
});
}
}
});
P.P.S. 作为refetch有时需要调用来渲染而有时不需要的一个例子，我还有另一个与上述几乎相同的useQuery(使用不同的查询(，它也具有refetch，但它在第一次加载时渲染
P.P.P.S.我有时会看到另一个问题，即refetch获得过时的数据，我必须使用fetchPolicy: 'cache-and-network'来修复它。然而，它并不总是发生
使用 LazyQuery -
const [getTaskType, { loading, data }] = useLazyQuery(GET_TASK_TYPE, {fetchPolicy: 'network-only'}); // fetch policy is to not look for cache and take the data from network only
要在页面加载时获取数据 -
useEffect(() => {
getTaskType();
}, []);
要随时在按钮单击时触发它，您可以简单地调用该方法。
<Button
onClick={()=>getTaskType()}>Click Me!
</Button>
，但我尝试在 useQuery 中使用 refetch，这绝对允许我调用该函数，但似乎并不总是在组件挂载时触发(更令人困惑的是，有时它有，有时它不会(
我怀疑
。网络请求未触发？...或者您的onCompleted条件不符合(那么没有dispatch(？没有dispatch并不意味着不请求/解雇...
onCompleted: (data) => {
if (data !== undefined && data.getTaskTypes !== undefined && data.getTaskTypes !== state.taskTypes) {
也许您可以删除所有条件：
- 当
data存在时触发onCompleted，无需对其进行测试(data !== undefined( getTaskTypes可为空？如果不是(恕我直言不应该(，也不要测试它;data.getTaskTypes !== state.taskTypes- 为什么不只要求此类型的 API？不支持过滤？
你的代码有点混乱
useQuery(GET_TASK_TYPES(["taskId", "taskType"])
它看起来像一些生成器/函数(定义必填字段？ - 改用 const。
雷杜克斯
看起来您正在使用 redux 来存储接收的数据。Apollo 要聪明得多(规范化缓存(，不需要为每个数据 [类型] 获取编写自定义操作。你应该使用阿波罗，但可能你测试了它并失败了？...
缺少id字段？
您的任务没有id字段，但taskId？阿波罗不会将其写入缓存。幸运的是，您可以帮助Apollo识别数据中的唯一标识符 - https://www.apollographql.com/docs/react/caching/cache-configuration/#custom-identifiers
在此之后，您可以简单地将datafromuseQuery用于第一次渲染和按需/从事件处理程序refetch(不使用useEffect钩子(。