Le client Firestore dans l'application React n'utilise pas de Websockets mais effectue des centaines de requêtes POST

Question

Je suis nouveau sur React et Firestore (version 9).

J'ai suivi le tutoriel et créé un simple auditeur pour lire et afficher la collection. Je souhaite que Firestore ouvre Websocket par défaut et synchronise les documents via celui-ci. Il s'avère qu'il envoie 发出多次 POST 请求https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=... au point final toutes les secondes

Je ne suis pas dans un VPN et mon pare-feu ne devrait pas bloquer les Websockets.

Dois-je m'inquiéter d'un si grand nombre de demandes ? Puis-je forcer FS à utiliser des Websockets ?

J'ai lu Firebase.INTERNAL.forceWebSockets(); mais il ne semble pas être accessible en Typescript.

Mes composants :

export default function App() {
    const dogsCol = collection(firestore, 'dogs');

    const [dogs, setDogs] = React.useState<Dog[]>([]);

    useEffect(() => {
        const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
            const dogsArray = dogsSnap.docs.map(dogSnap => {
                const dog = dogSnap.data() as Dog;
                dog.id = dogSnap.id;
                return dog;
            });
            setDogs(dogsArray);
        });

        return () => unSubscribe();
    });

    return (
        <Container maxWidth="sm">
            <Box sx={{ my: 4 }}>
                {dogs.map(dog => <div key={dog.id}>{dog.name}</div>)}
            </Box>
        </Container>
    );
}

Ma configuration Firestore :

const firebaseConfig = {
    apiKey: "...",
    // etc
};
const app = initializeApp(firebaseConfig);


export const auth = getAuth(app);
export const firestore = getFirestore(app);

const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: 'select_account'
});

export const signInWithGoogle = () => signInWithPopup(auth, provider)

Answer 1

Question :

La raison pour laquelle vous recevez plusieurs demandes de publication par seconde est que votre useEffect n'a aucun tableau de dépendances et

(La partie en surbrillance change l'état de votre chien, ce qui provoque un nouveau rendu qui appelle la méthode de désabonnement et après le nouveau rendu, useEffect est à nouveau saisi et une boucle infinie apparaît)

L'ajout d'un tableau vide devrait résoudre le problème (oui, vous devez vous en inquiéter et l'éviter car cela peut entraîner des problèmes de front-end et de back-end tels que des performances, des blocages, des plantages et peut également vous obliger à payer une facture Firestore).

Comment y remédier :

Essayez de remplacer useEffect par

useEffect(() => {
        const unSubscribe = onSnapshot(dogsCol, dogsSnap => {
            const dogsArray = dogsSnap.docs.map(dogSnap => {
                const dog = dogSnap.data() as Dog;
                dog.id = dogSnap.id;
                return dog;
            });
            setDogs(dogsArray);
        });

        return () => unSubscribe();
    },[]); // <- this empty array will cause this to only execute the effect onMount

Si vous configurez le reste correctement, l'ajout d'un tableau de dépendances vide (donc en vous abonnant uniquement lorsque le composant est installé) devrait garder vos données synchronisées (pas besoin de Firebase.INTERNAL.forceWebSockets(); ou quelque chose comme ça) < /p>