 Beginning of the last year, 2019, I've created the SpaceX GraphQL API, and you can find me on atswcarlosrga, like everywhere in Twitter, a LinkedIn, GitHub, Medium, they've called everywhere. The agenda for today is gonna be like, everything is gonna be full life-cutting. So we have seen already the benefits of GraphQL, I'm gonna be talking also a bit about it, and then we are gonna have a quick introduction about why GraphQL makes a lot of sense with TypeScript, and then we are gonna just switch to the IDE and have a GraphQL, a production-ready GraphQL server with Apollo and JavaScript. We are gonna both be TypeScript and see the benefits and how we can do that, and then we are gonna do the same with the client. So we are gonna have a read-up in JavaScript, and then we are gonna see how we can fetch data and represent data, and we are gonna both be to TypeScript and see the benefits. So to start with, I like to do some jokes. So if you like like dev jokes, that you've got github.com, slash Shruti Kapoor dev joke, I'm gonna put the slide in the meetup group, so after that you can feel free to check it out, but Shruti is a software engineer in PayPal, based in SF. I think she's originally from India, and she created this like, I don't know, thousand of the jobs, so they're pretty cool. So the first one is like, how do you come for a JavaScript bug? Anyone know of it? Any guess? What? You can sell it. What is the program's favorite HANA play? Is the meeting room? Probably not. What do you think, guys? Can solve? No. This is difficult, but it's like, full bar. And the last one, we can just go through to the total. So what is the developer's say to the repository? And I'm pretty sure that you have said this to a lot of you, like friends. Are you committed? I'm committed, just to submit it, just to submit it. But now, in this case, it's fork you. Okay, cool. So guys, first, like, briefly, like summary of the benefits of GraphQL, we have overfetching, is fetch, overfetching, the problem is like you are, usually you fetch more data that you really needed. So in GraphQL, you can just specify which field you want it. So you have, let's say, a mobile client, a table client, or a desktop client, and an email-legal wearable client. In the wearable, probably you want to fetch two fields, in the mobile, like five, in the tablet, like 10, and in the desktop, like all of them. So with REST, you are fetching all the payload that, you know, as we are front-end and back-end developer, we know this problem. So that's one benefit of GraphQL. Then we have overfetching, underfetching, which is that you are gonna be able to fetch Nester resources, and then you are gonna process all the data in the server side, and then you are gonna, just in one run-through HTTP code, you are gonna get the data back. So let's say that we have, in the SpaceX, we are gonna have histories, and the history, they are gonna have launches, and those launches, they are gonna have rockets, and those rockets, they are gonna have ships. So probably in REST, you are gonna do, you are gonna hit the history endpoint, and you are gonna get 10 results. And then for every single then, you are gonna do another HTTP run-through code to get the launch. And then for every single one, you are gonna get an HTTP code to do a rocket, and then the ship. So that's a lot of HTTP codes, and the problem is, we have mobile phones. Probably you are driving, or you are in an area where the connection is not that good, so just one run-through protocol is lost. You gotta wait, or you gotta wait for that, and that takes a lot of effort, right? So basically what you are gonna do in GraphQL, is you are gonna send a smart query to your data sources, and you are gonna present all the data in here, in your device, so everything is super fast, and whenever the information is ready, you are gonna send it back in one single HTTP request. Then we've got a strong type system. For me, it's like the best feature of GraphQL. We are passing, okay, how many of you have you wore just at least one day in the backend site? Almost all of you guys, probably, right? Do you use types in your backend sites? Of course, we use types. Now, in the front-end site, do we use type in the front-end site? Of course not, and I think it's super important, and we are putting a lot of logic, business logic, like client logic, even like interconnection to all the devices in our front-end. We are not typing, and I think that's a really good problem. So the good thing from GraphQL is if you wanna communicate from your server side to your client side, you are gonna have this type and introspectable contract, because you can have a type, but if you are not gonna be able to introspect it, you cannot do anything with those types. So nice that you are gonna be able to have a strongly typed schema in your GraphQL APIs, and also you are gonna be able to introspect it, and we're gonna see the infinite possibilities that we've got with that stuff. And then there are a lot of benefits, but we don't have time today to say it. So GraphQL and TypeScript, if you probably know TypeScript, it's a TypeScript or JavaScript, but you can use like a reason, if you can use flow, you can use like if you are using other languages, it's basically type in the front-end. And also in the back-end, of course. Then TypeScript and GraphQL, both of them are in TypeScript. They're already using large companies. So even like if you reach out the community, you go to the GitHub and TypeScript, like a lot of people from Microsoft working on it, incredible engineers, you are safe with TypeScript. And I like to call it like the state of art of JavaScript because there are new evolution every single week, every single month. It's a lot of stuff, but that's good for us. So basically we want to introspect our API with GraphQL, but also we want to introspect our codebase with let's say TypeScript flow, any single static type language. So we do know that GraphQL have a TypeScript system and that TypeScript system is introspectable. So we are gonna be able to see all the fields that our API are composed of. And so we are gonna have our application as a single sort of truth where we are gonna have our GraphQL schema. And from there, we probably want to extend all our type definition to both to our client and our front-end. And also even if you want it, you can start from your database when you are gonna declare all your rows and tables. And from there, because probably that's the data that you are gonna suppose, you can do some business project, you can change of course, but like now in the 90% of the application, you really wanna replicate it, you wanna extend the types from either your database or your server to your client. And we are gonna do that with this incredible open source tooling called GraphQL Code Jam. So basically we are gonna auto-generate types basically from our GraphQL implementation. And if you think about it, like we can auto-generate type, but you can auto-generate a lot of stuff. So now there are companies that they are auto-generating graph databases based on your GraphQL schema. There are companies that they are auto-generating react components type from your GraphQL schema. There are companies that they are auto-generating a GraphQL API with server-led functions with a lot of stuff from either your database or your GraphQL schema. And this idea is super interesting and I think this year in 2020, we are gonna see how they know code or how companies they are gonna help beginners, engineers in order to adapt these new technologies. So okay, let's jump in the live coding. So, explore the code first, then GraphQL server, then GraphQL client. And we are gonna be using the SpaceX GraphQL API. We've got even two of them. So we are gonna be basing in this api.spaces.lan.glas.graphql. But what I can tell you guys is like this api.spaces.lan.glas.res is a fully type auto-generate race API based on a GraphQL schema. So I've used another open source library in order to with I think 30, 40 lines you can auto-generate a fully type race API from your GraphQL schema. And all the code is open source so you can check it out in github.com.glas.spaces.lan And we are gonna see it right now. So cool. So now I'm gonna just go to my IDE and I'm gonna go fast. If we, probably you are gonna have some questions then we can just talk about it. So in my server, okay, let's start from the server side. So we are gonna have all servers and then we're gonna check all the code base. So we are gonna have our index and then some utils. In the util we are gonna have some, util function like to find, limit, do offset, sort of whatever. And yeah, so util is good and then we don't have just types yet. We have just a context but just like 10 lines, that's nothing. We are gonna see later how we are gonna auto-generate it and then we are gonna have a two servers which is gonna be the GraphQL server and the REST server. So this is what I was talking with you guys before. So in 35 lines I'm auto-generating a race API fully documented a fully type with a GraphQL schema. So I'm using the SOFA API open source library which is using open API that you guys are using and swagger to auto-generate the docs. So basically you're gonna use open API from this library. I'm gonna pass the GraphQL schema that contains all my fields, all my query mutation and subscription. And I'm gonna just expose it in my express app instance and then I'm gonna expose the docs with swagger. Like incredible. In 30 lines you can auto-generate like REST API fully type and fully documented. And then we are gonna have our server. So I am doing a lot of, like this is the index. So sorry, this is the GraphQL server. So I'm doing like some stuff but don't worry about this. And basically we are using Apollo server and we have to pass the schema and the content even like you can like forget the content. So basically what we are gonna see today is the schema. How we can declare the schema, how important is the scheme? Cool. So then if we go back to our course source we are gonna have the index. So we check the index. We let's say that we forget the rest and we're gonna have just the GraphQL and we are gonna pass a node instance and then the config there is gonna be an schema and the content with a database. So to put in, to let you know how this works. So we are gonna have Mongo database. It's a public space X Mongo database. We contain a lot of data about the space X and then I've just created the server side, a GraphQL API that is gonna just get data from the Mongo database and just like just display it. And then we are gonna see the client. So Mongo database, TypeScript and GraphQL server and TypeQL and React client. Now we are in the server. Cool. So I think like here we get and now we are gonna see the GraphQL schema our single solve of truth. So we are gonna see in the schema if let's say if in my Mongo database I do have like tables called capsule, company, dragon, lamp, launches, mission, blah, that's what I created. So I went to the Mongo database, I've seen all the collection, all the tables and I've created the same domains for my GraphQL types. So let's say that we are gonna see the rockets. So in this way of creating GraphQL APIs there are too many. In JavaScript there are like more than 10 I guess and then you've got .NET, you've got C, you've got C++, Python and Scala and a lot of stuff. So we are gonna be using the SDL and the schema first and what we're gonna have and anything like even if you are beginning in JavaScript goal you are gonna be able to understand it. So we can see here that we are gonna declare our query in three points as we have seen and Mark has mentioned before query is to fetch data, mutation is to mutate data and a subscription is to subscribe to data. So now we are just gonna fetch information. So let's say that we are in the rest world so probably that's what we are gonna have, right? We're gonna have a slash rocket and we are gonna return some rockets and then probably we can have kind of also if we're gonna get just one rocket we're gonna have slash rocket slash ID, right? The good thing about GraphQL is like we by definition and by the specification we have to define every single field, every single type of the field that we are declaring our GraphQL schema. So let's say that we have a rocket. So we have to define, let's say we have some arguments in order to do limits and also in order to do pagination we have to tell them that it's gonna be an integer but also we have to declare what is gonna be the return a data from that endpoint. So one common problem is you have your REST API and your REST API in your swagger dog is telling you that it's gonna return an array of objects and that object is gonna contain and field call ID in lowercase and when you fetch the data from your API it's not ID lowercase, it's ID uppercase because you change it but someone forgot to update the dogs. The cool thing is like all the documentation that are gonna be generated, they are generated from this GraphQL schema so never your documentation and your API it is gonna be not on sync. This is super important because I'm pretty sure that you guys you have like loose a lot of time in order to wait for the backend engineering team to answer your emails and blah, blah, blah. And so yeah, we can see here rockets and let's say that we don't have param so we are gonna return an array of rockets and then if we want to get a rocket we are gonna have ID and we are gonna have the ID type and we are gonna mark it as required because it makes sense that you have to specify an ID in order to get a rocket. And then we are gonna have all the types. So let's say that we are gonna return a type of rocket and we're gonna have like even we can have a, these are like GraphQL primitive types but also we could have like GraphQL complex status for example at rocket first stage. But rocket first stage is basically like an object or a type which is basically a subtype with other GraphQL primitive types or a complex type and then force is gonna be another type. Cool, so I think like we understand this so we have to specify any type that we are declaring for our API and thus this is this smart type and introspectable contract. And then we have to check how we are gonna return data because here we are specifying the desired rocket but where the data is coming from, awesome. So if we are gonna see that we are gonna have the resolver so we are gonna resolve those fields. So if we check here basically we are, if we have the, we have declaring one query type and two query entry point fields that's what we are gonna have in our resolver. So we are gonna have rockets and rocket. Let me just make this bigger. And if we see rockets what we are doing is like we are going toward database and even if you guys I can show you how the database is composed of. So basically we are gonna have here a Mongo public API set that specifies database and we are just using Mongo client from MongoDB in order to connect to it and just we are just returning in the context and we are accessing to it here in the context DB. So I'm gonna go to my rocket collision in my Mongo database I'm gonna do some finding, sorting, skipping, limiting and I'm gonna return to array and this data is the data that is coming from my database and that's what I'm gonna suppose. So if I go to my type depth in my rocket so this is what I'm gonna get and I'm gonna have the types. And the cool thing is like let's say that here returning a one, when I'm requesting the data I'm gonna get a graphical error and graphical is gonna tell me hey you have to specify that there is gonna be an array of an object that is gonna contain blah blah blah blah but you're returning an integer so hey check what is going wrong here. And the rocket is same so we are gonna have in the second param we're gonna have the ID that we have to specify in our type depth and we are gonna do the same database go to database, go to a rocket collision find the body D and we are gonna adjust it to the first enemy and we are gonna return one object. Cool, I'm gonna go like faster I guess because yeah I'm getting wow. And yeah. The limit can be defined here once. Sorry? In the limit. This? Limit parameter here. So this is a function that I'm just posting in the context. So it's a JavaScript function that you can see here in the context, context, context, here. So in the context I'm passing all the function in the content, the content is gonna have the limit and the limit is gonna be the limit is gonna be a function that I have pass Cool. I'm gonna try to go super fast because I'm running off time. Awesome. Okay. So I'm gonna, yeah. I'm gonna just like, let me check. Okay. Let's go to the server and just I'm gonna run it. And a, okay. I think I'm gonna have to unit all the types. Okay, cool. So we are gonna get this is the API. So you can see localhost and I'm not cheating you guys. We are localhost and then we are, that's the cool thing we were like Mark was mentioning before. Let's say that I'm joining tomorrow a new company. I didn't know anything about that company. So I'm gonna open brackets. I'm gonna do control space and I'm gonna have all the information. So someone has told me, has opened a Gira ticket that I have to fetch the rocket from the API. So I'm gonna just the rockets. So rockets and there is a rockets and then I'm gonna do the ID and then I'm gonna get the name and I'm gonna get the description and then I'm gonna get the cost per launch. And I can just click play and we are gonna have here all the info related to the rocket. So we're gonna have four rockets and let's say that we want to check, I don't know if you guys do like space it, but I love it. And we have this Falcon Heavy that it costs like a 90 million US dollars, which is a lot. But even like, you know this is super annoying cause per launch not case. I wanna do these parts and probably we are doing in the client and that's, you know, you can have like some error. So you can also specify aliases in your API request so you don't have to do that logic anymore on the client. This is super useful. And yeah, so this is cool. I'm gonna go fast. So now what we are gonna do is like, we are gonna ball our API. So let me just get a rocket ID and then I'm gonna get this ID and then we are gonna see that we are getting just one object. Okay, we can see here all the info. Cool. So I'm gonna evolve my API. So I'm gonna go to VisualCore Studio and I'm gonna use this incredible VisualCore extension to check my pull request and also like pull the data. So we are gonna see that there is a pull request open as someone, I was, I did this so add rocket by name query field. So we are gonna evolve our API. So we are gonna check out the branch. We are gonna see the diff. And in the diff we can see that we have add a new query entry point called rocket by name. So we are gonna be able to search by name. But also we have changed the ID from a lower case to uppercase. And you know, this can happen. We can change our standards and blah, blah. So now we are gonna see what happens. We are gonna go back here. I gonna restore my API and we are not gonna get any error. And we are gonna see the problems that this can lead to. So we can go back to our rocket to our type definition and we can see the new evolution of our API. So the new query entry point field and then the change here. So basically what is gonna happen right now is let me just restart this again. As we have changed this information we are required to change this info because now we are not getting ID lower case anymore. We are getting like ID uppercase. But the problem is like a, let me check. Something is going wrong here. Swagger docs out. Okay, this is live coding and type devs change. Okay, let me save all and let's try to do again. Cool. So the point here, okay, I'm not sure if we're gonna make it. But the point is like we have changed this. And now when we are exposing our API to the world if we can see here, I don't know what I'm getting an error. Let me just quick check. But a, what is there? Here, Falcon, or I think I type something here. Oh yes, oh yes, that's good. Awesome, cool. So now we should be good. Cool, so now when I'm running this, what is gonna happen? We have changed the ID for lower case to uppercase. We are required to check, to change our resolver. So here we are not gonna get ID lower case anymore. We are gonna get ID uppercase. But we can see that the server is running and this is a huge problem. So now if we go back to the same query, we can see here the graphquial by specification because we have changed the type definition is gonna tell us, okay, there is not an argument called ID lower case. So what is it? So I'm gonna do control space and I'm gonna get auto completion about all my fields. This is good and the problem for me is the list correct. My code evasion looks good, no errors in the compilation, in compilation time and we have our API ready for thousands of millions of people to have access with it. So now I'm gonna click play and what is gonna happen with the same input data I'm getting a null and this is a problem. This is a huge problem because if we are exposing an inconsistent state of our API to the rest of the world and you don't know what is going on here, you're getting a new like you can have weeks or days or hours trying to figure out what is going on here and like a lot of requests they are gonna fail in thousands of clients and we have, we want to avoid this. So basically what we are gonna do right now is we are gonna auto generate all the types with type basing our graphical definition and have a run time check error to avoid this inconsistent state for our APIs. So I'm gonna do, I'm gonna go to, I'm gonna do just join gqlgen. So I'm gonna be using a graphical co-generator in order to auto-generate all the types with type basing in my graphical schema and if we can see here the div, we, here it is we are gonna have a file with more than 5,000 lines of types. So if you wanna put types in your code base the first type that you wanna put is some, is are those that you don't have to write that you want to auto-generate for just in the software. So basically what we are gonna do I'm gonna go super fast here I'm gonna just type my resolvers and what we can see here right now is like if I try to, I'm gonna save this if I try to run my server again I'm gonna get a compile time error in order to avoid inconsistent state in my applications. So we can see here that it fails and it's gonna tell me that ID doesn't exist on the type rocket arcs and what I can do is like do control space and because I have already declared what is gonna be the type and the name of that field and we're gonna have there is an ID uppercase that is gonna be in a string and now I just can't put it but let's go even like farther. So let's say that we want to evolve our API so we have created a new type definition which is gonna be called rocket by name and I wanna implement the business logic for that endpoint. So I'm gonna just let's say that I join a company I don't know anything I have a JIRA ticket open that I have to implement I gotta return the rocket by name a rocket from the space as a database. So I'm gonna do control space I'm gonna say oh rocket by name so let's oh there's a rocket by name that is gonna be on a sync function that is gonna have some parameters and this is gonna do I'm gonna do what I do usually in my work just copy and paste everywhere. So this is gonna be this and then we can also we are not gonna use the object also as I have declared all my type definition in my arguments I can do control space in my arguments and I'm gonna have this I'm getting a name as an input that is gonna be in a string and also we can destruct to the context and the context probably I'm gonna just need the database so here we can see that I'm gonna use the database and I'm gonna just use the name so when I save this if now I go back to my API when I'm running if I'm not getting any compile time errors sorry any runtime error that means that my API is gonna be consistent it is gonna have the data that I'm looking for so now if I'm going back we're having no I'm gonna click again we are gonna get the data and I'm gonna do rocket by name and we are gonna do by name and it's gonna be fucking one and we are gonna get the data and we can just fetch all their stuff here and I'm gonna just stop here we are not gonna see the client today tomorrow I'm gonna be speaking on our meetup so probably if you wanted you can go there because I'm gonna do it but I feel like we can just go quickly over it so this is the server side and I think that you might have some questions that we can discuss later but we have a remote talk in one minute so let me just connect with T-roof first meet up and just tell him that way a bit and then so okay this is the server side and now we are gonna have the client side so in the client side I'm gonna show you guys just how to fetch data from GraphQL so we are gonna have let's say this is the GSX so the data that we are gonna represent and this launch spot is gonna come from somewhere so the launch spot that are gonna come from the query and we are gonna have here the query so the same that we are blah blah blah so I have to put these always and I manage now continue, okay okay we can just wait here or here I think it's here Hey T-roof can you hear me? Hello Can you call us again? Now give me two minutes please that I'm finishing my talk just give me a sec I will ping you up soon Thanks Cool So I'm just gonna go back here sorry for that Cool Okay so in real so what we are gonna have is like the same query that we are doing here so you can just like fetch whatever data you want it and you are gonna copy the query and then you are gonna pass it here and you are gonna let's open it first so the client and then just start and you are gonna get the data from the query and also it's pretty nice because you are because of Apollo and React they have created a type a method where you are gonna have all the states of your request so let's say that you wanna so an error when you are having an error or you are gonna so like in spin it when you are loading you are gonna get those data but now let's say that we are just getting the launches and I'm just iterating about it and we see the front end so we can see here that we've got a mission name a rocket name and details and one image so this is what we've got and we can see here I don't know if you guys like like SpaceX but for me it's like it's super awesome what these guys are doing okay cool the same we can do this but we might have some problem let's say that we wanna able our client so let's say that we have this and I save this and everything looks good and I can put this code to production but what is gonna happen here this is gonna be undefined undefined something to undefined is gonna be an error and then I go to my client and boom and we are having a lot of this every day and that's annoying and I don't wanna do that so I gonna do this like super quickly so basically in order to have or to achieve an incredible developer experience for someone that even don't know what they are doing let's say that it's new in the company I would like to be able to inter-spend my query and my API from my IDE but also auto-generate all the type basically in my GraphQL queries so what I gonna do here is like I gonna go to the client here as well I gonna just call John GQL Jam and I gonna activate visual call extension called Apollo GraphQL that is gonna allow me to inter-spend my API from my IDE which is awesome and now we are gonna see how this works so I gonna go to my Apollo config I gonna pass the GraphQL API I gonna save it and I gonna load my GraphQL schema with all my types and all my fields and let's say that now I want to like display something new in my client side so I don't want to do I don't wanna go to the documentation I don't want to do any console load to ensure that the data that I'm getting for the API is the data that my documentation says basically what I do is I wanna code I wanna like build shit fast as fast as possible so I gonna do control space I gonna have all my fields available in my IDE so I don't have to go even to the incredible documentation of GraphQL I just have to be my IDE and let's say that I wanna get the shapes as the shapes even like we can see there it is gonna contain a real shapes GraphQL is smart enough in order to know oh, you have to specify the fields that you wanna add let me just stage these changes and so now I gonna get the CPYD the name and the port and no position is gonna be a home port I guess and then I gonna even create an LES so I don't have to change from a SNAP case to a comma cache and an image so now when I'm saving this what is gonna happen is I gonna out-generate the types from this new evolution and if everything yeah so here we've got the types so we can see here like 600 lines but I state those changes and then we can see the new evolution of my API so that means that even I didn't have to go to the competition to evolve my API but also I don't have to so let's say that we're gonna get launches.query it's query right yeah I think so so now what is gonna happen is like my data my return data is gonna be a type which means that even I don't know anything about this I know if I do control space here I gonna have my sips and even if I wanna iterate those sips let's say sips and then I don't know what is sips but I know that I miss a type of script so type is gonna help me out so I gonna do dot and I gonna have all the methods that they're available in an array so I gonna do just a filter with Boolean to remove null values and then I gonna just do map and we are gonna do the same here so let's say that we have to we are gonna return something like this and I gonna just finish this tool and go all through so I can also introspect all my types my complex type for that object and we are just like getting one array we will have like infinite fields and we can see how let's say that we are gonna just like put the image because we don't have time so I gonna do image and this data is gonna be I put it twice but that's fine image and I know what is going on here and it's gonna be an image and we are gonna do with 100 so when I say this if I don't have any error what is gonna happen if I go back to my my client we can see here all the information are very available and if we go back and we do the same with the rugged so we have rugged now what is gonna happen is that we are gonna have a runtime error in say in UA rugged doesn't assist so what is going on there is probably a rugged and then we can just go back to the client and that's gonna work and that's gonna be fine so that's everything for me thanks so much the slides are there so like I feel free to get a cue to that but I'm gonna put it in the meetup account so now