从 React Query 中的另一个查询的重试中重新获取不同的查询

Question

在我的解决方案中，我将 React Query 的 useQuery 钩子包装在我自己的钩子中以具有特定的重试逻辑：

export function useMyQuery(key, queryFn, options = {}) {
    const queryClient = useQueryClient();
    const query = useReactQuery(key, queryFn, {
        ...options,
        retry: async(count, error) => await retry(count, error, queryClient),
    });

    return query;
}

retry函数本身如下：

export async function retry(count, error, queryClient) {
    
    if (error?.statusCode === 401) {
        // caught 401, trying to refresh token;

        if (await refreshToken(queryClient)) {
            queryClient.refetchQueries('fetchSession');
            return true;
        }
    }


    // Retry 3 times
    return count < 3;
}

最后，我的 fetchSession 查询如下所示：

const { data } = useQuery('fetchSession', () => {
 console.log('fetching new session...');
 return Auth.currentSession();
})

我的目标是在我成功刷新上面代码中的令牌后触发“fetchSession”查询的重新获取，但是，查询永远不会重新获取，即查询主体永远不会在令牌之后运行被刷新。除了在 queryClient 上使用 refetchQueries 方法外，我还尝试了 invalidateQueries 没有效果。

Answer 1

retry 函数不是异步的 - 它期望您 return 一个 boolean，而不是 Promise<boolean>，所以那是行不通的。

我会使用 axios 拦截器（如果您正在使用它）或仅在您的 queryFn 中执行此逻辑：

useQuery('fetchSession', async () => {
 try {
   const { data } = await axios.get(...)
   return data
 } catch(error) {
    if (error.statuscode === 401) {
        const token = await refreshToken(queryClient))
        const { data } = await axios.get(...) // pass token here? don't know how this works for you :)
        return data
    } else {
        throw error
    }
 }
})

从 React Query 中的另一个查询的重试中重新获取不同的查询

refetch different query from retry of another query in React Query

javascript

reactjs

react-query