如何解决惰性查询挂钩在移至上层组件后停止工作
我从下面的代码开始:
- 组件
Bar
具有一个回调,用于处理来自选择器组件Foo
的值; - 组件
Foo
包含一个选择器和一些显示组件; - 在
Foo
中更改选择时,将调用Bar
提供的回调,将触发懒惰的graphql查询,并且Foo
将使用从该查询中接收到的数据进行更新。 此时一切都按预期进行。
const Foo = ({callback}) => {
// hook generated with graphql-codegen tools to query on demand
const [queryStuff,{data,loading}] = useMyLazyQuery();
// selection changed: notify parent and trigger query
const somethingChanged = useCallback(newValue => {
callback(newValue);
queryStuff({variables: {input: newValue}});
},[queryStuff,callback]);
return (
<div>
<SomeSelector onSomethingChange={somethingChanged} />
<Somedisplay data={data} loading={loading} />
</div>
);
}
const Bar = () => {
const somethingCallback = useCallback(newValue => {
// do stuff with value
},[]);
return <Foo callback={somethingCallback}/>
}
现在我需要对查询数据做一些额外的工作,因此我将查询调用移至Bar
回调中,并将结果数据传递给Foo
:
// data and loading status Now come from parent
const Foo = ({callback,data,loading}) => {
// selection changed: notify parent
const somethingChanged = useCallback(newValue => {
callback(newValue);
},[callback]);
return (
<div>
<SomeSelector onSomethingChange={somethingChanged} />
<Somedisplay data={data} loading={loading} />
</div>
);
}
const Bar = () => {
// hook generated with graphql-codegen tools to query on demand
const [queryStuff,loading}] = useMyLazyQuery();
// selection changed: do stuff and trigger query
const somethingCallback = useCallback(newValue => {
// do stuff with value
queryStuff({variables: {input: newValue}});
},[queryStuff]);
useEffect(() => {
// do some extra stuff with data
},[data]);
return <Foo callback={somethingCallback} data={data} loading={loading}/>
}
现在由于某种原因,查询根本不再被触发。我用控制台日志+调试器三遍检查了somethingChanged
和somethingCallback
仍在执行,queryStuff
函数仍然用期望的变量调用,但是相应的graphql查询根本不会显示完全在“网络”标签中。
Apollo devtools显示,从GraphiQL手动执行查询时,查询仍然可以正常工作,只是不再从新版本的代码中执行查询。
可能我遗漏了一些明显的东西,但在这一点上我没有想法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。