使用 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

删除注销时的所有查询

在 onLogout 函数中使用以下行。这将删除所有查询的缓存。

queryClient.removeQueries();

注销后最好清除所有缓存，否则下次登录时会瞬间显示上次登录的数据。

要观察上述行为，请使用<ReactQueryDevtools /> DOCS

您可以通过传递 queryKey 来删除特定缓存，如下所示。文档管理系统

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

Answer 3

这是我当前的实现，看起来效果很好。

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