First SSR call to useDocument fails but refresh and second call works

[harrycheung]

Reproduction

https://github.com/harrycheung/nuxt--vuefire-repro-template

Steps to reproduce the bug

Open the root page (app.vue)

Expected behavior

I expect output to look like:

Nuxt 3.11.1 with Nitro 2.9.4                                                   10:20:26 AM
                                                                               10:20:26 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.1.3)                 10:20:27 AM

ℹ Vite client warmed up in 1006ms                                             10:20:28 AM
✔ Nuxt Nitro server built in 726 ms                                     nitro 10:20:29 AM
ℹ Vite server warmed up in 1485ms                                             10:20:29 AM

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

useDocument 2024-03-21T17:20:30.089Z
handle: balancer-white

Actual behavior

However, actual output looks like:

Nuxt 3.11.1 with Nitro 2.9.4                                                   10:20:26 AM
                                                                               10:20:26 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.1.3)                 10:20:27 AM

ℹ Vite client warmed up in 1006ms                                             10:20:28 AM
✔ Nuxt Nitro server built in 726 ms                                     nitro 10:20:29 AM
ℹ Vite server warmed up in 1485ms                                             10:20:29 AM

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

useDocument 2024-03-21T17:20:30.089Z
handle: undefined
useDocument 2024-03-21T17:20:30.525Z
handle: balancer-white

Additional information

My database has multiple 'products', and if I change the id, hot-reload, and refresh, the first useDocument call to fetch it fails. For example:

useDocument 2024-03-21T17:20:30.089Z
handle: undefined
useDocument 2024-03-21T17:20:30.525Z
handle: balancer-white
ℹ hmr update /app.vue                                                         10:25:42 AM
✔ Vite server hmr 6 files in 26.577ms
useDocument 2024-03-21T17:25:49.961Z
handle: undefined

[posva]

Your useDocument() shouldn't be inside an asyncData: https://vuefire.vuejs.org/guide/realtime-data.html

[harrycheung]

@posva

I've amended the repro, and I still get the behavior:

Nuxt 3.11.1 with Nitro 2.9.4                                                11:58:40 AM
[11:58:40 AM] [get-port] Unable to find an available port (tried 3000 on host "localhost"). Using alternative port 3001.
                                                                            11:58:40 AM
  ➜ Local:    http://localhost:3001/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.1.3)              11:58:40 AM

ℹ Vite client warmed up in 818ms                                           11:58:42 AM
✔ Nuxt Nitro server built in 758 ms                                  nitro 11:58:42 AM
ℹ Vite server warmed up in 1475ms                                          11:58:42 AM

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

useDocument 2024-03-21T18:59:02.424Z
handle: undefined
useDocument 2024-03-21T18:59:06.634Z
handle: gate-remover-set

[posva]

I don't know what you are trying to achieve but I tested locally after updating packages and it works. You don't need to await the promise either, consume the product directly in the template. VueFire uses onServerPrefetch() to await it.

Cheers.

[harrycheung]

Thanks @posva for making an attempt at reproduction. I've amended the repro as you suggested (and tried with just the emulators), but the behavior is still happening. The first time I fetch a specific document id using useDocument(), it returns undefined. Subsequent fetches for that same document id succeed. I want the first request to be successful.

As you pointed out in previous iterations, my usage may be at fault here. I've tried to simplify things as much as possible to make it easy to reproduce, so it confounds me that you can't.

Here's what I'm doing:

1. I start the emulators
2. I added the following data to Firestore.
3. I start the server.
4. I point my browser to http://localhost:3000, and my output is as follows:

harry@hankBookPro16 nuxt--vuefire-repro-template % yarn dev
yarn run v1.22.21
$ nuxt dev
Nuxt 3.11.1 with Nitro 2.9.4                                                                                                 8:28:05 AM
                                                                                                                             8:28:05 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Enabling auth emulator at 127.0.0.1:9099                                                              nuxt-vuefire module 8:28:05 AM
