The Idea Behind This Example
9 |10 | Apollo is a GraphQL 11 | client that allows you to easily query the exact data you need from a 12 | GraphQL server. In addition to fetching and mutating data, Apollo 13 | analyzes your queries and their results to construct a client-side cache 14 | of your data, which is kept up to date as further queries and mutations 15 | are run, fetching more results from the server. 16 |
17 |18 | In this simple example, we integrate Apollo seamlessly with{' '} 19 | Next by wrapping our pages 20 | inside a{' '} 21 | 22 | higher-order component (HOC) 23 | 24 | . Using the HOC pattern we're able to pass down a central store of query 25 | result data created by Apollo into our React component hierarchy defined 26 | inside each page of our Next application. 27 |
28 |29 | On initial page load, while on the server and inside getInitialProps, we 30 | invoke the Apollo method,{' '} 31 | 32 | getDataFromTree 33 | 34 | . This method returns a promise; at the point in which the promise 35 | resolves, our Apollo Client store is completely initialized. 36 |
37 |