0

Firebase v9 is acting weird I think, I have on my code:

async nuxtServerInit({ commit }) {
  try {
        const dryers = await getDocs(collection(db, "dryers"))

        const payload = dryers.docs.map(item => {
            return {
                docId: item.id,
                ...item.data()
            }
        })
    
        commit("LOAD_DRYERS", payload)
    } catch (err) {
        console.error(err.message || "Could not process the request, something went wrong.")
    }
}

This is part of my vuex actions that should trigger on init, it is working fine in this part, the code is populated to the state, but the problem is, whenever I load data on click event, i.e:

<button @click.prevent="testQuery">Test query</button>

...

async testQuery() {
  try {
    const x = await getDocs(collection(db, "dryers"))

    console.log(x)
  } catch (err) {
    console.error(err)
  }  
}

the weird thing is, when testQuery is executed, I get a could not reach cloud firestore backend error response, when in fact, a successful query is made during init.

here's my config:

import { initializeApp } from 'firebase/app'
import { initializeAuth, getAuth } from "firebase/auth"
import { initializeFirestore } from "firebase/firestore"

const firebaseConfig = {
  apiKey: process.env.apiKey,
  authDomain: process.env.authDomain,
  projectId: process.env.projectId,
  storageBucket: process.env.storageBucket,
  messagingSenderId: process.env.messagingSenderId,
  appId: process.env.appId,
  measurementId: process.env.measurementId
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)

initializeAuth(app)

const auth = getAuth(app)

const db = initializeFirestore(app, {
  experimentalForceLongPolling: true
})

export { auth, db }

I'm using firebase v9.1.2, any tips?

dex aniez
  • 1
  • After doing some unit tests, another CORS error is actually showing before the `could not reach cloud firestore backend` error. I've tried to run it on different browsers aside from chrome and it turned out that it is working fine, unfortunately, it does not work on chrome, I still don't know why though : – dex aniez May 19 '22 at 07:58
  • If it's a CORS issue, you know what to do now: https://stackoverflow.com/a/72211930/8816585 – kissu May 19 '22 at 09:50
  • Thanks for your response @kissu, I debugged this code for a couple of days now, and I think my browser is the problem, I tried to access the project remotely using a different pc before deploying it, and it works fine on other pc using chrome browser, what's confusing me is, my laptop's chrome is using the latest version, same with the other pc I tried, anyway, I'm moving forward, this is yet an unsolved mystery that I will continue to solve in the future. – dex aniez May 21 '22 at 00:10

0 Answers0