How to remove data on logout when using firebase and react query?

Question

When my user logs out, I want to remove all user data from the app, but I'm having trouble implementing this.

I have a custom useUserData() hook that gets the user's data. getUser() is a callable cloud function. This is my code so far.

import { useEffect, useState } from "react"
import { useQuery, useQueryClient } from "react-query"
import { getUser } from "Services/firebase/functions"
import firebase from "firebase/app"

export default function useUserData(){
    const [ enabled, setEnabled] = useState(false)
    const queryClient = useQueryClient()

    useEffect(_ => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
            setEnabled(Boolean(user))
            if (!user){
                // remove data
            }
            else queryClient.invalidateQueries("user", { refetchActive: true, refetchInactive: true })
        })

        return unsubscribe()
    }, [])

    return useQuery(
        "user", 
        () => getUser().then(res => res.data),
        {
            enabled
        }
    )
}

Edit:

It seemed that I was handling my effect cleanup wrong. This seems to be working.

import { useEffect, useState } from "react"
import { useQuery, useQueryClient } from "react-query"
import { getUser } from "Services/firebase/functions"
import firebase from "firebase/app"

export default function useUserData(){
    const [ enabled, setEnabled] = useState(false)
    const queryClient = useQueryClient()
    useEffect(_ => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
            setEnabled(Boolean(user))    
            if (!user) {
                queryClient.removeQueries("user")
            } 
        })
        
        return _ => unsubscribe()
    }, [])

    return useQuery(
        "user", 
        () => getUser().then(res => res.data),
        {
            enabled
        }
    )
}

Weirdly enough, the query still fetches once after logging out, when the query should already be disabled.

Answer 1

queryClient.removeQueries("user")

will remove all user related queries. It's a good thing to do on logout. You can clear everything by calling removeQueries without parameters.

Answer 2

Remove all queries on logout

use the below line in your onLogout function. This will remove the cache for all queries.

queryClient.removeQueries();

It's ideal to clean all the cache after logout, else next login will show the data of the previous login for a split second.

To observe the above-mentioned behavior use <ReactQueryDevtools /> DOCS

You can remove specific cache by passing the queryKey like so. DOCS

queryClient.resetQueries({ queryKey, exact: true })