Sr.No. | 平台和框架 |
1 |
Javascript
React、Angular、Vue、Meteor、Ember
|
2 |
WebComponents
聚合物,点燃阿波罗
|
3 |
Native Mobile
原生Android与Java,原生iOS与Swift
|
type Query
{
students:[Student]
}
type Student {
id:ID!
firstName:String
lastName:String
college:College
}
type College {
id:ID!
name:String
location:String
rating:float
}
const db = require('./db') const Query = { //resolver function for students returns list students:() => db.students.list(), } const Student = { college:(root) => { return db.colleges.get(root.collegeId); } } module.exports = {Query,Student}
{ students{ id firstName college{ name } } }
{ "data": { "students": [ { "id": "S1001", "firstName": "Mohtashim", "college": { "name": "CUSAT" } }, { "id": "S1002", "firstName": "Kannan", "college": { "name": "AMU" } }, { "id": "S1003", "firstName": "Kiran", "college": { "name": "AMU" } } ] } }
npx create-react-app hello-world-client
npm install apollo-boost graphql
{ 'apollo-cache': '^1.1.15', 'apollo-cache-inmemory': '^1.2.8', 'apollo-client': '^2.4.0', 'apollo-link': '^1.0.6', 'apollo-link-error': '^1.0.3', 'apollo-link-http': '^1.3.1', 'apollo-link-state': '^0.4.0', 'graphql-tag': '^2.4.2' }
import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost' const endPointUrl = 'http://localhost:9000/graphql' const client = new ApolloClient({ link: new HttpLink({uri:endPointUrl}), cache:new InMemoryCache() });
async function loadStudentsAsync() { const query = gql` { students{ id firstName lastName college{ name } } }` const {data} = await client.query({query}) ; return data.students; }
hello-world-client / -->node_modules -->public index.html -->src index.js -->package.json
import React, {Component} from 'react'; import ReactDOM from 'react-dom'; // apollo client import {ApolloClient, HttpLink, InMemoryCache} from 'apollo-boost' import gql from 'graphql-tag' const endPointUrl = 'http://localhost:9000/graphql' const client = new ApolloClient({ link: new HttpLink({uri:endPointUrl}), cache:new InMemoryCache() }); async function loadStudentsAsync() { const query = gql` { students{ id firstName lastName college{ name } } } ` const {data} = await client.query({query}) ; return data.students; } class App extends Component { constructor(props) { super(props); this.state = { students:[] } this.studentTemplate = []; } async loadStudents() { const studentData = await loadStudentsAsync(); this.setState({ students: studentData }) console.log("loadStudents") } render() { return( <div> <input type = "button" value = "loadStudents" onClick = {this.loadStudents.bind(this)}/> <div> <br/> <hr/> <table border = "3"> <thead> <tr> <td>First Name</td> <td>Last Name</td> <td>college Name</td> </tr> </thead> <tbody> { this.state.students.map(s => { return ( <tr key = {s.id}> <td> {s.firstName} </td> <td> {s.lastName} </td> <td> {s.college.name} </td> </tr> ) }) } </tbody> </table> </div> </div> ) } } ReactDOM.render(<App/>, document.getElementById('root'));