1---
2category: '@RxJS'
3---
4 
5# useExtractedObservable
6 
7Use an RxJS [`Observable`](https://rxjs.dev/guide/observable) as extracted from one or more composables, return a `ref`,
8and automatically unsubscribe from it when the component is unmounted.
9 
10Automatically unsubscribe on observable change, and automatically unsubscribe from it when the component is unmounted.
11 
12Supports signatures that match all overloads
13of [`watch`](https://vuejs.org/guide/essentials/watchers.html#basic-example).
14 
15## Usage
16 
17<!-- TODO: import rxjs error if enable twoslash -->
18 
19```ts no-twoslash
20import { useExtractedObservable } from '@vueuse/rxjs'
21import ObservableSocket from 'observable-socket'
22import { computed } from 'vue'
23import { makeSocket, useUser } from '../some/lib/func'
24 
25// setup()
26const user = useUser()
27const lastMessage = useExtractedObservable(user, u => ObservableSocket.create(makeSocket(u.id)).down)
28```
29 
30If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError`
31configuration. Without this, RxJS will treat any error in the supplied `Observable` as an "unhandled error" and it will
32be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
33 
34```ts no-twoslash
35import { useExtractedObservable } from '@vueuse/rxjs'
36import { interval } from 'rxjs'
37import { mapTo, scan, startWith, tap } from 'rxjs/operators'
38import { shallowRef } from 'vue'
39 
40// setup()
41const start = shallowRef(0)
42 
43const count = useExtractedObservable(
44  start,
45  (start) => {
46    return interval(1000).pipe(
47      mapTo(1),
48      startWith(start),
49      scan((total, next) => next + total),
50      tap((n) => {
51        if (n === 10)
52          throw new Error('oops')
53      })
54    )
55  },
56  {
57    onError: (err) => {
58      console.log(err.message) // "oops"
59    },
60  }
61)
62```
63 
64You can also supply an optional `onComplete` configuration if you need to attach special behavior when the watched
65observable completes.
66 
67```ts no-twoslash
68import { useExtractedObservable } from '@vueuse/rxjs'
69import { interval } from 'rxjs'
70import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
71import { shallowRef } from 'vue'
72 
73// setup()
74const start = shallowRef(0)
75 
76const count = useExtractedObservable(
77  start,
78  (start) => {
79    return interval(1000).pipe(
80      mapTo(1),
81      startWith(start),
82      scan((total, next) => next + total),
83      takeWhile(num => num < 10)
84    )
85  },
86  {
87    onComplete: () => {
88      console.log('Done!')
89    },
90  }
91)
92```
93 
94If you want, you can also pass `watch` options as the last argument:
95 
96```ts no-twoslash
97import { useExtractedObservable } from '@vueuse/rxjs'
98import { interval } from 'rxjs'
99import { mapTo, scan, startWith, takeWhile } from 'rxjs/operators'
100import { shallowRef } from 'vue'
101 
102// setup()
103const start = shallowRef<number>()
104 
105const count = useExtractedObservable(
106  start,
107  (start) => {
108    return interval(1000).pipe(
109      mapTo(1),
110      startWith(start),
111      scan((total, next) => next + total),
112      takeWhile(num => num < 10)
113    )
114  },
115  {},
116  {
117    immediate: false
118  }
119)
120```
121 
122## Options
123 
124| Option         | Type                 | Description                              |
125| -------------- | -------------------- | ---------------------------------------- |
126| `initialValue` | `T`                  | Value to use before the Observable emits |
127| `onError`      | `(err: any) => void` | Error handler for Observable errors      |
128| `onComplete`   | `() => void`         | Called when the Observable completes     |
129 
130## Return Value
131 
132Returns a readonly `ShallowRef` containing the latest value emitted by the extracted Observable.
133 
134## Type Declarations
135 
136```ts
137export interface UseExtractedObservableOptions<
138  E,
139> extends UseObservableOptions<E> {
140  onComplete?: () => void
141}
142export declare function useExtractedObservable<
143  T extends MultiWatchSources,
144  E,
145  Immediate extends Readonly<boolean> = false,
146>(
147  sources: [...T],
148  extractor: WatchExtractedObservableCallback<
149    MapSources<T>,
150    MapOldSources<T, Immediate>,
151    E
152  >,
153  options?: UseExtractedObservableOptions<E>,
154  watchOptions?: WatchOptions<Immediate>,
155): Readonly<ShallowRef<E>>
156export declare function useExtractedObservable<
157  T extends Readonly<MultiWatchSources>,
158  E,
159  Immediate extends Readonly<boolean> = false,
160>(
161  sources: T,
162  extractor: WatchExtractedObservableCallback<
163    MapSources<T>,
164    MapOldSources<T, Immediate>,
165    E
166  >,
167  options?: UseExtractedObservableOptions<E>,
168  watchOptions?: WatchOptions<Immediate>,
169): Readonly<ShallowRef<E>>
170export declare function useExtractedObservable<
171  T,
172  E,
173  Immediate extends Readonly<boolean> = false,
174>(
175  sources: WatchSource<T>,
176  extractor: WatchExtractedObservableCallback<
177    T,
178    Immediate extends true ? T | undefined : T,
179    E
180  >,
181  options?: UseExtractedObservableOptions<E>,
182  watchOptions?: WatchOptions<Immediate>,
183): Readonly<ShallowRef<E>>
184export declare function useExtractedObservable<
185  T extends object,
186  E,
187  Immediate extends Readonly<boolean> = false,
188>(
189  sources: T,
190  extractor: WatchExtractedObservableCallback<
191    T,
192    Immediate extends true ? T | undefined : T,
193    E
194  >,
195  options?: UseExtractedObservableOptions<E>,
196  watchOptions?: WatchOptions<Immediate>,
197): Readonly<ShallowRef<E>>
198```
199