使用 firebase 和反应查询时如何在注销时删除数据？

Question

当我的用户注销时，我想从应用程序中删除所有用户数据，但我在执行此操作时遇到了问题。

我有一个获取用户数据的自定义 useUserData() 挂钩。 getUser() 是一个可调用的云函数。到目前为止，这是我的代码。

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
        }
    )
}

编辑：

看来我的效果清理处理有误。这似乎有效。

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
        }
    )
}

奇怪的是，注销后查询仍会提取一次，而此时查询应该已被禁用。

Answer 1

queryClient.removeQueries("user")

将删除所有与用户相关的查询。在注销时做一件好事。您可以通过不带参数调用 removeQueries 来清除所有内容。

Answer 2

这是我目前的实现，似乎工作正常。

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

export default function useAuthenticatedQuery(key, func, options){
    const [ enabled, setEnabled] = useState(false)
    const queryClient = useQueryClient()
    useEffect(_ => {
        const unsubscribe = firebase.auth().onAuthStateChanged(user => {
            setEnabled(Boolean(user))    
            if (!user){
                queryClient.setQueryData(key, _ => undefined)
                queryClient.removeQueries(key, _ => undefined)
            }else 
                queryClient.invalidateQueries(key, { refetchActive: true, refetchInactive: true })
        })
        return _ => unsubscribe()
        // eslint-disable-next-line
    }, [])

    return useQuery(
        key,
        func,
        {
            ...options,
            enabled
        }
    )
}

我像使用常规 useQuery 挂钩一样使用它：

import useAuthenticatedQuery from "Hooks/useAuthenticatedQuery"

export default function useUserData(){

    return useAuthenticatedQuery(
        "user", 
        () => getUser().then(res => res.data)
    )
}

使用 firebase 和反应查询时如何在注销时删除数据？

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

firebase

reactjs

firebase-authentication

google-cloud-functions

react-query