Weird error with TanStack Query

I made this hook to get user info from Convex:

export function useUserProfile() {
    const { user } = useUser();
    const clerkId = user?.id;

    if (!clerkId) {
        throw new Error("User is not authenticated");
    }

    const userQuery = useQuery(
        convexQuery(api.users.getUserByClerkId, { clerk_id: clerkId }),
    );

    return { user: userQuery.data!, isPending: userQuery.isPending };
}

export function useUserProfile() {
    const { user } = useUser();
    const clerkId = user?.id;

    if (!clerkId) {
        throw new Error("User is not authenticated");
    }

    const userQuery = useQuery(
        convexQuery(api.users.getUserByClerkId, { clerk_id: clerkId }),
    );

    return { user: userQuery.data!, isPending: userQuery.isPending };
}

This is my code when im using it

export default function () {
    const { user, isPending } = useUserProfile();

    const userScore = useQuery({
        ...convexQuery(api.score.getUserScore, { userId: user._id }),
        enabled: !!user?._id,
    });

    if (isPending || (user?._id && userScore.isPending)) {
        return (
            <ScrollView className="bg-background">
                <ActivityIndicator className="text-primary" />
            </ScrollView>
        );
    } else {
        return <Content/>
    }
}

export default function () {
    const { user, isPending } = useUserProfile();

    const userScore = useQuery({
        ...convexQuery(api.score.getUserScore, { userId: user._id }),
        enabled: !!user?._id,
    });

    if (isPending || (user?._id && userScore.isPending)) {
        return (
            <ScrollView className="bg-background">
                <ActivityIndicator className="text-primary" />
            </ScrollView>
        );
    } else {
        return <Content/>
    }
}

This is a React Native code, I have a chance of having: Cannot read property _id of undefined at:

const userScore = useQuery({
        ...convexQuery(api.score.getUserScore, { userId: user._id }),
        enabled: !!user?._id,
    });

const userScore = useQuery({
        ...convexQuery(api.score.getUserScore, { userId: user._id }),
        enabled: !!user?._id,
    });

It still try to access user._id even enabled false?

2 Replies

Convex Bot•2mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

erquhart•2mo ago

You’re still accessing that property with userId: user._id, needs an optional chaining operator, userId: users?._id

Weird error with TanStack Query

Did you find this page helpful?