type Thumbnail {
# ͼƬµÄURL£¬!±íʾ±ØÐè
uri: String!

# ¿í¶È£¨ÏñËØ£©
width: Int

# ¸ß¶È£¨ÏñËØ£©
height: Int

# ×÷ΪͼƬtitle±êÇ©µÄ×Ö·û´®
title: String
}

type Address {
street: String
city: String
state: String
zip: String
country: String
}

type Person {
# Ãû
fname: String!

# ÐÕ
lname: String

# ÄêÁä
age: Int

# µØÖ·Áбí
addresses: [Address]
}

query {
person(id: 123) {
id
friends {
id
addresses: {
street
city
state
zip
}
}
}
}

input Person {
# Ãû
fname: String!

# ÐÕ
lname: String

# ÄêÁä
age: Int
}

const { GraphQLScalarType } = require('graphql')
const { Kind } = require('graphql/language')

exports.Date = new GraphQLScalarType({
name: 'Date',
description: 'Date custom scalar type',
parseValue (value) {
return new Date(value) // À´×Ô¿Í»§¶ËµÄÖµ
},
serialize (value) {
if (typeof value === 'object') {
return value.getTime() // ·¢Ë͸ø¿Í»§¶ËµÄÖµ
}
return value
},
parseLiteral (ast) {
if (ast.kind === Kind.INT) {
return parseInt(ast.value, 10) // ast value is always in string format
}
return null
}
})

{
"query": "query tag($id:ID) { tag(id:$id) { id title }}",
"variables": {
"id": "6d726d65-fb99-4fa7-9463-b79bad7f16a7"
}
}

type Person {
# personµÄÄÚ²¿£¬±ØÐè
id: ID!

# Ãû£¬±ØÐè
firstName: String!

# ÐÕ£¬±ØÐè
lastName: String!

# ÄêÁä
age: Int

# personµÄµç»°ºÅÂë
phone: String

# µç»°ºÅÂëÊÇ·ñÊÖ»úºÅ
isMobile: Boolean

# personµÄºÃÓÑ
bestFriend: Person
}

input PersonInput {
# personµÄÄÚ²¿ID
id: ID

# Ãû£¬±ØÐè
firstName: String!

# ÐÕ£¬±ØÐè
lastName: String!

# ÄêÁä
age: Int

# personµÄµç»°ºÅÂë
phone: String

# µç»°ºÅÂëÊÇ·ñÊÖ»úºÅ
isMobile: Boolean

# personµÄºÃÓѵÄID
bestFriend: ID
}

type Query {
# ͨ¹ýid»ñÈ¡µ¥¶ÀµÄPerson
person (id: ID): Person

# »ñÈ¡ËùÓеÄPerson
people: [Person!]!
}

type Mutation {
# ´´½¨»ò¸üÐÂÒ»¸öPerson
person (input: PersonInput): Person
}

schema {
query: Query
mutation: Mutation
}

// ½«¾Íһϣ¬ÓÃÄÚ´æÀïµÄÊý×é×÷ΪÊý¾Ý¿â
const people = [ ];
const resolvers = {
Query: {
// »ñÈ¡Ò»¸öperson
person (_, { id }) {
return people[id];
},
// »ñÈ¡ËùÓеÄperson
people () {
return people;
}
},
Mutation: {
person (_, { input }) {
// Èç¹û¸ÃpersonÒÑ´æÔÚÔò½øÐиüÐÂ
if (input.id in people) {
people[input.id] = input;
return input;
}
// ĬÈÏÌí¼Ó£¨»ò´´½¨£©¸Ãperson
// ½«idÉèΪ¼Ç¼µÄË÷Òý
input.id = people.length
people.push(input)
return input
},
},
Person: {
// ½«ºÃÓÑId½âÎö³ÉÒ»Ìõperson¼Ç¼
bestFriend (person) {
return people[person.bestFriend];
}
}
};

module.exports = resolvers;

const fs = require('fs');
const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');
const { graphqlExpress, graphiqlExpress } = require('graphql-server-express');
const { makeExecutableSchema } = require('graphql-tools');
const typeDefs = fs.readFileSync(path.join(__dirname, './schema.gql'), 'utf8')
const resolvers = require('./resolvers');

const myGraphQLSchema = makeExecutableSchema({
typeDefs,
resolvers
});

var app = express();

// POSTÐèÒªÓõ½bodyParser
app.use('/graphql',
bodyParser.json(),
graphqlExpress({ schema: myGraphQLSchema })
);

app.use('/graphiql',
graphiqlExpress({ endpointUrl: '/graphql'})
);

app.listen(3000);

import { ApolloClient, ApolloProvider } from 'react-apollo';

// ´´½¨Ò»¸öÉÏÃæÌáµ½µÄ¿Í»§¶Ë
const client = new ApolloClient();

ReactDOM.render(
<ApolloProvider client={client}>
<MyAppComponent />
</ApolloProvider>,
document.getElementById('root')
)

import React from 'react'
import { gql, graphql } from 'react-apollo'

function Person ({ data: { person = {} } }) {
return (
<PersonView data={person} />
);
}

const query = gql`
query person($id: ID) {
person(id: $id) {
id
firstName
lastName
age
phone
isMobile
bestFriend {
id
firstName
}
}
}
`;

export default graphql(query, {
options: () => ({
variables: {
id: 10 // Äã¿ÉÄÜ»áʹÓÃURL²ÎÊý¶ø·ÇÓ²±àÂë
}
})
})(Person);

import React from 'react'
import { gql, graphql, compose } from 'react-apollo'

function Person ({ submit, data: { person = {} } }) {
return (
<PersonView data={person} submit={submit} />
);
}

const query = gql`
¡­ omitted ¡­
`;

const update = gql`
mutation person($input: PersonInput) {
person(input: $input) {
id
firstName
lastName
age
phone
isMobile
bestFriend {
id
firstName
}
}
}
`;

export default compose(
graphql(query, {
options: () => ({
variables: {
id: 10 // Äã¿ÉÄÜ»áʹÓÃURL²ÎÊý¶ø·ÇÓ²±àÂë
}
})
}),
graphql(update, {
props: ({ mutate }) => ({
submit: (input) = mutate({ variables: { input } })
})
})
)(Person);

props.submit({
firstName: ¡°Neil¡±,
lastName: ¡°Armstrong¡±,
¡­
isMobile: true
})

import React from 'react'
import { gql, graphql } from 'react-apollo'

function People ({ data: { loading, people = [] } }) {
// µ±»¹ÔÚ´ÓGraphQL»ñÈ¡Êý¾Ýʱ£¬Apollo½«ÉèÖÃloading = true
if (loading) return <Spinner />

return (
<table className='table table-hover table-striped'>
<tbody>
{people.map((person, i) =>
<tr key={i}>
<td>{person.firstName}</td>
<td>{person.lastName}</td>
<td>{person.age}</td>
<td>{person.phone}</td>
<td>{person.isMobile}</td>
<td>{person.bestFriend && person.bestFriend.firstName}</td>
</tr>
)}
</tbody>
</table>
);
}

const query = gql`
query people {
people {
id
firstName
lastName
age
phone
isMobile
bestFriend {
id
firstName
}
}
}
`;

export default graphql(query)(People);