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

【问题标题】：refetch different query from retry of another query in React Query从 React Query 中的另一个查询的重试中重新获取不同的查询
【发布时间】：2021-06-01 17:55:18
【问题描述】：

在我的解决方案中，我将 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没有效果。

【问题讨论】：

标签： javascript reactjs react-query

【解决方案1】：

retry 函数不是异步的 - 它希望您返回 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
    }
 }
})

【讨论】：