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
|
||||
|
||||
## Demo
|
||||
|
||||
https://next-with-apollo.now.sh
|
||||
|
||||
## 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
|
||||
```
|
||||
|
||||
Install it and run
|
||||
Install it and run:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
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
|
||||
now
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import gql from 'graphql-tag'
|
||||
import { graphql } from 'react-apollo'
|
||||
import { gql, graphql } from 'react-apollo'
|
||||
import PostUpvoter from './PostUpvoter'
|
||||
|
||||
const POSTS_PER_PAGE = 10
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react'
|
||||
import gql from 'graphql-tag'
|
||||
import { graphql } from 'react-apollo'
|
||||
import { gql, graphql } from 'react-apollo'
|
||||
|
||||
function PostUpvoter ({ upvote, votes, id }) {
|
||||
return (
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import gql from 'graphql-tag'
|
||||
import { graphql } from 'react-apollo'
|
||||
import { gql, graphql } from 'react-apollo'
|
||||
|
||||
function Submit ({ createPost }) {
|
||||
function handleSubmit (e) {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import ApolloClient, { createNetworkInterface } from 'apollo-client'
|
||||
import { ApolloClient, createNetworkInterface } from 'react-apollo'
|
||||
|
||||
let apolloClient = null
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
||||
import React from 'react'
|
||||
import 'isomorphic-fetch'
|
||||
import React from 'react'
|
||||
import { ApolloProvider, getDataFromTree } from 'react-apollo'
|
||||
import { initClient } from './initClient'
|
||||
import { initStore } from './initStore'
|
||||
|
||||
|
|
|
@ -1,22 +1,17 @@
|
|||
{
|
||||
"name": "with-apollo",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.1",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"apollo-client": "^0.7.3",
|
||||
"graphql": "^0.8.2",
|
||||
"graphql-tag": "^1.2.3",
|
||||
"graphql": "^0.9.1",
|
||||
"next": "^2.0.0-beta",
|
||||
"react": "^15.4.2",
|
||||
"react-apollo": "^0.8.1",
|
||||
"react-dom": "^15.4.2",
|
||||
"react-redux": "^5.0.2",
|
||||
"redux": "^3.6.0",
|
||||
"redux-thunk": "^2.1.0"
|
||||
"react-apollo": "^1.0.0-rc.2",
|
||||
"redux": "^3.6.0"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC"
|
||||
|
|
Loading…
Reference in a new issue