Comments (5)
posva
commented on June 22, 2024
Your useDocument() shouldn't be inside an asyncData: https://vuefire.vuejs.org/guide/realtime-data.html
from vuefire.
harrycheung
commented on June 22, 2024
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
from vuefire.
posva
commented on June 22, 2024
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.
from vuefire.
harrycheung
commented on June 22, 2024
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:
- I start the emulators
- I added the following data to Firestore.
- I start the server.
- 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
- 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
from vuefire.
harrycheung
commented on June 22, 2024
Hi @posva, can you take another look? I've added some more context.
from vuefire.
Related Issues (20)
- id field value is override by vuefire HOT 3
- typescript type definition not consistence: useDocument return null reference if document does not exist HOT 1
- Error when installing v3.1.20. - simple-git-hooks not recognized as a command HOT 6
- `databaseDefaultSerializer` exported incorrecly HOT 1
- Use multiple firestore databases HOT 1
- When using withConverter on collection it do not fetch inner refs
- returned values from `useDocument` and `useCollection` using a getter aren't reactive HOT 1
- `toFirestore` inside `globalFirestoreOptions.converter` is never called HOT 1
- Detect nested refs in custom classes
- ssrKey: false not working in useDocument HOT 1
- Currently you are not able to use auth module without a service account
- Readonly `id` field is undefined by default (despite filled other data)
- Support Multi tenancy HOT 2
- Customize cookie minting auth endpoint path
- Doesnt with NuxtImage
- ProtobufJS critical dependency vulnerability HOT 1
- firebase sensitive data (.env) appear when view page source HOT 1
- Add the Nuxt VueFire example repos to the docs. HOT 1
- Dependency errors for latest versions of `firebase-functions` and `firebase-admin` HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuefire.