response-query: почему этот запрос всегда устарел?

Question

Я настроил ответный запрос с бесконечным устаревшим временем для документов, например:

    <ReactQueryConfigProvider config={{
        queries: {
            staleTime: Infinity
        }
    }}>

Соответственно, большинство моих запросов никогда не устаревают, за исключением одного, моего запроса "профиль":

const getProfile = async () => {
    if (!isAuthenticated()) {
        return null;
    }
    try {
        const response = await axios.get('/user/profile');
        return response.data;
    }
    catch (error) {
        errorCheck(error);
    }
};

export const useProfile = () =>
    useQuery('profile', getProfile);

Это запрос, содержащий профиль текущего пользователя. isAuthenticated() - это синхронный вызов, который проверяет, есть ли у нас токен пользователя (поэтому я не выполняю вызовы API, которые, как я знаю, завершатся ошибкой).

По какой-то причине в окне инструментов разработки response-query этот запрос сразу отображается как устаревший. Я действительно не понимаю, что я делаю по-другому с этим. Есть предложения по отладке этого?

Answer 1

Вот в чем, я думаю, была проблема и как я ее решил.

Потому что я установил staleTime: Infinity в моем, я ожидал, что все мои запросы никогда не устареют.

Отличие этого запроса в том, что я делаю его недействительным, когда происходит что-то, не связанное с пользовательским интерфейсом.

В моем коде есть таймер сеанса, который по истечении сеанса вызывает queryCache.invalidateQueries('profile') для запуска любого пользовательского интерфейса, отображающего профиль, для повторного рендеринга.

Похоже, что если invalidateQueries когда-либо вызывается вне контекста запроса, настройки в ReactQueryConfigProider не соблюдаются, поэтому staleTime установлено значение по умолчанию, 0.

Чтобы решить эту проблему, для запросов, которые мне нужно сделать недействительными по таймеру, я добавил { staletime: Infinity } к запросу явно:

      export const useProfile = () => {
    const { data: session } = useSession();
    const userId = session?.userId;
    return useQuery(['profile', userId], getProfile, { staleTime: Infinity });
};

Я не буду заходить так далеко, чтобы говорить, что это ошибка в response-query, но, похоже, это обходной путь.

Answer 2

Я столкнулся с той же проблемой, и она была вызвана компонентом, у которого был дочерний компонент, который использовал re sponse-query. Проверьте свое дерево компонентов и убедитесь, что ничто не использует useProfile() вне <ReactQueryConfigProvider>.