How to manage 'data is undefined'

I am working on a migration from redux to RQ. Our existing codebase is full of useEffect's which RQ is slowly replacing which is great, however, there are some instances where the app is breaking as the data is rendering as undefined but useEffect is expecting the value ( I agree we are using useEffect incorrectly probably but maybe there is a fix?).

An example is that we logout a user if they are not authenticated on a particular journey. However, a user may indeed be authenticated but the value is undefined so considered falsy.

    const { data: userData } = fetchUser();

    const isAuthenticated = userData?.is_authenticated; // undefined on mount and I understand why it happens.

    useEffect(() => {
        if (!isAuthenticated) {
            history.push('navigated');
        }
    }, [isAuthenticated]);

    const { data: userData } = fetchUser();

    const isAuthenticated = userData?.is_authenticated; // undefined on mount and I understand why it happens.

    useEffect(() => {
        if (!isAuthenticated) {
            history.push('navigated');
        }
    }, [isAuthenticated]);

TanStack•4y ago•

5 replies

wet-aqua

How to manage 'data is undefined'

    const { data: userData } = fetchUser();

    const isAuthenticated = userData?.is_authenticated; // undefined on mount and I understand why it happens.

    useEffect(() => {
        if (!isAuthenticated) {
            history.push('navigated');
        }
    }, [isAuthenticated]);

    const { data: userData } = fetchUser();

    const isAuthenticated = userData?.is_authenticated; // undefined on mount and I understand why it happens.

    useEffect(() => {
        if (!isAuthenticated) {
            history.push('navigated');
        }
    }, [isAuthenticated]);

How to manage 'data is undefined'

Similar Threads

How to manage 'data is undefined'

Similar Threads

Similar Threads

Similar Threads