 I'm Carlos, I'm a software consultant. I'm the GraphQL Hong Kong organizer. And also I'm trying to push forward the GraphQL community here in Singapore. Yesterday we've got the second meetup and the second speaker is gonna be Thor from the Strap and he's also an organizer. So really check it out, GraphQL is exploding and it's gonna be super interesting here in Singapore. And also I've created a space with GraphQL API that is gonna be the resources that we are gonna use today in order to the live code demo. And you can find me at SW Carlos R.J. in the internet, get up, Twitter, link it in everywhere. I gotta run, I gotta go super fast today because in 10 p.m. I gotta fly. I got the international flight so hopefully I'm not gonna miss it. Let's try it. So I'm gonna go super fast. Then if you have any question, please let me know on Twitter or in my email or in get up. I'm super happy to discuss anything about GraphQL. So I have just a quick question like how many of you guys know what is GraphQL? How many of you are you working with GraphQL? How many of you are you working in production with GraphQL? Probably same? In production? Yeah. Okay, oh that's pretty nice. Okay, cool. So then I'm gonna go even faster. Awesome. So for today we are gonna see how and why GraphQL was that good with JavaScript and we are gonna do a full life coding demo, getting a GraphQL server with JavaScript above into JavaScript and do the same with the clients or react app with a GraphQL in JavaScript and then above into JavaScript and see the benefits. So before I'm gonna skip the job, sorry. So, okay, let's do one job. So, okay, cool. I was joking already. Yeah. What did the developers say to the repository? Anyone? Any clue? You cannot say. No? I'm pretty sure that you have said this to your friends a lot. So they say for you. Cool. Okay, so I'm gonna start then GraphQL and JavaScript. We probably know that GraphQL is good for overfetching, underfetching, a type system, the introspectability and so on. If you don't know what is TypeScript, TypeScript is a TypeScript of JavaScript that basically types in our front-end sites or in our back-end sites. If we are using JavaScript, for example, we know. Then we have, together, TypeScript and GraphQL, both of them, they start and end with JavaScript. They are like strong toolings for large application. TypeScript is back for a Microsoft, so you are fine with TypeScript nowadays. And then I like to call it a state of alpha or JavaScript. Every single week, we've got new features and they are incredible. So we would like to introspect our API with GraphQL, but also we want to introspect our database with TypeScript. So we do know that TypeScript has a type system and there should be some images, but there are no. So we want, okay, we'll get. So TypeScript is basically a type, a strongly type system and that's good because we are gonna have a type and introspectable contract between our server and our client. And GraphQL specification is introspectable, so we are gonna be able to see all the fields available in our API. So we are passing from having an incredible type APIs where our GraphQL schema is gonna be our single sort of truth and we want to extend our types to both to our backing and to our front-end size. Even we can start from the database and extend all these types through our application because we want to achieve this paradise, the end-to-end type-safe applications. So we are gonna be using the type generators called GraphQL Code Jam. It's an open source tooling created by the Kiehl and basically we are gonna alternate types based on our GraphQL implementation for both back-end and front-end. So we are gonna start with the live coding. We're gonna first explore the code base, get a GraphQL server with TypeScript and do the same with the client. So we are gonna be using the space as GraphQL API so you can just feel free to check it out. All the code base is open source and you can see both how I implemented the space as GraphQL API. So we're gonna have a Mongo database and then I created a GraphQL service and then also the client with React and TypeScript. So, okay, cool. So now we're gonna open my ID and we are gonna go to the server side. I'm gonna just show you guys the code base. So we're gonna have an index and that index is gonna contain two servers. So that's why I've got two APIs of my GraphQL and my REST. And even if you wanna check the REST API, it's just 34 lines of code. So I'm using this in pretty open source library called SOFA API that is using open API by default. I'm gonna expose my type GraphQL schema from there. I'm gonna auto generate a fully type and follow the comment that REST API from my GraphQL schema, which is incredible in order to expose the documentation using just swagger. So also from GraphQL, you can go to REST API which is just a blow money. So then we are gonna have some kind of like utils on filter where they're gonna be like to find limiting offset between sorting and ordering. And we are gonna have types and we don't have like any types yet just we have just the context here. And then we can see the GraphQL server. So basically we can see here that we are gonna be using a pull server and we just have to pass the schema and the context. And then we are gonna check the context that is gonna contain the database. Basically, as I've said you before guys that we are gonna have this public spaces model database with a lot of the real data. And even if you wanna check it out, you can just like, you know, just go to a model that big client and just put this URL and you can just check all the info. So now let's go to the most important thing in GraphQL which is gonna be our GraphQL schema. So if we open the schema and we see how we have a structure our schema, there is just extra by domain. So let's say that we're gonna have several collection and several database tables in our database called capsules and probably we're gonna have histories and we're gonna have launches and we're gonna have missions and also we're gonna have rockets. So if we go to the rockets we are gonna have type def and resolvers as for example, in our sieve. So now we are gonna open the type def and resolvers and even if you don't know anything about GraphQL type of script or JavaScript you are gonna be able to see that we are defining some query entry points. So GraphQL is based in query, mutation subscriptions, queries is to fetch data, mutation is to mutate data and subscript is to subscript data. So in this case we are gonna just fetch data. So let's say that we are in dress so in dress probably what we are gonna have if we want to fetch the rockets we're gonna have a slash rockets, right? And if we want to get just a one single rocket by ID probably we are gonna have something like this. So in GraphQL the representation in this way of creating GraphQL servers with SDL and schema first with a pull server that's what we are gonna do. And here like we have to tell these query entry point field that we have to pass as required at ID because we have to get this idea in order to go to the database and get the data. So also what is important for GraphQL is every single field that we are supposing to our API is type and that means that we are gonna have such a useful information and then we can see here that when we are asking for rockets we are gonna get an array of type rockets and that rocket is gonna contain several type where there are a GraphQL primitive types or also complex types of for example rocket field stage that is gonna contain other like GraphQL primitive types or complex types. So okay, we cool here and then we are gonna see how we are gonna return the data. So if we have declared like two query entry point field that there are gonna be rockets and rockets here in our resolver we are gonna resolve those query entry point fields. So let's say that we are asking for the rockets so this is what we are gonna return. So if I return an array node that's like I'm gonna get in there when I hit in the API. So you can see here I get into the database from the context I'm going to the rockets collection I'm gonna do some findings sort of skipping a limit M and then I'm gonna convert it to an array and I'm gonna return that data and we are gonna do the same with the rockets we are gonna receive the ID that is required for my second argument in the function and then we are gonna find body D and we are gonna destroy it to the first array. Okay, so we cool here so I'm gonna go to the server and we are gonna just start it and we are gonna see how GraphQL looks like. Let's hope that everything is gonna work. This is the life cutting things okay it's working so now we are gonna open this and this is GraphQL so even if I started to more in a new company and they have the API in GraphQL I'm gonna just open bracket and then I'm gonna just introspect my API so let's say that I'm gonna just represent the rockets so I'm gonna get ID from the rockets, the name and let's say the calls per launch and even I can create an alias so I don't have to pass for commit case to SNAT case as we can see here so that's pretty awesome. Then if I wanna get a rocket so we can just get the ID which is Falcon Heavy and then I can introspect my arguments and then I'm gonna get a just one single rocket. So we'll get here and now what we are gonna do is like what we do what we are usually doing in our companies is we are gonna evolve our API so we are gonna add a new field to our API so I'm gonna just go to this in query what this is called essentially in order to check my pull request and there is a pull request called add rocket by net query field so I'm gonna check out the branch I gonna see the diff which is here and we are gonna see that we've got a new query entry point called rocket by name which is gonna have a require input field which is gonna be the names it's gonna be the string and we're gonna return our rockets so it's kind of the same the rocket by ID but just rocket by name and also we can check here that we have changed ID from our case to the uppercase. So now what I'm gonna do here if I go back to my type depth and then we can just check the type definition we are gonna see the new evolution for my API so we can see the new rocket by name and I gonna start again my server so everything looks good I don't have any error and now hopefully the server is gonna start it started and now I gonna do the same I gonna go to the history I gonna check that the rockets are working so I gonna hit the rockets and then I gonna go to my rockets what is happening here that at first like GraphQL is telling me that I have an error because we have already declared that it's gonna be uppercase so I can just introspect and I gonna have the ID and now what I'm hitting play I getting a new but I know that this input data is in my database so what is going on here? So first this is a common problem that we have always ensued above we don't want to expose our API to the rest of the world when we are having an inconsistent state of our API so basically what is happening here as we have changed this argument when we go to our resolvers this idea is not ideal our case name is uppercase and we are supposing let's say if we are Facebook we are supposing this API that it looks like it's fine or code base but there are like million people and the millions of people per second and they are getting new and this is gonna break a lot of not just applications but also companies so we have the tooling in order to avoid this problem so what I gonna do right now is I gonna auto generate the type of script type based in my GraphQL schema and I gonna type my resolvers so if we can see here now in the diff we are gonna get all the types so we can see that there are like more than 5,000 lines of types and we want them even if you don't like types but your city tells you that you gonna type either backing or different side you want to type all the types that you wanna use are those that you don't have to write you want to auto generate them from your single source truth and then type your code base so basically what we are gonna do right now is I gonna just type my resolvers resolvers.resolvers and I gonna get in runtime an error that this ID is not ID level case anymore so now if I run my server again I gonna get a runtime error and I'm not gonna suppose an inconsistent state of my application so let's say that I don't know what is this I have an error so I gonna just introspect and I gonna just get this data and also we can go further let's say that I join a company like tomorrow and I don't have any idea what is GraphQL what is tab script but someone just told me that I have to implement the business logic for my rocket by name so I just gonna do control space I gonna look for rocket by name oh I've got it here this is gonna be an assume function that is gonna have that is gonna return something like here and we are gonna also introspect all the arguments because we have already declared this information in our GraphQL schema and then also we can introspect our context so we are gonna get the database and we are gonna find bad ID we are gonna find by name sorry and now when I'm saving this if I'm not having any single completion runtime error in my ID I know that the API is gonna work and it's gonna return the data that I'm looking for so now we are gonna restart server again and we are gonna just check that if we go to the rockets the rockets are working we go to the rocket by ID before it was not working now we are gonna get the data and now if we can just check Falcon heavy by name even if we can just get more data name or case it's rocket by name and then we are gonna get all the data as we have requested what time is it? I have 10 minutes so this is the server side so now we are gonna go quickly to the client side and a okay cool so now let me just go back to the initial step of the app so here we get and now we are gonna go to the front end side we go to the front end side we are gonna do kind of the same so we are gonna check the client in the client we are gonna have just two files so the index and the app so let's go first to the index so we are gonna have a Apollo provider we have to pass the client instant that we are gonna be using Apollo client for Apollo Boost and then we are gonna use also suspense and we are gonna have the app that is being lazy loading for or read or lazy and then if we check our app basically if you do not probably read this is our GSX and we don't know where is this data coming from but we can see all the information that we are displaying so we are gonna display a mission name a rocket name and details and an image and I'm gonna just go to the client here and just to start and then I'm gonna do it here same so we are gonna see the app and then we are gonna let's check that first so these are gonna be our front end side so as I already told you we are gonna have the mission name, the rocket name, the description and one image I don't know if you guys if you like SpaceX but for me it's like super like crazy stuff what they are doing but okay cool let's go back to the idea awesome so as you know we can just like introspeed our API from GraphQL we don't have to go to the computation at all and then we are gonna just like this is our query, a GraphQL query and then we are gonna just pass this query to use query from a forwarded Higgs in order to get the data, the loading and the stereo a state of my API code so probably we know this you don't know it's pretty nice but we can even do much better I'm gonna do everything for okay so I'm gonna just show you guys that if I change this everything looks good you don't have any error but probably the rocket is not the fight it's gonna be undefined so if you try to access the name of undefined you are gonna of course you are gonna break the UI right so we're gonna have an error we don't have we have we want to always avoid this okay so I'm gonna go just like go through the solution first what I'm gonna do is I'm gonna activate the Apollo GraphQL visual for extension that is gonna allow me to introspec my API from my ID so I don't have to leave visual code never which is awesome so basically we are gonna have a Apollo.conf.js we gonna pass our GraphQL production ready API URL in order to load all our types so we can see here how we are gonna load all the data and now also what I'm gonna do is how to generate all my types from my GraphQL documents let's say I'm gonna have to generate all these types so my return data in this case data is any but now we are gonna type and we are gonna get data because we don't know what we are asking for and even like we don't know that it's an ID this is a string and this is an array of strings cool so I'm gonna do the same GERN, GPO, YAM and we are gonna do the same so we can see here the diff and we are gonna get all the types regarding my GraphQL query in all my front end so we can see the types in this case it are gonna be like 500 types and we can see here the launches that we are requesting the ID, the mission name, the links, the detail, the links on the rocket and the subtypes cool so we are gonna put here but the same we want to evolve our API and we want to provide the best developer experience best one to our front end developer whether they are senior or they are junior so now let's say that I wanna build my client so what I'm gonna do right now is that press control space and I'm gonna have all my fields available in my API so let's say that I have to represent the sips even GraphQL know that sips is a complex type so it's gonna require me to just get the ID, the name, the home port, even I can put an alias here in order to don't do the parse in the client and an image so now when I send this I'm gonna auto generate the types for my new evolution of my client so we can see here the new types and we can see that we have added the sips with all this information so that means that now to finish this talk if I type my return data that is gonna be get launches.query I'm gonna save this and we can see the data this already type and we have all the information if I wanna just evolve it I just have to go to my return function on my map just click control space I'm gonna have my sips and then I just gonna iterate them so I'm gonna do sips.a I'm gonna just do a filter and just do a boolean to remove some new fields and then I just gonna map it and we can do the same here so let's say that this is gonna be kind of like a diff and we are gonna have here and it's three so the point as we see if it's a complex type we do not the information that we are getting so we can also introspect our map inside of our sips and we're gonna get the ID we are gonna get the name we are gonna get the port with the alias and we are gonna get the image so now it's super easy just to display this information so we can just like do both and get a beautiful both here and then just put the name here and then I just gonna put the image and that's it because I don't have time so image and then this is gonna be the image and then we can just go to and just put it up 100 width and we can just even like port for some reason it's not here probably because I've done home and it's pretty cool because probably I have this mistake but I didn't like realizing in my front so now I can just come here the control space go to the top and check which are available so now if I put home it does not gonna be error and if that means I don't have any error in my front and side now when I go back to my client side we can see here the mission name the rocket name the description, the rocket image and also all my shapes where the rocket they are gonna land and we can see how everything it was already done so that's all for me you've got all the slides there I'm gonna send the slides to the meta organizer and then you can check it out if you want it and please like reach me on Twitter if you have any questions because I will be super happy to answer them so thanks so much and enjoy the night