![GRAPHQL : TYPE ET SCHÉMA
type Query {
user(id: Int): User
}
type Mutation {
createUser(firstName: String!, lastName: String!): User!
}
type User {
id: Int!
firstName: String!
lastName: String!
posts: [Post]
}
type Post {
id: Int!
title: String!
}](https://image.slidesharecdn.com/tsgraphql-171011072452/85/Typescript-Graphql-3-12-320.jpg)
![GRAPHQL : QUERY
Ressemble très fortement à du JSON.
{
user(id: "10") {
id
firstName
posts {
title
}
}
}
{
"data": {
"user": {
"id": 1,
"firstName": "Felix",
"posts": [
{
"title": "Paris TypeScript #1 was awesome"
},
{
"title": "BestOfWeb rocks"
}
]
}
}
}](https://image.slidesharecdn.com/tsgraphql-171011072452/85/Typescript-Graphql-3-14-320.jpg)
Typescript + Graphql = <3
- 2. QUI SUIS-JE ? Développeur web orienté front-end chez Dcube. Blog dev web : shakedatcode.fr @felix_billon
- 3. SOMMAIRE 1. API Gateway Pattern 2. GraphQl 3. TypeScript dans tout ça ?
- 8. API GATEWAY PATTERN : AVANTAGES Moins d’aller-retour client/services. Simplification du code client. Centralisation des middlewares (authentification, logging, controle du traffic, ...). Le client doit connaitre un seul endpoint.
- 9. API GATEWAY PATTERN : DÉSAVANTAGES Ajout d'un nouveau composant. Doit être HAUTEMENT disponible. Doit connaître les endpoints des services.
- 10. GRAPHQL : EN BREF Spécification ! By Facebook. Open source depuis 2015. Grosse communauté. Beaucoup d'outils disponible : GraphiQL, GraphQL Voyager, GraphQL Docs, ...
- 11. GRAPHQL : EN BREF
- 12. GRAPHQL : TYPE ET SCHÉMA type Query { user(id: Int): User } type Mutation { createUser(firstName: String!, lastName: String!): User! } type User { id: Int! firstName: String! lastName: String! posts: [Post] } type Post { id: Int! title: String! }
- 13. GRAPHQL : RESOLVER export const resolvers = { Query: { user: (obj, args, context) => { return users.find((user) => user.id === args.id); } }, Mutation: { createUser: (root, args) => { const newUser = { id: users.length + 1, firstName, lastName } users.push(newUser); return newUser; } }, User: { posts(user) { t t filt (( t) > t i d Of( t id) ! 1)
- 14. GRAPHQL : QUERY Ressemble très fortement à du JSON. { user(id: "10") { id firstName posts { title } } } { "data": { "user": { "id": 1, "firstName": "Felix", "posts": [ { "title": "Paris TypeScript #1 was awesome" }, { "title": "BestOfWeb rocks" } ] } } }
- 15. GRAPHQL : DEEP DIVE Subscription : permet de cabler un système de PubSub. Dataloader : optimisation des requêtes. Introspection du graph.
- 16. GRAPHQL : CLIENT
- 17. TYPESCRIPT DANS TOUS ÇA ? Génération automatique des annotations de types à partir du schéma et des requêtes (apollo-codegen, gql2ts, ts2gql, ...) Language service (ts-graphql-plugin, graphql- language-service, ...)
- 18. DEMO TIME