2 function reactjs react-hooks react-query
我正在使用 React Query 根据用户的活动组织获取数据。用户能够切换他们正在查看其数据的组织,因此当值发生user.activeOrg变化时,我希望查询客户端使用新组织作为要从中获取的值来重新获取其查询。但是,由于该函数是以用户的默认组织作为初始值进行初始化的,因此当触发时,useEffect它仍然会从原始组织中获取数据。
有没有办法可以声明钩子的依赖关系,useQuery以便它可以根据user.activeOrg值更改刷新其查询?我知道您可以使用该enabled选项强制挂钩等到某个值存在后再激活(见useQuery下面的调用),但我找不到一种方法来为挂钩提供依赖的其他变量。任何帮助表示赞赏。谢谢。
const { user } = useActiveUser();
const queryClient = useQueryClient();
const getData = async () => {
const data = await OrgService.getOrgData(user.activeOrg);
return data;
};
const { data } = useQuery('orgData', getData, { enabled: !!user });
useEffect(() => {
if (!user) return;
queryClient.refetchQueries();
}, [user?.activeOrg]);
Run Code Online (Sandbox Code Playgroud)
小智 7
对于遇到此问题的任何人,我在阅读文档中的此页面后最终找到了解决方案。您可以将变量与查询键一起传递到查询函数中以动态获取,无需重新获取:
const { user } = useActiveUser();
const getData = async ({ queryKey }) => {
const [_key, { activeUser }] = queryKey;
const data = await OrgService.getOrgData(activeUser.activeOrg);
return data;
};
const { data } = useQuery(['orgData', { activeUser: user }], getData, { enabled: !!user });
Run Code Online (Sandbox Code Playgroud)