React-Query:如何使用query再次获取?

Question

你好，我正在使用useQuery来验证存储在cookie中的承载令牌是否有效。

const getQueryService = () => {

return {
verify: async (): Promise<AuthVerifyTokenResponse | undefined> => {
const bearerToken = Cookies.get("bearer");
if (!bearerToken) {
return Promise.resolve(undefined);
}
try {
const result = await authApi.tokenVerifyGet();
return result;
} catch (error) {
console.error("User verify error", error);
}
},
};
};
const { data: verify, isLoading } = useQuery(
["verify", bearerToken],
queryService.verify,
);

和我在这个钩子中有一个useEffect，它调用refreshToken()端点，在cookie中发送刷新令牌，并在cookie中设置新的承载令牌。

useEffect(() => {
if (!verify) {
refreshToken();
}
}, [verify]);

问题是在用户登录和身份验证后，我在cookie中设置承载令牌，并将用户导航到登陆页面('/')有一些组件将在验证未定义时呈现，但它仍然显示未定义，除非我手动刷新页面，重新获取并返回200状态码(未定义)。

如何使验证在从/login导航到/后再次获取?

Answer 1

与解构数据和从useQuery中isLoading的方式相同，您也可以解构refetch，这是一个被调用时重新触发查询的函数