Apollo Pre-fetch on Route Change

[OllieJennings]

I have left the original issue below, just because i dug into the source code and realized how wrong i was :(.

I was wondering if it is possible for react-apollo to prefetch all data using react-router 4 in a route transition before the first render of a graphql component happens?

I know this is done on the server via the renderToStringWithData or getDataFromTree, so perhaps this can be done on the client also?

kinda related: #153 & #417

Original issue below:

Steps to Reproduce

Describe how to reproduce this issue.

1. Load your page (server side rendered)

2. Instantly click on a link <Link to="/some/graphql/page">Click Me</Link> which should render a page that requires GraphQL to fetch the data before it renders the component

Buggy Behavior

The url properly updates, however no rendering occurs because this error appears:

TypeError: undefined is not an object (evaluating 'data.query.value')

• The component for this page is a react component surrounded by a gql, then by a graphql HOC.

• Also no HTTP request is sent to my graphql API when the Link is clicked

Expected Behavior

The data is fetched for the component by firing the graphql query, and the page properly renders with all the data it requires.

Version

• [email protected]
• [email protected]
  .

[OllieJennings]

Possible package to help?

https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

[OllieJennings]

Idea

To have a static route config (like RR 2.x / 3.x required) onto of your standard route components (in RR4).

The on the client side, pass this route config into the ApolloProvider, which can analyze on a route change what data is required for the route change, to fetch data for this.

Have a custom ApolloRR4Link component that can intercept any link so that it halts a transition until data has arrived.

[stale]

This issue has been automatically marked as stale becuase it has not had recent activity. It will be closed if not further activity occurs. Thank you for your contributions to React Apollo!