prefetch-use

1. set up a Prefetcher instance, for example in your router component
2. when you want to display another part of the app, call:
   ```
   prefetcher.prefetch(screenConcretePrefetcher, 'my-screen', () => {
     // prefetch done! you can call setState() or whatever to actually start rendering a tree
   })
   ```

prefetcher.js

// @flow
/* eslint-disable no-console */

import type { Subscription, Observable } from 'rxjs'
import { combineLatest } from 'rxjs/observable/combineLatest'

export type PrefetcherFunction = () => Observable<any>[]

export default class Prefetcher {
  _prefetchSubscription: ?Subscription

  _prefetchComplete = false

  // Fetches data from all observables passed in, then calls onComplete (or if there was an error)
  // If prefetch is aborted manually or by another prefetch, onComplete will never be called
  prefetch(prefetcher: ?PrefetcherFunction, diagnosticTag: string, onComplete: () => void): void {
    // Abort previous prefetch operation
    this.abort()

    // If no prefetcher, done!
    if (!prefetcher) {
      onComplete()
      return
    }

    // Prefetch
    console.log(`Begin prefetching ${diagnosticTag}`)
    console.time && console.time(`prefetch-${diagnosticTag}`)

    const prefetchItems = prefetcher()
    // $FlowFixMe
    const observable = combineLatest(prefetchItems)

    this._prefetchSubscription = observable.subscribe(
      () => {
        if (!this._prefetchComplete) {
          console.log(`End prefetching ${diagnosticTag}`)
          console.time && console.timeEnd(`prefetch-${diagnosticTag}`)
          this._prefetchComplete = true
          onComplete()
        }
      },
      () => {
        console.warn(`Error prefetching ${diagnosticTag}`)
        console.time && console.timeEnd(`prefetch-${diagnosticTag}`)
        onComplete()
      },
    )
  }

  // Stops whatever prefetch operation may have been in progress (it will never complete)
  abort(): void {
    this._prefetchSubscription && this._prefetchSubscription.unsubscribe()
    this._prefetchComplete = false
  }
}

screen-prefetcher-example.js

const prefetchProject = (
  project: Project
): Observable<any>[] => {
  // return an array of all observables components in a subtree will need to render instantly
  return [
    project.author.observe(), // you can pass on observables from Relations
    project.tasks.observe(), // … and from Queries
  ]
}