mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
5ebb943c84
* [example] with-apollo-and-redux-saga - Using Apollo to get GraphQL Data? Dope. - Using Redux Saga to do other stuff outside of that? Cool. - Nary the two shall meet? Most likely. 😀️ This is a breakout of #3463 where we were combining Apollo and Redux. This may not be an example that gets a PR. Why? Well, the examples are meant to pick and choose and combine yourself. At least I believe, and this is basically a combination of two examples (`with-apollo` and `with-redux-saga`) with some reworking. **pages/**: `index`: withReduxSaga() `about`: () `blog/index`: withReduxSaga(withApollo()) `blog/entry`: withApollo() * [refactor] fix lint (again), remove superfluous calls * [fix] package.json: with-apollo-and-redux-saga Updated the `name` and made sure `es6-promise` was in dependencies * [refactor] remove semi-colons in clock/sagas * [refactor] remove old migration code
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>
|
|
)
|