Télécharger pour lire hors ligne
![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/75/Typescript-Graphql-3-12-2048.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/75/Typescript-Graphql-3-14-2048.jpg)
Typescript + Graphql = <3
- 1.
- 2. QUI SUIS-JE ? Développeurweb orienté front-end chez Dcube. Blog dev web : shakedatcode.fr @felix_billon
- 3. SOMMAIRE 1. API GatewayPattern 2. GraphQl 3. TypeScript dans tout ça ?
- 4.
- 5.
- 6.
- 7.
- 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 : ENBREF Spécification ! By Facebook. Open source depuis 2015. Grosse communauté. Beaucoup d'outils disponible : GraphiQL, GraphQL Voyager, GraphQL Docs, ...
- 11. GRAPHQL : ENBREF
- 12. GRAPHQL : TYPEET 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 exportconst 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 Ressembletrè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 : DEEPDIVE Subscription : permet de cabler un système de PubSub. Dataloader : optimisation des requêtes. Introspection du graph.
- 16.
- 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.