{ restaurant (id: 6) { name, address }
{ "data": { "restaurant": { "name": "Sucre", "address": "Sucre 676" } } }
{ restaurant (id: 6) { name, address }
{ "data": { "restaurant": { "name": "Sucre", "address": "Sucre 676" } } }
{ restaurant (id: 6) { name, address }
{ "data": { "restaurant": { "name": "Sucre", "address": "Sucre 676" } } }
{ restaurant (id: 6) { name, address, phone }
{ "data": { "restaurant": { "name": "Sucre", "address": "Sucre 676", "phone": "1148315716" } } }
{ restaurant (id: 6) { name, address, phone, cuisines { name } } }
{ "data": { "restaurant": { "name": "Sucre", "address": "Sucre 676", "phone": "1148315716", "cuisines": [ { "name": "De autor" } ] } } }
{
restaurant (id: 6) {
name
}
}
{ restaurant (id: 6) { name, primary_photo } }
{ restaurant (id: 6) { name, primary_photo (version: SQUARE) } }
{ restaurant (id: 6) { name, primary_photo (version: SQUARE) { url } } }
{ restaurant (id: 6) { name, primary_photo (version: SQUARE) { url } } }
{ "data": { "restaurant": { "name": "Sucre", "primary_photo": { "url": "http://imagescdn.r..." } } } }
npm install --save graphql
new GraphQLSchema({ query: new GraphQLObjectType({ ... }), mutations: new GraphQLObjectType({ ... }), })
new GraphQLSchema({ query: new GraphQLObjectType({ ... }), mutations: new GraphQLObjectType({ ... }), })
new GraphQLSchema({ query: new GraphQLObjectType({ ... }), mutations: new GraphQLObjectType({ ... }), })
new GraphQLSchema({ query: new GraphQLObjectType({ ... }), mutations: new GraphQLObjectType({ ... }), })
{ }
{ name: 'Query', description: 'Root query' }
{ name: 'Query', description: 'Root query', fields: () => ({ }) }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { } }) }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { description: 'Restaurant representation', } }) }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { description: 'Restaurant representation', type: RestaurantType, } }) }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { description: 'Restaurant representation', type: RestaurantType, args: { id: { type: new GraphQLNonNull(GraphQLID) } } } }) }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { description: 'Restaurant representation', type: RestaurantType, args: { id: { type: new GraphQLNonNull(GraphQLID) } }, resolve: resolveFn } } }
{ name: 'Query', description: 'Root query', fields: () => ({ restaurant: { description: 'Restaurant representation', type: RestaurantType, args: { id: { type: new GraphQLNonNull(GraphQLID) } }, resolve: resolveFn } } }
npm install --save express-graphql
import express from 'express' import graphqlHTTP from 'express-graphql' import mySchema from '../schema' const app = express() app.use('/graphql', graphqlHTTP({ schema: mySchema, graphiql: true }))
import express from 'express' import graphqlHTTP from 'express-graphql' import mySchema from '../schema' const app = express() app.use('/graphql', graphqlHTTP({ schema: mySchema, graphiql: true }))
import express from 'express' import graphqlHTTP from 'express-graphql' import mySchema from '../schema' const app = express() app.use('/graphql', graphqlHTTP({ schema: mySchema, graphiql: true }))
import express from 'express' import graphqlHTTP from 'express-graphql' import mySchema from '../schema' const app = express() app.use('/graphql', graphqlHTTP({ schema: mySchema, graphiql: true }))
import express from 'express' import graphqlHTTP from 'express-graphql' import mySchema from '../schema' const app = express() app.use('/graphql', graphqlHTTP({ schema: mySchema, graphiql: true }))
POST /graphql HTTP/1.1 Content-Type: application/json { "query": "{ restaurant(id:6) { name, address, cuisines { name } } }" }
POST /graphql HTTP/1.1
Content-Type: application/json
{
"query": "{ restaurant(id:6) { name, address, cuisines { name } } }"
}
POST /graphql HTTP/1.1
Content-Type: application/json
{
"query": "{ restaurant(id:6) { name, address, cuisines { name } } }"
}
POST /graphql HTTP/1.1 Content-Type: application/json { "query": "{ restaurant(id:6) { name, address, cuisines { name } } }" }
<Header /> <Details> <Info /> <Photos /> <Badges /> </Details>
<Header /> <Details> <Info /> <Photos /> <Badges /> </Details>
{ restaurant (id: 6) { name, description, pictures, opening_hours, cuisine, ... } }
class Header extends React.Component { render () { return ( <h1>{this.props.restaurant.name}</h1> ) } }
const Header = props => ( <h1>{props.restaurant.name}</h1> )
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
const Header = props => ( <h1>{props.restaurant.name}</h1> ) export default Relay.createContainer(Header, { fragments: { restaurant: () => Relay.QL` fragment on Restaurant { name } ` } })
{ restaurant (id: 6) { name, description, pictures, opening_hours, cuisine, ... } }
fragment on Restaurant {
name
}
fragment on Restaurant {
description
}
fragment on Restaurant {
pictures
}
fragment on Restaurant {
opening_hours,
cuisine
}
fragment on Restaurant {
name
}
fragment on Restaurant {
description
}
fragment on Restaurant {
pictures
}
fragment on Restaurant {
opening_hours,
cuisine
}
<Header /> <Details> <Info /> <Photos /> <Badges /> </Details>
const Details = props => ( <div> <Info /> <Photos /> <Badges /> </div> )
export default Relay.createContainer(Details, {
fragments: {
restaurant: () => Relay.QL`
fragment on Restaurant {
${Info.getFragment('restaurant')},
${Photos.getFragment('restaurant')},
${Badges.getFragment('restaurant')},
}
`})
const Details = props => ( <div> <Info /> <Photos /> <Badges /> </div> )
export default Relay.createContainer(Details, {
fragments: {
restaurant: () => Relay.QL`
fragment on Restaurant {
${Info.getFragment('restaurant')},
${Photos.getFragment('restaurant')}, ${Badges.getFragment('restaurant')},
} `})