UNPKG

1.16 kBMarkdownView Raw
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
4import * as React from 'react'
5import { render } from 'react-dom'
6
7import ApolloClient from 'apollo-client'
8import { HttpLink, InMemoryCache } from 'apollo-client-preset'
9import { ApolloProvider, graphql } from 'react-apollo'
10import gql from 'graphql-tag'
11
12// Apollo client
13const 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/
19const MOVIE_QUERY = gql`
20{
21 Movie(id: "cixos5gtq0ogi0126tvekxo27") {
22 id
23 title
24 actors {
25 name
26 }
27 }
28}
29`
30
31// Our App
32const 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
41const ApolloApp = (
42 <ApolloProvider client={client}>
43 <App />
44 </ApolloProvider>
45)
46
47render(ApolloApp, document.getElementById('root'))
48```