angular / angular/angularfire

Realtime Database doesn't receive live updates if ref has no children

Open
#3,254 10 comments 4 reactions 0 assignees View on GitHub
comp: database triaged: keep-open type: bug version: legacy (v7-v16)
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

Hello all!
There is an issue when I use the `listVal()` function with the ref that currently has no children. It will return an empty array on subscription, but later, after adding children, it will not emit updates.

The real-time update works as expected when you call the same code with existing children.

### Version info

**Angular:**
13.3.2
**Firebase:**
9.9.2
**AngularFire:**
7.4.1
**Other (e.g. Ionic/Cordova, Node, browser, operating system):**
Node v16.13.0, Mac OS Monterey
### How to reproduce these conditions

```
// Call it when stories has no children
listVal(ref(this.db, 'stories'), { keyField: 'key' })
.subscribe((stories) => {
console.log('Stories', stories); // Will be called once with []
});

push(ref(this.db, 'stories'), {name: 'test'});

// console.log('Stories', stories); will not be called
```

### Debug output

** Errors in the JavaScript console **
No errors

** Output from `firebase.database().enableLogging(true);` **
```
[2022-08-08T13:45:12.328Z] @firebase/database: 0: set {"path":"/stories/-N8xgwy0SpF6eryoEif3","value":{"name":"Test","startDate":"2022-08-08T13:45:12.328Z"},"priority":null}

[2022-08-08T13:45:12.329Z] @firebase/database: p:0: {"r":20,"a":"p","b":{"p":"/stories/-N8xgwy0SpF6eryoEif3","d":{"name":"Test","startDate":"2022-08-08T13:45:12.328Z"}}}

[2022-08-08T13:45:12.491Z] @firebase/database: p:0: from server: {"r":20,"b":{"s":"ok","d":""}}

[2022-08-08T13:45:12.492Z] @firebase/database: p:0: p response {"s":"ok","d":""}
```

### Expected behavior

You can subscribe to the empty parent and receive update when first child is added. It works correctly with `objectVal()` and AngularList from the compat version.

### Actual behavior

It doesn't emit updates if you subscribed to the empty parent.

Looks like the issue is with list function in database, that returns Observable of empty array.
![image](https://user-images.githubusercontent.com/3729354/183435506-c6ee0f86-7482-436a-908a-0c67933b48ff.png)

Contributor guide

Open the contributing guide

Research direction

Start from the listVal(ref(this.db, 'stories'), { keyField: 'key' }) subscription and compare its behavior with objectVal() and the compat AngularList implementation. Reproduce the empty-parent case, then verify that adding a child with push(ref(this.db, 'stories'), ...) causes the subscription to emit an updated list.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
database
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.