How to use @sanity/observable - 10 common examples

const uri = this.getDataUrl(endpoint, stringQuery)

    const reqOptions = {
      method: useGet ? 'GET' : 'POST',
      uri: uri,
      json: true,
      body: useGet ? undefined : body,
      query: isMutation && getMutationQuery(options),
      timeout,
      token
    }

    return this._requestObservable(reqOptions).pipe(
      filter(isResponse),
      map(getBody),
      map(res => {
        if (!isMutation) {
          return res
        }

        // Should we return documents?
        const results = res.results || []
        if (options.returnDocuments) {
          return returnFirst ? results[0] && results[0].document : results.map(mut => mut.document)
        }

        // Return a reduced subset
        const key = returnFirst ? 'documentId' : 'documentIds'
        const ids = returnFirst ? results[0] && results[0].id : results.map(mut => mut.id)
        return {
          transactionId: res.transactionId,
          results: results,

const uri = this.getDataUrl(endpoint, stringQuery)

    const reqOptions = {
      method: useGet ? 'GET' : 'POST',
      uri: uri,
      json: true,
      body: useGet ? undefined : body,
      query: isMutation && getMutationQuery(options),
      timeout,
      token
    }

    return this._requestObservable(reqOptions).pipe(
      filter(isResponse),
      map(getBody),
      map(res => {
        if (!isMutation) {
          return res
        }

        // Should we return documents?
        const results = res.results || []
        if (options.returnDocuments) {
          return returnFirst ? results[0] && results[0].document : results.map(mut => mut.document)
        }

        // Return a reduced subset
        const key = returnFirst ? 'documentId' : 'documentIds'
        const ids = returnFirst ? results[0] && results[0].id : results.map(mut => mut.id)
        return {
          transactionId: res.transactionId,

// @flow
import Multicast from '@sanity/observable/multicast'
import Observable from '@sanity/observable'

import {uploadImageAsset} from '../inputs/client-adapters/assets'

const uploadRequests$ = new Multicast

const CONCURRENCY = 4

const registry = []
export function createUploadId(file: File): number {
  const id = registry.length
  const events = new Multicast
  registry[id] = {
    file,
    events$: events.asObservable().do({
      complete: () => {
        registry[id] = null
      }}),
    _multicast: events
  }
  return id

handleUnpublish = () => {
    const {documentId} = this.props
    const {published} = this.state

    let tx = client.observable.transaction().delete(getPublishedId(documentId))

    if (published.snapshot) {
      tx = tx.createIfNotExists({
        ...omit(published.snapshot, '_updatedAt'),
        _id: getDraftId(documentId)
      })
    }

    Observable.from(tx.commit())
      .map(result => ({
        type: 'success',
        result: result
      }))
      .catch(error =>
        Observable.of({
          type: 'error',
          message: `An error occurred while attempting to unpublish document.
        This usually means that you attempted to unpublish a document that other documents
        refers to.`,
          error
        })
      )
      .subscribe(result => {
        this.setStateIfMounted({transactionResult: result})
      })

.catch(error =>
        Observable.of({
          type: 'error',
          message: `An error occurred while attempting to delete document.
        This usually means that you attempted to delete a document that other documents
        refers to.`,
          error
        })
      )

subscribe(value, type, fields) {
    this.unsubscribe()

    const viewOptions = this.props.ordering
      ? {ordering: this.props.ordering}
      : {}

    const visibilityOn$ = Observable.of(!document.hidden)
      .merge(visibilityChange$.map(event => !event.target.hidden))

    const inViewport$ = intersectionObservableFor(this._element)
      .map(event => event.isIntersecting)

    this.subscription = visibilityOn$
      .distinctUntilChanged()
      .switchMap(isVisible => (isVisible ? inViewport$ : Observable.of(false)))
      .distinctUntilChanged()
      .switchMap(isInViewport => {
        return isInViewport
          ? observeForPreview(value, type, fields, viewOptions)
          : Observable.of(null)
      })
      .subscribe(result => {
        if (result) {

      .switchMap(isVisible => (isVisible ? inViewport$ : Observable.of(false)))
      .distinctUntilChanged()

.switchMap(isInViewport => {
        return isInViewport
          ? observeForPreview(value, type, fields, viewOptions)
          : Observable.of(null)
      })
      .subscribe(result => {

fetch(query, params, options = {}) {
    const mapResponse = options.filterResponse === false ? res => res : res => res.result

    const observable = this._dataRequest('query', {query, params}, options).pipe(map(mapResponse))
    return this.isPromiseAPI() ? toPromise(observable) : observable
  },

request(options) {
    const observable = this._requestObservable(options).pipe(
      filter(event => event.type === 'response'),
      map(event => event.body)
    )

    return this.isPromiseAPI() ? toPromise(observable) : observable
  }
})