mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
46b57a6eff
* [refactor] with-apollo-and-redux: 2.0.0 - This ports over `with-apollo` (w/ recent `withRouter` fix and addition for Post) along with implementing `apollo-cache-redux` #3463 - The `redux` side of things is lacking (it is the *same* as the original example) - Created a `routes.js` for use on Server and Client Side (to expand the PostList functionality) - SSR is maintained - Redid the "PostVote" a bit... sorry. 😬️ Possible todo(s): - Add in API and Clock Examples from `with-redux` to show Apollo and Redux working together a bit more - redux-saga (I personally use this, may be too opinionated for the base example though) Packages updated: - apollo-cache-redux - apollo-client-preset - graphql - graphql-anywhere - graphql-tag - isomorphic-unfetch - next-routes - prop-types - react - react-apollo - react-dom - redux * [refactor] fix linting issues When I run `yarn lint` explicitly these were caught, but not doing a build proper. Apologies on that! * [chore] 📦️ package.json: like other examples * [refactor] +apollo-cache-inmemory, -apollo-cache-redux Separation of Apollo and Redux. 😄️ We could stand to use a few actual examples of Redux, though this is a good starting block. Some other code cleanup as well.
24 lines
1.5 KiB
JavaScript
24 lines
1.5 KiB
JavaScript
import App from '../components/App'
|
|
import Header from '../components/Header'
|
|
|
|
export default () => (
|
|
<App>
|
|
<Header />
|
|
<article>
|
|
<h1>The Idea Behind This Example</h1>
|
|
<p>
|
|
<a href='http://dev.apollodata.com'>Apollo</a> is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
|
|
</p>
|
|
<p>
|
|
In this simple example, we integrate Apollo seamlessly with <a href='https://github.com/zeit/next.js'>Next</a> by wrapping our pages inside a <a href='https://facebook.github.io/react/docs/higher-order-components.html'>higher-order component (HOC)</a>. Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
|
|
</p>
|
|
<p>
|
|
On initial page load, while on the server and inside getInitialProps, we invoke the Apollo method, <a href='http://dev.apollodata.com/react/server-side-rendering.html#getDataFromTree'>getDataFromTree</a>. This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
|
|
</p>
|
|
<p>
|
|
This example relies on <a href='http://graph.cool'>graph.cool</a> for its GraphQL backend.
|
|
</p>
|
|
</article>
|
|
</App>
|
|
)
|