1 | # Example
|
2 | > Use `create-react-app` then `yarn add apollo-client-preset react-apollo graphql` and replace below code for `index.js`
|
3 | ```js
|
4 | import * as React from 'react'
|
5 | import { render } from 'react-dom'
|
6 |
|
7 | import ApolloClient from 'apollo-client'
|
8 | import { HttpLink, InMemoryCache } from 'apollo-client-preset'
|
9 | import { ApolloProvider, graphql } from 'react-apollo'
|
10 | import gql from 'graphql-tag'
|
11 |
|
12 | // Apollo client
|
13 | const client = new ApolloClient({
|
14 | link: new HttpLink({ uri: 'https://api.graph.cool/simple/v1/cixos23120m0n0173veiiwrjr' }),
|
15 | cache: new InMemoryCache().restore({})
|
16 | })
|
17 |
|
18 | // Example query from https://www.graph.cool/
|
19 | const MOVIE_QUERY = gql`
|
20 | {
|
21 | Movie(id: "cixos5gtq0ogi0126tvekxo27") {
|
22 | id
|
23 | title
|
24 | actors {
|
25 | name
|
26 | }
|
27 | }
|
28 | }
|
29 | `
|
30 |
|
31 | // Our App
|
32 | const App = graphql(MOVIE_QUERY)(({ data }) => {
|
33 | const { loading, Movie } = data
|
34 | // Loading
|
35 | if (loading) return <div>loading...</div>
|
36 |
|
37 | // Loaded
|
38 | return <p><b>{Movie.title}</b> : {Movie.actors.map(({ name }) => name).join(', ')}</p>
|
39 | })
|
40 |
|
41 | const ApolloApp = (
|
42 | <ApolloProvider client={client}>
|
43 | <App />
|
44 | </ApolloProvider>
|
45 | )
|
46 |
|
47 | render(ApolloApp, document.getElementById('root'))
|
48 | ```
|