En este taller práctico construiremos un backend sencillo de GraphQL utilizando GraphQL Yoga, un servidor open source para GraphQL. Nota: Los participantes requieren traer una computadora con cierto software preinstalado y estudiar previamente cierta teoría básica sobre GraphQL — https://github.com/Ikana/dataday-gql Por Rodrigo Quezada

1. Real time data
with GraphQL
Rodrigo Quezada
@rodikana

3. Lo que vamos a hacer hoy

4. Graph Query Language

6. Query
query {
user(id: "abc") {
id
name
}
}

7. type User {
id: ID!
name: String
}
Schema
type Query {
user(id: ID!): User
}

8. Schema
const UserType = new GraphQLObjectType({
name: 'User',
fields: {
id: { type: GraphQLID },
name: { type: GraphQLString }
}
})
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
user: {
type: UserType,
args: {
id: { type: GraphQLID }
}
}
}
})
})

9. Schema
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'Query',
fields: {
user: {
type: UserType,
args: {
id: { type: GraphQLID }
},
resolve: (root, args, context, info) => {
const { id } = args // the `id` argument for this field is declared above
return fetchUserById(id) // hit the database
}
}
}
})
})

10. Schema
const UserType = new GraphQLObjectType({
name: 'User',
fields: {
id: {
type: GraphQLID,
resolve: (root, args, context, info) => {
return root.id
}
},
name: {
type: GraphQLString,
resolve: (root, args, context, info) => {
return root.name
}
}
}
})

12. query {
user(id: "abc") {
name
article(title: "GraphQL is great") {
comments {
text
writtenBy {
name
}
}
}
}
}

13. https://www.youtube.com/
watch?v=OQTnXNCDywA
DataLoader

14. const { makeExecutableSchema } = require('graphql-tools')
const typeDefs = `
type Query {
user(id: ID!): User
}
type User {
id: ID!
name: String
}`
const resolvers = {
Query: {
user: (root, args, context, info) => {
return fetchUserById(args.id)
}
},
}
const schema = makeExecutableSchema({
typeDefs,
resolvers
})

15. GraphQL Yoga

16. graphql-subscriptions

17. front-end

20. Preguntas

21. Gracias!

22. chat.javascriptmx.com