 Hi, good afternoon. So I hope that you have a lot of fun during these past few days in post-Asia. So today, I'll be talking about introductions to GraphQL and how we can actually build it using Node.js. So my name is Stella Wideasari. I'm a consultant developer at ThoughtWorks. So how many of you heard about ThoughtWorks before? Oh, good. All right. So just let me share with you briefly what is ThoughtWorks and what we are doing. We are actually a software technology company. We solve problems from various clients by building software for them from scratch. So prior to joining ThoughtWorks, I've worked with several JavaScript stacks with includes Angular, Babel ES6, Node.js for sure, and React as well. So let's just walk through what are the agenda for today. We'll start with the reason why even I'm here to describe with you the reason for us to use GraphQL. Then I'll start with the definition of GraphQL and, of course, the most fun, which is the Node.js part of the implementation, and some testing and batching that you might want to do in your applications. So as a software developer when we build software, so we're going to create like communication between our front-end and back-end and that's require endpoints. But eventually, when you try to add features to your applications, it will then be unmaintainable because the bigger the application is, the more endpoint you created. So for instance, like in this scenario, when you have like four different types of, maybe, sorry, if you have one data and you have four different types of endpoint in order for you to survey into your front-end, and that's very much troublesome for a developer to actually maintain all these things. So what GraphQL does is that instead of having so much multiple endpoints in your application, it's solving with one single endpoint. So the beauty of this one single endpoint is that you can communicate with different type of databases, even with legacy system, microservices, and what you need to do for your front-end is just to call this one single endpoint, pass it the request you want, and just give you the response. You might be able to see it later. I will show you how it actually looks like. So after defining this problem, let's jump in into what is GraphQL. So let me start with what is not GraphQL. So many of you may heard about GraphDB. So you're wondering, is it even related to any of databases? Nope, it's not actually related to databases. It's not a database and it's not a data storage, and even I'm using JavaScript to demonstrate how it used. It's not a language specific. So it's actually supported in many type of other languages as well, like Java, Python, and you can make many of them. So what it is GraphQL, it is actually query language. So QL stands for query language and how the response looks like, such as like this. So my response can be as simple as this. It's actually stated that I'm trying to retrieve a person object with name and description and field and it just retrieved a whole bunch of data related to the query. So just let a brief introduction of the project. So GraphQL is developed internally by Facebook in year 2012. It just publicly released. So I want to point out two main concepts in GraphQL. Firstly, it created this single endpoint for us to issue fast any requests we want with the response that they will get from the average as well as databases. So you may wonder how can this GraphQL communicate with different database and you'll be able to see it later in the demo scenario. So when I first started using GraphQL, I find that it's very important to actually take note of which is these three things. So there are two main operations in GraphQL, which is query and mutation. First, awesome. So you might know that query is equivalent to I should just retrieve data from the database. And when you do any manipulation, such as like pull, update or delete is equivalent to mutation. So just bear in mind two main operation, which is query and mutation. But one of the important things in GraphQL is that it strongly type language. So what does it mean by strongly type is that for every data that you want GraphQL to translate to you, you have to convert them into object, GraphQL object. So let's just dive into the Node.js part of the application now. So we start with like our application architecture. It's pretty simple, right? It's just like a few blocks. So in our Node.js application, we will serve like a recipe endpoint, which is express will actually help you to do that later. And then we will use of course GraphQL and then we have something called ODM. So just wanna have a quick number of hands who's familiar with ODM. Awesome. So yeah, ODM in this situation, I'm using Mongoose because I'm using MongoDB as my database. So the reason for me why I decided to use ODM is actually I want to ensure that my data that I push inside my database kind of a consistent because with ODM you can like define what kind of like a data that you want, like the schema of the data that you wanna push. So the technology stacks, let's move on to the technology stacks that we're gonna use for today. So yeah, I'm gonna use ES6, Yarn, Node.js for sure, and Mongoose. So when we wanna start building a Node.js application, we'll start with defining the dependency that we want. So the dependency that I'm require of course, as I mentioned, we're gonna use GraphQL, but there's one special node modules here that I want to define which is this Express GraphQL. So what Express GraphQL does is that it will actually provide us with some web interface for us to test the query. So I will show you how it looks like later. So after defining dependency, we then need to make a communication to our database. So how we do it, we use Mongoose. So by using Mongoose, we actually make a communication to our MongoDB. And after this communication have been established, we then continue to define the single endpoint that I've been mentioning about. So in this situation, I'm using a node modules, I'm using a module from Express GraphQL which is called GraphQL HTTP. So it has these special parameters called GraphQL. So this GraphQL is pretty awesome that I want to show you how it looks like. So here it is, it is GraphQL. So what it does is actually you can pass all the query, I'm sorry, request that you want. It's something like postman actually. Have anyone of you used postman before? Yeah, so awesome. So yeah, it's similar to that. The fact that you can just put in all your query into this request and it would, when you hit that start button, it would just give you the response required. But the special thing about this is that it has something called documentation explorer which you can see by the black box on the right most. So what this documentation explorer does is that it actually provides you to actually document sort of like an automated documentation whereby you can browse through all the query that you created and actually give you all the parameters that you want. So in the typical way of creating a REST API endpoint, you might have to use additional kind of like library for instance like JS doc in order to kind of like document all your API. But for this, in this situation, it's everything is automated which is really helpful as well. Right, so let's jump in into what kind of applications that we wanna build today. So imagining you're gonna build like an Instagram like application whereby you're gonna have a post and of course you're gonna have a user. So these are the two main object that you're gonna build. So we're gonna build an, as I mentioned GraphQL is an object type. So we're gonna build a user that object as well as post object. So before diving into the code, I want to show you how the query will look like in GraphQL. So, well, before retrieving the data, we need to push some data inside, right? So in this situation, we're gonna perform mutation and I'm gonna add post and user into our database. So we're gonna perform mutation that how it looks like. So we head into our GraphQL. So inside of GraphQL, this is how the query of mutation will look like. So I'm adding user by calling this add user query and I'm passing it email and name. So there's this like black arrow that I pointed out on this slide. So what it does is actually when I defining these two parameters, I'm telling my GraphQL to actually pass me back the email and name. It's kind of weird, right? I'm passing email and name and I'm asking it for email and name but it really what I want to show you here is that you can decide what kind of parameters you want the server to pass you back. So it's pretty intuitive. So next, after we add user into our database using GraphQL, we then need to add a post. Add post similar to that and what feature I want to point out here is that GraphQL is very much intelligent such that if you kind of forget what kind of attributes you want it to have, you can actually just press alternate space on your keyboard. It will just list down all the parameters that is required for you and are available for you. So if you even forget about like the different type of parameters is available for you for each of this API, you can browse through the documentation explorer. So then after we do mutation after we adding our data into the database, the next thing will be like how we can actually retrieve them. In order to retrieve it, we're going to use a query operation and this is how query operations looks like. So similar to mutation, but instead of pushing any data, we just tell our GraphQL to actually pass us a user ID, user object of this particular ID with this particular attributes. So this is kind of like a power of GraphQL as compared to any other REST API because it can be very dynamic such that I can actually just remove all the attributes and leave just an email as for instance and it would just return you the email. You might be able to see the sort of like the simulation on the main website of GraphQL. They really mentioned how it actually can kind of like query a specific kind of like data into it. So and one of the example, one of the advantage I find is that when you're using GraphQL to query to your server, it's pretty much readable as a JSON like. So it's really easy to read. So there might be a come a situation whereby your query is becoming very long. So GraphQL come up with something called fragment. So what we do in fragment is that we can group similar kind of field together. In this situation, my group is, my fragment is called user field and actually I can kind of like call them into my like my main object which is in this case user. So in this situation, even if your main object is getting bigger and bigger, no worry because you can actually kind of group them and make them readable enough. So let's jump to a more like fun part which is the code. So what we're gonna do now is that what we have done so far was to implement the, I mean we've already added dependency and then we've made a communication to our database. Then how can we define the Mongoose model? So similar to GraphQL, when you actually started with Mongoose, you have to define a schema and define each of the object as a Mongoose model. So you define the parameters need like the type of properties and actually with this, your model is ready to be pushed into your database. So after defining the Mongoose model, we have to define GraphQL. So what happened with GraphQL is I've been mentioning that in GraphQL is a strongly typed language for every object that you want to manipulate and you get you have to convert them into GraphQL object type. So to start with, we're gonna have like an entry schema whereby we can actually have the query and mutation. So the query mutation itself, you have to convert them into an object type. After you defining them as an object type, you then need to define the actual object itself which is in this situation, I wanna add user into our database. So defining a user similar to how Mongoose does it, we have to define the parameters as well as the type. And there's a special things here, posts, right, which is actually have something called resolve. So in GraphQL object, we have something called resolve function whereby kind of like a way for you to tell GraphQL that you wanna do some action or like some processing before you actually pass it back to the server, to the, as a result, sorry. So this kind of structure is a structure that you need to define because you need to tell GraphQL when they make a query, this is the type of query that is available for them. So after defining the object, we didn't need to create another type of object when we make a query and mutation for itself as well. So making a query to the object, similar to what I showed you previously, we do need a resolve function and the data it need to be retrieved by from the backend, from the database. In this situation, we are using Mongoose model. This is where you see the power, why GraphQL is not related to any database because the one that's making the communication to the database, it's Mongoose itself, it's not GraphQL. Therefore, why GraphQL can work with multiple of databases. So similar to query, when we are making mutation, we do need to define them as an object as well. So in defining an object, we need to actually come up with this resolve function to tell GraphQL to push to the database and the pushing to the database itself is not done by GraphQL. Over here, when we are using user model, the one that does the work is actually Mongoose, which is the ODM. So after defining all this application, we then need to think about what's next after this. So you might want to test your schema by several existing framework such as like JS, Mocha, or Chai. And as you see that we keep making several calls to our database. So how we can actually ensure that the, it's kind of like doesn't impede the performance and stuff. So Facebook came up with this library called Data Loader, which actually helped you to batch and cache all the calls that you made to the database. So right, before I end, I want to tell you about like a summary of what I've discussed so far. Is GraphQL provide a single endpoint? It's actually can make communication to our database as the one that communicate with the database is Mongoose, not the GraphQL. And the three main concept of GraphQL, which is query, which is equivalence to our get operation, mutation, equivalence to our update delete, and how it is actually a strongly typed. That means for every object you want GraphQL to recognize, you have to convert them into an object type. So yeah, I want to say thank you. Hopefully it's useful. And if you have any question or any discussion you want, you can actually send me an email on this email. Thank you. Thank you very much, Stella. It was really good. We use GraphQL, so I found that really interesting and fascinating. I learned something that's great. So, can I have a couple of questions to see? Okay. Can you use GraphQL with either Apollo or Relay? And do you have anything to know? Yeah, Apollo is for the client side caching, right? Yeah. And Relay is like kind of like when you want to use React Redux and Relay kind of like. Oh, not Redux, just React. React, oh no, not yet. I'm not just going to need deep learning GraphQL questions. We're GraphQL setting up. How do you handle the panning problems? Panning problems? Yeah, so like we've got to do a very easy to pan out. You just do nodes of nodes of nodes, nodes and edges and people can be going, how do you handle it? You mean like even the number of queries becomes like very pretty big and stuff like that? Right, actually I haven't really used it in like a production level but it's like pretty much nested. But what I can think of right now, I guess it's like Apollo will help to do that because it's like do some sort of like caching so you enable your data to not be so much nested. All right, and right, I bet like with it's available for your query can actually kind of like simplify how you make a query and I am not really pretty sure about that. Yeah, but for sure we can have further discussion about that. Yeah. Thank you very much. I'll call an Oscar and put it on the YouTube video. It should be up.