Skip to content

Commit 02e697c

Browse files
jaydenserictimneutkens
authored andcommitted
Updated with-apollo example. (#1389)
- Deleted several unused dependencies. - Updated dependencies. - Simplified Apollo related imports thanks to react-apollo exporting apollo-client and graphql-tag since [v0.13.2](https://github.com/apollographql/react-apollo/blob/master/Changelog.md#0132). - Tidied the readme and added a link to the Apollo docs.
1 parent 3882271 commit 02e697c

File tree

7 files changed

+16
-21
lines changed

7 files changed

+16
-21
lines changed

examples/with-apollo/README.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Apollo Example
2+
23
## Demo
4+
35
https://next-with-apollo.now.sh
46

57
## How to use
@@ -11,21 +13,22 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2
1113
cd with-apollo
1214
```
1315

14-
Install it and run
16+
Install it and run:
1517

1618
```bash
1719
npm install
1820
npm run dev
1921
```
2022

21-
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
23+
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
2224

2325
```bash
2426
now
2527
```
2628

2729
## The idea behind the example
28-
Apollo 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.
30+
31+
[Apollo](http://dev.apollodata.com) 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.
2932

3033
In this simple example, we integrate Apollo seamlessly with Next by wrapping our *pages* inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). 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.
3134

examples/with-apollo/components/PostList.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import gql from 'graphql-tag'
2-
import { graphql } from 'react-apollo'
1+
import { gql, graphql } from 'react-apollo'
32
import PostUpvoter from './PostUpvoter'
43

54
const POSTS_PER_PAGE = 10

examples/with-apollo/components/PostUpvoter.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
2-
import gql from 'graphql-tag'
3-
import { graphql } from 'react-apollo'
2+
import { gql, graphql } from 'react-apollo'
43

54
function PostUpvoter ({ upvote, votes, id }) {
65
return (

examples/with-apollo/components/Submit.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import gql from 'graphql-tag'
2-
import { graphql } from 'react-apollo'
1+
import { gql, graphql } from 'react-apollo'
32

43
function Submit ({ createPost }) {
54
function handleSubmit (e) {

examples/with-apollo/lib/initClient.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import ApolloClient, { createNetworkInterface } from 'apollo-client'
1+
import { ApolloClient, createNetworkInterface } from 'react-apollo'
22

33
let apolloClient = null
44

examples/with-apollo/lib/withData.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { ApolloProvider, getDataFromTree } from 'react-apollo'
2-
import React from 'react'
31
import 'isomorphic-fetch'
2+
import React from 'react'
3+
import { ApolloProvider, getDataFromTree } from 'react-apollo'
44
import { initClient } from './initClient'
55
import { initStore } from './initStore'
66

examples/with-apollo/package.json

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
{
22
"name": "with-apollo",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"scripts": {
55
"dev": "next",
66
"build": "next build",
77
"start": "next start"
88
},
99
"dependencies": {
10-
"apollo-client": "^0.7.3",
11-
"graphql": "^0.8.2",
12-
"graphql-tag": "^1.2.3",
10+
"graphql": "^0.9.1",
1311
"next": "^2.0.0-beta",
1412
"react": "^15.4.2",
15-
"react-apollo": "^0.8.1",
16-
"react-dom": "^15.4.2",
17-
"react-redux": "^5.0.2",
18-
"redux": "^3.6.0",
19-
"redux-thunk": "^2.1.0"
13+
"react-apollo": "^1.0.0-rc.2",
14+
"redux": "^3.6.0"
2015
},
2116
"author": "",
2217
"license": "ISC"

0 commit comments

Comments
 (0)