Skip to content
Async middleware and utilities for prefetching data in React + React-Router + Apollo projects.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.gitignore
.npmignore Initial commit Jan 2, 2017
README.md Update notice, remove match import Feb 6, 2018
index.js
package-lock.json 1.0.4 Feb 6, 2018
package.json 1.0.4 Feb 6, 2018

README.md

Notice: this library has been used succesfully in production, but probably don't use it. It's here for reference, but I won't be putting more work into it.

For a more generic solution that will work with react-router v4, try react-hydrate.

apollo-prefetch

Async middleware and utilities for prefetching data in React + React-Router + Apollo projects.

Inspired by AsyncProps and next.js.

Goals

  1. When navigating to a new view, prefetch data for next view, then render view.

Install

npm i apollo-prefetch --save

Usage

Add asyncMiddleware to your router instance:

import React from 'react'
import { Router, browserHistory, match, RouterContext } from 'react-router'
import routes from './routes'
import { store, client } from './store'
import { asyncMiddleware } from 'apollo-prefetch'

const Root = props => (
  <ApolloProvider client={client} store={store}>
    <Router
      history={browserHistory}
      routes={routes}
      render={asyncMiddleware({
        routes,
        client,
        store,
        onLoad: () => console.log('Loading...'),
        onComplete: () => console.log('Load Complete'),
      })}
      {...props.renderProps}/>
  </ApolloProvider>
)

match({ browserHistory, routes }, (error, redirectLocation, renderProps) => {
  if (error) throw new Error(error)
  render(<Root renderProps={renderProps}/>, document.getElementById('root'))
})

MIT

You can’t perform that action at this time.