vueuse/rxjs useObservable usage with nested objects/observables

[abarke]

Hi Everyone,

I came across an error in Vue when using useObservable. Especially in the case when using an observable that:

1. Does not immediately emit any values (null)
2. One tries to access a nested ref (possibly null) in the template.

As you can see in this example, there is a interval(1000) observable that only emits a value after 1 sec, however during initial render of the component the value is null... therefore any access to nested properties will return an error.

Example: https://stackblitz.com/edit/vue3-ts-use-observable?file=src/components/Example.vue

As noted in the code, there are a few ways around this...

1. Use optional chaining to simply return null (only uses a single call to useObservable and therefore one subscription).
2. Always use one ref per value in the template (uses multiple calls to useObservable and therefore multiple subscriptions).

Example of approach 2...

const foo = useObservable(apiCall$.pipe(map(({ data }) => data.nested.foo )))
const bar = useObservable(apiCall$.pipe(map(({ data }) => data.nested.bar )))

I'm tending to lean more towards the second approach for these reasons:

1. Cleaner template e.g. <span>{{ foo }}</span> and with defaults <span>{{ foo ?? 'n.a.' }}</span>.
2. No need for nullish coalescing in templates or when drilling down into objects.
3. Drill down logic stays in the <script> section and each ref can be easily extended using pipe() operators making it more maintainable.

What is your opinion? What is best practices for handling observables with nested objects from API calls leveraging subscriptions e.g. firestore? How to handle defaults elegantly during the stale period where observables haven't emitted any values?

@benlesh @antfu

Inspiration for useObservable perhaps? https://v3.nuxtjs.org/docs/usage/data-fetching/#params

[scvnc]

Why I think this surrounds a bug

At a glance, this is a bug in the type signature of useObservable. The type signature says that it returns Ref<H> but per your example it obviously returns Ref<H | undefined>.

Interestingly enough, this seems to be the case becuase the next line declares a ref of the correct type but by the time it is returned, it incorrectly casts away.

How is this solved in other ecosystems (Flutter)

In Dart, where Streams are first class, the authors of the Flutter equivalent of VueUse allow you to provide an initialData

const count = useObservable(myCount$, {initialData: 0})

This ensures that it always returns a Ref<number> otherwise it returns Ref<number | undefined>

As for how to handle this in Real Apps

When your Ref from useObservable is undefined, you typically need to handle this in your Vue Template.

I think your option 1 and option 2 are fine possibilities, however there are a few more options.

Option 3 (my fav)

Why would it ever be undefined? Because it's loading! That's a state your component likely needs to handle gracefully.

<script setup>
  const yourApiCallData = useObservable(apiCall$)
  const isLoading = computed(() => yourApiCallData === undefined)
</script>

<template>
  <div v-if="isLoading">
    Loading!
  </div>

  <div v-else>
    {{yourApiCallData.firstName}}
    No null ref errors, because yourApiCallData will never be null.
  </div>
</template>

Option 4 (with new proposed API)

<script setup>
  const yourApiCallData = useObservable(apiCall$, {initialData: {firstName: ''}})
</script>

<template>
  <div>
    {{yourApiCallData.firstName}}
    No null ref errors, because yourApiCallData will never be null.
  </div>
</template>

[abarke]

Thanks for taking time to look at this @scvnc. Thought I was the only one mad one in the room for a minute!

Can you submit a PR? Otherwise I might give it a go 😃

[scvnc]

@abarke Draft PR

Let me know what you think.. I'm still evaluating it for my use cases

[scvnc]

Also relevant issue created #1544

[scvnc]

#1551 PR up.

In the mean time, here is a shim I'm going to use

rxjs.ts

import { Observable, } from 'rxjs';
import { computed, Ref } from 'vue';
import * as VueUseRxJs from '@vueuse/rxjs';
import type { UseObservableOptions as _UseObservableOptions } from '@vueuse/rxjs';


interface UseObservableOptions<I> extends _UseObservableOptions {
    /**
     * The value that should be set if the observable has not emitted.
     */
    initialValue?: I | undefined;
}

export const useObservable = <H, I = undefined>(
    observable: Observable<H>,
    options?: UseObservableOptions<I>
) => {
    const _ref = VueUseRxJs.useObservable(observable, { onError: options?.onError });

    return computed(() =>
        _ref.value === undefined ? options?.initialValue : _ref.value
    ) as Readonly<Ref<H | I>>;
}

[abarke]

@scvnc awesome! thanks. will give it a go...