08 Jan 2018 · 2 min read

Prefetching Data with Next.js and Apollo

<blockquote> Update: My pull requests implementing the techniques discussed here were merged into the zeit/next.js <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js/tree/canary/examples/with-data-prefetch">with-data-prefetch</a> and <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js/tree/canary/examples/with-apollo">with-apollo</a> examples. You can easily combine the various examples (including the above two) to achieve your desired functionality. </blockquote> For most modern web apps, network speed and latency is still the biggest constraint for high performance and great UX. Universally rendered Isomorphic applications do a great job to solve that to some extent without sacrificing interactivity by processing the complete DOM of the first request on the server and subsequent requests on the client. But there is a lot more we can do. Modern web apps already have their core application logic on the client by the time the first request completes. From there on anticipating the user action and selectively prefetching the data can lead to great performance and UX improvements. <a rel="noopener nofollow noreferrer external" target="_blank" href="https://www.apollographql.com/client/">Apollo</a> and <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js">Next</a> is the stack of our choice, having the necessary capabilities, to demonstrate our concept. Adam Soffer’s <a rel="noopener nofollow noreferrer external" target="_blank" href="https://dev-blog.apollodata.com/whats-next-js-for-apollo-e4dfe835d070">introduction</a> summarizes <a rel="noopener nofollow noreferrer external" target="_blank" href="https://www.apollographql.com/client/">Apollo</a> and <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js">Next</a> with their concerns perfectly: <blockquote> Apollo is a GraphQL client that’s concerned exclusively with the data layer of our application; it cares about efficiently fetching our data. Next, on the other hand, is a minimalistic framework for server-rendered React applications that’s concerned exclusively with the UI layer of our application; it cares about efficiently rendering our UI. </blockquote> <h2 id="tying-together-next-js-and-apollo"><a class="zola-anchor" href="#tying-together-next-js-and-apollo" aria-label="Anchor link for: tying-together-next-js-and-apollo">🔗</a> Tying together Next.js and Apollo</h2> Next has a unique way of loading data, every page has a lifecycle hook function <code>getInitialProps</code> which is called while loading on the client as well as the server. This is a very nice separation of our data logic from the UI logic and is what enables us to use the full power of Apollo and Next as both of these frameworks make no assumptions about each others layer and provides the perfect abstraction to connects these two layers. Apollo client’s react library <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/apollographql/react-apollo">react-apollo</a> provides a helper function <code>getDataFromTree</code> which recursively traverses the supplied React component and executes every <code>graphql()</code> query it finds, storing the result in its local cache (configured by us). The excellent <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js/tree/canary/examples/with-apollo">example</a> from the Next.js repo shows how we can combine these two functionalities by creating a HOC which wraps <code>getDataFromTree</code> within <code>getInitialProps</code> and returning the cached data as a plain Javascript Object Here we make sure to use <code>getDataFromTree</code> on both the client and for SSR, altering the example like so: <pre class="giallo" style="color: #657B83; background-color: #FDF6E3;" ><code data-lang="javascript">import React from 'react' import PropTypes from 'prop-types' import { ApolloProvider, getDataFromTree } from 'react-apollo' import Head from 'next/head' import initApollo from './initApollo' export default ComposedComponent => { return class WithData extends React.Component { static displayName = `WithData(${getComponentDisplayName( ComposedComponent )})` static propTypes = { serverState: PropTypes.object.isRequired } static async getInitialProps(ctx) { // Initial serverState with apollo (empty) let serverState // Evaluate the composed component's getInitialProps() let composedInitialProps = {} if (ComposedComponent.getInitialProps) { composedInitialProps = await ComposedComponent.getInitialProps(ctx) } // Run all GraphQL queries in the component tree // and extract the resulting data const apollo = initApollo(); try { // Run all GraphQL queries await getDataFromTree( <ComposedComponent ctx={ctx} {...composedInitialProps} />, { router: { asPath: ctx.asPath, pathname: ctx.pathname, query: ctx.query }, client: apollo, } ) } catch (error) { // Prevent Apollo Client GraphQL errors from crashing SSR. // Handle them in components via the data.error prop: // https://www.apollographql.com/docs/react/basics/queries.html#graphql-query-data-error } if (!process.browser) { // getDataFromTree does not call componentWillUnmount // head side effect therefore need to be cleared manually Head.rewind() } // Extract query data from the Apollo store serverState = { apollo: { data: apollo.cache.extract() } } return { serverState, ...composedInitialProps } } constructor(props) { super(props) this.apollo = initApollo(this.props.serverState.apollo.data) } render() { return ( <ApolloProvider client={this.apollo}> <ComposedComponent {...this.props} /> </ApolloProvider> ) } } }</code></pre><h2 id="prefetching-data"><a class="zola-anchor" href="#prefetching-data" aria-label="Anchor link for: prefetching-data">🔗</a> Prefetching Data</h2> Next has <a rel="noopener nofollow noreferrer external" target="_blank" href="https://github.com/zeit/next.js#with-link-1">in-built</a> support for prefetching pages by adding the <code>prefetch</code> prop to the <code><Link></code> component or imperatively calling <code>Router.prefetch('/dynamic')}</code>. However this fetches the page’s JS code but not its data/initial props. This results in instant page loads but, some would argue even worse, a loading indicator shown for however long it takes to get the relevant page data from your API. Since we know our stack we can optimise performance using that knowledge. We know that with every call to <code>getInitialProps</code> of a component wrapped in our <code>WithData</code> HOC, our queries are cached in the local ApolloClient store. With that all we have to do is get a reference to our top level page component and manually call its <code>getInitialProps</code> method! <pre class="giallo" style="color: #657B83; background-color: #FDF6E3;" ><code data-lang="javascript">import Router from 'next/router' import { format, resolve, parse } from 'url' export default prefetch = async (href) => { // if we're running server side do nothing if (typeof window === 'undefined') return const url = typeof href !== 'string' ? format(href) : href const { pathname } = window.location const parsedHref = resolve(pathname, url) const { query } = typeof href !== 'string' ? href : parse(url, true); // get component reference const Component = await Router.prefetch(parsedHref) // fetch the component props // and cache locally, handled within getInitialProps if (Component && Component.getInitialProps) { const ctx = { pathname: href, query, isVirtualCall: true } await Component.getInitialProps(ctx) } }</code></pre> We can then call this throughout our application, like for example: <code><a onMouseOver={() => prefetch("/product?sku=0001")}></code> This will load not only our product.js page but also all the specific graphql queries into the ApolloClient store.