firebase / firebase/firebase-tools-ui

Firestore Emulator UI does not display sub-collections after 3rd nesting

Open
#932 1 comment 3 reactions 1 assignee Claimed by @christhompsongoogle View on GitHub
Dominant language
TypeScript
Stars
291
Forks
74
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
Emulator UI is not updated with additionally nested sub-collections & documents after the third nesting. E.G.

Here the ALL_CAPS are collections and camelCase are documents. If `${STUDY_DATA}/${studyID}/${STUDY_PARTICIPANTS}/${participantID}` has already been created then this works:
```js
await setDoc(
doc(
db,
`${STUDY_DATA}/${studyID}/${STUDY_PARTICIPANTS}/${participantID}/${PARTICIPANT_RESPONSES}/${startDate}`
),
data
)
```
the `PARTICIPANT_RESPONSES` subcollection and first document (`startDate`) immediately appear in the emulator UI. However,

```js
await addDoc(
collection(
db,
`${STUDY_DATA}/${study_id}/${STUDY_PARTICIPANTS}/${participant_id}/` +
`${PARTICIPANT_RESPONSES}/${start_date}/${EXPERIMENT_TRIALS}`
),
data
)
```
does NOT change the emulator UI at all. Nothing changes, even when I refresh the page.

**To Reproduce**
Steps to reproduce the behavior:

1. Write a single nested document - e.g. a study document (`STUDY_DATA/studyID`)
2. Nest a document under this - e.g. a study participant (`STUDY_DATA/studyID/STUDY_PARTICIPANTS/participantID`)
3. Nest another document - e.g. a participant's experiment
- `STUDY_DATA/studyID/STUDY_PARTICIPANTS/participantID/PARTICIPANT_RESPONSES/startDate`
4. Add a 4th nesting - e.g. an experiments trial



- `STUDY_DATA/studyID/STUDY_PARTICIPANTS/participantID/PARTICIPANT_RESPONSES/startDate/EXPERIMENT_TRIALS/trialID`
5. The `EXPERIMENT_TRIALS` subcollection and `trialID` document do not appear in the UI

**Expected behavior**
The additionally nested data appears in the Emulator UI as with steps 2 and 3

**Screenshots**

The Emulator UI after I write to Firestore:
![image](https://user-images.githubusercontent.com/38439940/227632068-585b223b-521a-4386-9862-a66117501510.png)

The Emulator UI after I manually add the subcollection name to the URL:
![image](https://user-images.githubusercontent.com/38439940/227632158-94f96a19-bce9-49a2-9580-6b2af040e64e.png)

**Desktop (please complete the following information):**

- OS: Windows 10
- Browser: chrome
- Version: 9.18.0

**Additional context**

I have checked both `addDoc` and `setDoc` with no change and the data is 100% being written to the emulators. I can query the data immediately after the `await` in code. Also, If I type in the URL exactly (e.g. changing `http://localhost:4000/firestore/data/studyData/s1/studyParticipants/p1/participantResponses/2023-03-24T19%3A56%3A36.570Z` to `http://localhost:4000/firestore/data/studyData/s1/studyParticipants/p1/participantResponses/2023-03-24T19%3A56%3A36.570Z/experimentTrials` ) the nested documents DO appear.

A somewhat similar situation appears when writing "real data" to Firestore itself. Occasionally the nested subcollections & documents will not automatically appear. However, with the live data a refresh of the Firestore console will fix the issue - this does NOT change anything when using the emulators

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.