Last active
November 15, 2017 11:30
-
-
Save gregberge/fd59438291c1f6d11f1c0562753f4d1c to your computer and use it in GitHub Desktop.
Smooth Code - GraphQL Training - React bootstrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import gql from 'graphql-tag' | |
| import { graphql } from 'react-apollo' | |
| const QUERY = gql` | |
| query character { | |
| character(id: 1) { | |
| name | |
| films { | |
| id | |
| title | |
| } | |
| } | |
| } | |
| ` | |
| const App = ({ data }) => ( | |
| <div className="app"> | |
| <header> | |
| <h1>Star Wars React</h1> | |
| </header> | |
| <div> | |
| {data.character && ( | |
| <div> | |
| <h2>{data.character.name}</h2> | |
| {data.character.films.map(film => ( | |
| <div key={film.id}>{film.title}</div> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ) | |
| export default graphql(QUERY)(App) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <title>Star Wars App</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: sans-serif; | |
| } | |
| .app { | |
| text-align: center; | |
| } | |
| header { | |
| background-color: #222; | |
| padding: 20px; | |
| color: white; | |
| } | |
| h1 { | |
| font-size: 1.5em; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| import { ApolloClient } from 'apollo-client' | |
| import { HttpLink } from 'apollo-link-http' | |
| import { InMemoryCache } from 'apollo-cache-inmemory' | |
| import { ApolloProvider } from 'react-apollo' | |
| import App from './App' | |
| const client = new ApolloClient({ | |
| // Link define the way of fetching data | |
| link: new HttpLink({ uri: 'http://localhost:3000/graphql' }), | |
| // Cache defines the cache implementation to use | |
| cache: new InMemoryCache(), | |
| }) | |
| ReactDOM.render( | |
| <ApolloProvider client={client}> | |
| <App /> | |
| </ApolloProvider>, | |
| document.getElementById('root'), | |
| ) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment