typescript + graphql =

Par Félix Billon

QUI SUIS-JE ?Développeur web orienté front-end chez Dcube.

Blog dev web : shakedatcode.fr

@felix_billon

SOMMAIRE1. API Gateway Pattern2. GraphQl3. TypeScript dans tout ça ?

MONOLITICS VS MICROSERVICES

MICROSERVICES : PROBLÈME...

API GATEWAY PATTERN

API GATEWAY PATTERN

API GATEWAY PATTERN : AVANTAGESMoins d’aller-retour client/services.Simplification du code client.Centralisation des middlewares (authentification,logging, controle du traffic, ...).Le client doit connaitre un seul endpoint.

API GATEWAY PATTERN :DÉSAVANTAGES

Ajout d'un nouveau composant.Doit être HAUTEMENT disponible.Doit connaître les endpoints des services.

GRAPHQL : EN BREFSpécification !By Facebook.Open source depuis 2015.Grosse communauté.Beaucoup d'outils disponible : GraphiQL, GraphQLVoyager, GraphQL Docs, ...

GRAPHQL : EN BREF

GRAPHQL : TYPE ET SCHÉMAtype 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!}

GRAPHQL : RESOLVERexport 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)

GRAPHQL : QUERYRessemble 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" } ] } }}

GRAPHQL : DEEP DIVESubscription : permet de cabler un système dePubSub.Dataloader : optimisation des requêtes.Introspection du graph.

GRAPHQL : CLIENT

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, ...)

DEMO TIME