ℹ Enabling database emulator at 127.0.0.1:9001                                                          nuxt-vuefire module 8:28:05 AM
ℹ Enabling firestore emulator at 127.0.0.1:8081                                                         nuxt-vuefire module 8:28:05 AM
ℹ Enabling storage emulator at 127.0.0.1:9199                                                           nuxt-vuefire module 8:28:05 AM
  ➜ DevTools: press Shift + Option + D in the browser (v1.1.3)                                                               8:28:05 AM

ℹ Vite client warmed up in 1049ms                                                                                           8:28:07 AM
✔ Nuxt Nitro server built in 461 ms                                                                                   nitro 8:28:07 AM
ℹ Vite server warmed up in 1452ms                                                                                           8:28:07 AM

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

[nuxt-vuefire] ℹ Storage emulator connected to http://127.0.0.1:9199
[nuxt-vuefire] ℹ Firestore emulator connected to http://127.0.0.1:8081
[nuxt-vuefire] ℹ Database emulator connected to http://127.0.0.1:9001
ℹ WARNING: You are using the Auth Emulator, which is intended for local testing only.  Do not use with production credentials.
[nuxt-vuefire] ℹ Auth emulator connected to http://127.0.0.1:9099
useDocument 2024-03-22T15:28:11.036Z
handle: undefined

5. I refresh my browser tab pointed at http://localhost:3000, and my output adds the last two lines:

harry@hankBookPro16 nuxt--vuefire-repro-template % yarn dev
yarn run v1.22.21
$ nuxt dev
Nuxt 3.11.1 with Nitro 2.9.4                                                                                                 8:28:05 AM
                                                                                                                             8:28:05 AM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Enabling auth emulator at 127.0.0.1:9099                                                              nuxt-vuefire module 8:28:05 AM
ℹ Enabling database emulator at 127.0.0.1:9001                                                          nuxt-vuefire module 8:28:05 AM
ℹ Enabling firestore emulator at 127.0.0.1:8081                                                         nuxt-vuefire module 8:28:05 AM
ℹ Enabling storage emulator at 127.0.0.1:9199                                                           nuxt-vuefire module 8:28:05 AM
  ➜ DevTools: press Shift + Option + D in the browser (v1.1.3)                                                               8:28:05 AM

ℹ Vite client warmed up in 1049ms                                                                                           8:28:07 AM
✔ Nuxt Nitro server built in 461 ms                                                                                   nitro 8:28:07 AM
ℹ Vite server warmed up in 1452ms                                                                                           8:28:07 AM

 WARN  [nuxt] #imports should be transformed with real imports. There seems to be something wrong with the imports plugin.

[nuxt-vuefire] ℹ Storage emulator connected to http://127.0.0.1:9199
[nuxt-vuefire] ℹ Firestore emulator connected to http://127.0.0.1:8081
[nuxt-vuefire] ℹ Database emulator connected to http://127.0.0.1:9001
ℹ WARNING: You are using the Auth Emulator, which is intended for local testing only.  Do not use with production credentials.
[nuxt-vuefire] ℹ Auth emulator connected to http://127.0.0.1:9099
useDocument 2024-03-22T15:28:11.036Z
handle: undefined
useDocument 2024-03-22T15:28:19.448Z
handle: handle1

[harrycheung]

Hi @posva, can you take another look? I've added some more context.

[davidstackio]

I was having a similar issue with useDocuement in Nuxt. I've had issues with realtime updates with Vuefire in the past too.

In the end I just ended up using the built in onSnapshot firebase function in my default layout file. In my case userDoc returns an object with Nuxt's builtin useState.

const currentUser = await getCurrentUser();
const userDoc = useUserDoc();

onMounted(() => {
  // Hydrate user state
  if (currentUser) {
    const userDocRef = doc(db, "users", currentUser.uid);
    onSnapshot(userDocRef, (doc) => {
      userDoc.value = {
        id: doc.id,
        ...doc.data(),
      } as UserDoc;
    });
  }
});

Works like a charm.