Как удалить данные при выходе из системы при использовании firebase и реагировать на запросы?

Когда мой пользователь выходит из системы, я хочу удалить все пользовательские данные из приложения, но у меня возникают проблемы с реализацией этого.

У меня есть собственный хук 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
        }
    )
}

Как ни странно, запрос по-прежнему выбирается один раз после выхода из системы, когда запрос уже должен быть отключен.


reactjs firebase firebase-authentication google-cloud-functions react-query
person Eigel Asinas    schedule 21.05.2021    source источник
comment
Вы имеете в виду его удаление на сервере? Или просто очистить его, чтобы другой пользователь мог войти в систему?   -  person samthecodingman    schedule 21.05.2021
comment
@samthecodingman очищает его. Я хочу удалить пользовательские данные из кеша и из пользовательского интерфейса.   -  person Eigel Asinas    schedule 22.05.2021
comment
Пробовали такой подход? поддержание актуальности пользовательских данных   -  person samthecodingman    schedule 22.05.2021
comment
Можете ли вы опубликовать свое решение в качестве ответа и отметить его как таковое для видимости пользователям? Спасибо!   -  person afarre    schedule 31.05.2021

Ответы (2)


arrow_upward
1
arrow_downward

Вот моя текущая реализация, которая, кажется, работает нормально.

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)
    )
}
person Eigel Asinas    schedule 02.06.2021

arrow_upward
0
arrow_downward 

queryClient.removeQueries("user")

удалит все запросы, связанные с пользователем. Это хорошо, когда вы выходите из системы. Вы можете очистить все, вызвав removeQueries без параметров.

person TkDodo    schedule 21.05.2021
comment
это, похоже, не влияет на пользовательский интерфейс. - person Eigel Asinas; 21.05.2021
comment
хммм, как это должно повлиять на пользовательский интерфейс? Я думал, что после выхода на экран не выводится запрос? Если вы удалите запрос, а затем снова отобразите useQuery, запрос начнется с нуля. Вы также можете попробовать resetQueries, но он сообщит подписчикам об изменениях, если они у вас есть: реагировать -query.tanstack.com/reference/ - person TkDodo; 21.05.2021
comment
У меня есть несколько постов, в которых есть кнопка "Мне нравится". Когда пользователь вошел в систему, он должен показывать либо выделенную кнопку, либо кнопку с заливкой, в зависимости от того, понравилась ли она пользователю. После выхода пользователя из системы должна отображаться только выделенная кнопка. Я не выполняю никаких перенаправлений во время выхода из системы, поэтому сообщения и подобные кнопки все еще отображаются. Должен ли я вместо этого добавить логику для обнаружения выхода из системы в логику рендеринга подобных кнопок? - person Eigel Asinas; 22.05.2021