mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
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.
This commit is contained in:
parent
38822717a9
commit
02e697cb0d
|
@ -1,5 +1,7 @@
|
||||||
# Apollo Example
|
# Apollo Example
|
||||||
|
|
||||||
## Demo
|
## Demo
|
||||||
|
|
||||||
https://next-with-apollo.now.sh
|
https://next-with-apollo.now.sh
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
@ -11,21 +13,22 @@ curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2
|
||||||
cd with-apollo
|
cd with-apollo
|
||||||
```
|
```
|
||||||
|
|
||||||
Install it and run
|
Install it and run:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm install
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
```
|
```
|
||||||
|
|
||||||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
|
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
now
|
now
|
||||||
```
|
```
|
||||||
|
|
||||||
## The idea behind the example
|
## The idea behind the example
|
||||||
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.
|
|
||||||
|
[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.
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import gql from 'graphql-tag'
|
import { gql, graphql } from 'react-apollo'
|
||||||
import { graphql } from 'react-apollo'
|
|
||||||
import PostUpvoter from './PostUpvoter'
|
import PostUpvoter from './PostUpvoter'
|
||||||
|
|
||||||
const POSTS_PER_PAGE = 10
|
const POSTS_PER_PAGE = 10
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import gql from 'graphql-tag'
|
import { gql, graphql } from 'react-apollo'
|
||||||
import { graphql } from 'react-apollo'
|
|
||||||
|
|
||||||
function PostUpvoter ({ upvote, votes, id }) {
|
function PostUpvoter ({ upvote, votes, id }) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import gql from 'graphql-tag'
|
import { gql, graphql } from 'react-apollo'
|
||||||
import { graphql } from 'react-apollo'
|
|
||||||
|
|
||||||
function Submit ({ createPost }) {
|
function Submit ({ createPost }) {
|
||||||
function handleSubmit (e) {
|
function handleSubmit (e) {
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import ApolloClient, { createNetworkInterface } from 'apollo-client'
|
import { ApolloClient, createNetworkInterface } from 'react-apollo'
|
||||||
|
|
||||||
let apolloClient = null
|
let apolloClient = null
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
|
||||||
import React from 'react'
|
|
||||||
import 'isomorphic-fetch'
|
import 'isomorphic-fetch'
|
||||||
|
import React from 'react'
|
||||||
|
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
||||||
import { initClient } from './initClient'
|
import { initClient } from './initClient'
|
||||||
import { initStore } from './initStore'
|
import { initStore } from './initStore'
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,17 @@
|
||||||
{
|
{
|
||||||
"name": "with-apollo",
|
"name": "with-apollo",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next",
|
"dev": "next",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start"
|
"start": "next start"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apollo-client": "^0.7.3",
|
"graphql": "^0.9.1",
|
||||||
"graphql": "^0.8.2",
|
|
||||||
"graphql-tag": "^1.2.3",
|
|
||||||
"next": "^2.0.0-beta",
|
"next": "^2.0.0-beta",
|
||||||
"react": "^15.4.2",
|
"react": "^15.4.2",
|
||||||
"react-apollo": "^0.8.1",
|
"react-apollo": "^1.0.0-rc.2",
|
||||||
"react-dom": "^15.4.2",
|
"redux": "^3.6.0"
|
||||||
"react-redux": "^5.0.2",
|
|
||||||
"redux": "^3.6.0",
|
|
||||||
"redux-thunk": "^2.1.0"
|
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC"
|
"license": "ISC"
|
||||||
|
|
Loading…
Reference in a new issue