123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import ApolloClient, { createNetworkInterface } from 'apollo-client';
- import { ApolloProvider, graphql } from 'react-apollo';
- const client = new ApolloClient({
- networkInterface: createNetworkInterface({
- uri: "http://localhost:3000/graphql"
- }),
- connectToDevTools: true
- });
- import gql from 'graphql-tag';
- const query = gql`
- {
- people {
- url
- homeworld
- height
- skin_color
- birth_year
- eye_color
- hair_color
- gender
- name
- mass
- }
- }
- `;
- const PeopleContainer = graphql(query);
- function Person({ url, gender, name, homeworld, height, mass, eye_color, hair_color, skin_color, }) {
- return (
- <div style={{ flex: '1 0 300px' }}>
- <div style={{
- border: '1px solid rgba(0,0, 0, 0.12)',
- padding: '24px'
- }}>
- <h1 style={{
- fontSize: '14px',
- margin: '8px 0'
- }}>{name} - {gender}</h1>
- <p>
- Height: {height}, Mass: {mass}, Skin: {skin_color}
- </p>
- <p>
- Eye color: {eye_color}, Hair: {hair_color}
- </p>
- <p>
- <a href={homeworld}>View homeworld</a>
- </p>
- <p>
- <a href={url}>View more</a>
- </p>
- </div>
- </div>
- );
- }
- let PeopleList = function PeopleList({ data }) {
- console.log(data);
- return (
- <div
- style={{
- maxWidth: '680px',
- margin: '0 auto'
- }}
- >
- <div
- style={{
- flexWrap: 'wrap',
- display: 'flex'
- }}
- >
- {
- data.loading
- ? (
- <p>People will be here soon</p>
- )
- : (
- data.people.map((person, index) => {
- return <Person key={index} {...person} />
- })
- )
- }
- </div>
- </div>
- );
- };
- PeopleList = PeopleContainer(PeopleList);
- import React, { Component } from 'react';
- import './App.css';
- class App extends Component {
- render() {
- return (
- <ApolloProvider client={client}>
- <div className="App">
- <div className="App-header">
- <img src="https://cdn-images-1.medium.com/fit/t/1600/480/1*sxMljQ8wgso4cG3PxufTmQ.png"
- className="App-logo"
- alt="Logo" />
- <h2>Your first GraphQL component</h2>
- </div>
- <PeopleList />
- </div>
- </ApolloProvider>
- );
- }
- }
- export default App;
|