 job and the reason that I started this workshop is because I realized there isn't much community culture for developing here, especially I found people sometimes they have good ideas but they don't know like they don't have a platform to communicate, to have discussion and to share thoughts and opinions and then I come with this idea and I created this workshop. I'm aiming to provide kind of zoom meeting as a platform for people to exchange thoughts and to have great proposals and ideas. This workshop would be a series so this is the first one and I started with Michael and today he will be on my guest speaker and we're going to talk about QL. I'm very open to opinions, ideas. So if you guys do have any proposals, see there are certain things that you are very interested in, anything related to software engineering, for example different programming languages, say if you're interested in Python or if you're interested in JavaScript or C++ and you want to know more about it, don't hesitate to let us know if there are anything or any people that I know, if there are anything that I can do to myself, I think it would be a cool idea to run a workshop so people can learn together, grow together. So this is the first one, my second one, I'm already thinking about making a cloud or networking more kind of related but if you have other opinions or thoughts, just feel free to reach out to me on Telegram and these are more, these are my personal Telegram so you can go ahead and add me and drop me a message, you will have really good thoughts. And also besides this workshop, I created a group, a Telegram group for us to communicate. So in this group we'll be sending out all these slides, we'll be talking about it today, the GraphQL, so if you want to recap later so you get something and you want to refer it, you can always go there and check it. Yeah, so please go ahead and click on the link and join our group, a lot of them will be a good group, you will have any feedbacks or any ideas or any materials like all these slides, you can all find these resources here, a lot of them will be all. I guess, all right, hope you guys are already getting stacked and getting ready to be leveled up. Let's give the stage to Michael. Okay, awesome. Let me just add some of these links to the chat so that people can find you. Okay, thank you. Great, thank you Julia. Let's see. Okay, cool. Hi, good morning. Good afternoon everyone. My name is Michael, I'm a lead software engineer at GraphTech, so this is my handle on Twitter as well as Instagram, so you can find me on Twitter and Instagram is that code kung fu. I'm also in the chat, so is that text-heavy chat, so if you want to find me there, you can also just mention me or message me over there. Right, today we'll be talking a little bit about GraphQL. So the first question in some of our minds will be like, why do we once use GraphQL, why is it about GraphQL that attracts us to it? So I'll just share a little bit about. So these are probably most my opinions, but if you feel that the same supplies they use to, then it's great. For me, you know, GraphQL is like just another REST API, you know, so you're familiar with REST APIs, it's like it's just yet another way of doing REST, and it only uses HTTP posts to send data, and you do basically the same thing as you're sending with a REST API, you have a REST request body and header endpoint. So same thing for GraphQL, so it's very much the same as a REST API. If you implement a GraphQL server, you also need to, you still need to implement your own authentication, authorization, and even SSL on top of your application server. So GraphQL is not, doesn't cover those areas. Basically, you still need to use things to express authorization in order, in JWT, you're going to do some more things like authentication and authorization. So REST is just a protocol that helps you, that lets you communicate between your client and your servers. And the other thing that's good about GraphQL, you can request as much data as you need, you don't need to actually get a whole chunk of data. So it's some of the benefits that I'll dive in a bit more in each of these points as we go along. So for those who are not familiar with what is a REST API, I'll just do a quick recap of what a REST API is. So REST API stands for representational state transfer. So essentially it's like a web server where you can retrieve data in the format which you can use. So it is structured format which the computers can understand. So essentially in a REST API, there are usually four components, the endpoint which is the URL. So usually with something like example.com slash apis that's friends, for example, if you're getting all your friends from this API. There's also a HTTP method. The method will be either a get, post, put, or delete. And these are usually the HTTP operations. Usually if you're using a web browser, you mostly what's the time you're using get or post. So put and delete are mostly more for like REST APIs so that you can do things like update things or delete things on the server. The fourth component of a REST API is the data. So usually if you're posting some a new thing to the server, there'll be data that you include. Usually it's a JSON or some more structured data like in the form data format, which is key value pair. So key equals the value and t equals the value. So that's the structure you can use. So in the REST API, there's four components which are the endpoint, the resource that we're requesting, the method which is the operation you're trying to do on the server side. The haters, haters will be authentication haters that you include in your REST API request and the body, which will be something like your data, the stuff you're trying to put on the server, for example. So in REST APIs, you usually do CRAT operations, CRUD operations on resources. CRAT stands for create, read, update, and delete. So usually when you're operating with things in the server side, rather using a REST API, you want to create things and usually we'll create, you use the post method to basically post data to the server. You're reading something from the server, you're probably using get operations, you use a HTTP get to get data for you. So it's like just reading data, you're not making changes. Update you probably use put. So put will be like to basically you put, you probably include the body of the things you're trying to update and delete will probably be just removing things from the server side. Right. So these are probably the four operations we use and you can get all these operations in the REST API usually. So you've used in most APIs right now, you also you can be using JSON, just a JavaScript object notation. So it's like a structured text where we should, which computers can understand. So you'll be using this to send data over and to also get it and you also get response back as JSON as well. So here again are some of the examples. So like we do HTTP get, you'll be getting the data from say like say events. So this will be the method, which is the get method. This will be the end point. Right. And this is the resource you're trying to retrieve, which in this case would be the events resource. And, and then of course, if you're doing a post, which is you're creating an event, for example, you'll be using this endpoint, like slash events, and using posts to tell you I'm actually posting data over. And indeed, you will include a body or a structured information about what you want to post to the server, things you want to add to the server. So in this case will be an event JSON, which has a name and date. So for some of today's GraphQL workshop, we have a name of the event and date time, which is the date time event. Right. So this is something that you would use in a graph in a REST API. So GraphQL is nothing more than yet another REST API with its own structure of doing things. Right. You still, it has all the same, all the things you will find in a REST API, which are the method, the endpoint, and you also have a body of things to send over. So for example, so here's a concrete example, like in the four components. So in an endpoint, in GraphQL, there's usually just one endpoint, which is slash GraphQL. Right. And all your requests going to the server will just be using this one endpoint. So there's no idea of like different types of endpoints or different things. It's all going to one endpoint, and this one endpoint will basically handle everything for you. And the method you can use are either posts or get. So I'll just update this. Usually, most people use posts because the amount of data going through the, going through is actually quite a lot. So you want to use posts to be able to kind of like send a large chunk of data and sometimes you'll be sending sensitive data over as well. So you don't want to make all these, expose at least all these information in the URLs, because if it's in the URL, you probably end up in the server logs. So one thing you want to take note of. So usually people use posts to get stuff over, push stuff over to the GraphQL API. The headers will depend on your application. Sometimes you probably want to include things like authentication headers or whatnot. So you're the same as any of your REST APIs that you interact with. And the body will usually be a JSON. So the JSON will have like usually three, one or two things, which are the query. The query is the GraphQL query. You're making a request to the server. And this query will include a specific GraphQL query, which I'll show you a little bit more of later on. So in the JSON format, with one of the variables being query and query will have a string. And the string will be the GraphQL query. Well, I'll share, I'll share with you a little bit more about that when we go into the hands-on session. So the nice thing about GraphQL requests like this, you can also separate the variables and the query. So in the query structure, in the query that you compose, you can include placeholders for variables. And this will come in, come into another attribute called variables, where you can pass in like say, blog post ID or event ID. So these things can be passed in as variables, which will be interpolated back into the query string. This is all down on the server side, so you don't need to worry about it. But you just know that you can actually separate your query string and the data you're trying to request for. So it's kind of like how whenever SQL queries you can have like this, whenever SQL queries you have a stuff, you can have your things in placeholders in your SQL query string. So same thing as this. And there's also operation name, which I probably won't go too deep into. There are also other things you can do, but these are the more three main things to include in your JSON. And all these are handled by most libraries. You don't really need to deal with this raw strings or raw queries on your own. So the only thing you worry about is composing the GraphQL query. Up to this point, is there any questions from anyone? Yes, Michael. Yeah. Can you go back to the slide? Because when you are mentioned, when you're sending a request, it can be get or post, right? So what's the difference between them and at what a scenario do you switch? So mostly we said, as I said, we send posts if you are using, you're sending a large chunk of data or you're sending sensitive data over the wire. So you want to use posts for that. For get, you can, it's the same, roughly the same, as long as you include the like get a question mark query equals to the strings. Then you basically be recognized as a query string by the GraphQL server. While you want to use get, I would suspect you're using it if you need to do some caching. You want to use like HTTP caching for your site. Or you feel that the amount of data going through is not that big. So you may want to, you can use get to get to pass the data over. But in most scenarios, you want to use posts if you want to, because the thing about HTTP posts is that it's now, it's not cacheable. But you can't take advantage of all the HTTP caching like cache headers, like cache control, ETag, all these things you can't take advantage of. So because of HTTP posts, then you deal with the caching on your application side of your own, which can be a bit of a pain. Okay, so let me clarify. Basically, if it's like a small piece of data you are retrieving, then you use get. If it's a big one, then you use post. That's the first difference of them. The second one, you mentioned about caching. So with get, you're able to cache it without however we suppose you're not able to. Yeah, by right, you're not supposed to cache post data. Is that like a principle we practice in HTTP? Yeah. Okay, I'm stood. Yeah, thank you. Okay, so next, we're probably going to do a bit of hands-on with a GraphQL client. So if you have your computers ready, you can open your browser to this URL. There will be a quick walkthrough of how you can use GraphQL here. So first thing to land on when you come here is, so we basically use a GraphQL client to see how you can interactively make requests to a GraphQL service. So this GraphQL is a service that is open service. It's called Star Wars API. So you can use this to basically query all the different Star Wars movies and the different movie characters. So the task that we're trying to do first of all is try and compose a GraphQL request query. So first up, let's have a look at the query. So in this, this is a GraphQL client, think of it as the API explorer. So it's an API explorer that you can just see what are the different endpoints that are available and what you can do with it. If you come to this page, have you all managed to load this to the URL? You can do a thumbs up or something. Okay, awesome. So what happens next is you can use the query on the left hand side. You will see the area where you can compose at your GraphQL query. So GraphQL query, you have a keyword query and then you have, this is the query string that we're passing in. So in this case, we're making a request to an operation called All Films. So this, you will see this already here. You can click on the play button at the top. You click this, you basically make an actual query to the server and you can now see the response on the right hand side. Actually, do you see this here? Do you see this in your GraphQL? If not, you can just copy this string. Okay, I think it's caching my past, my previous request. So I'll just include it here. I hope you can try this. So you try and paste this in, I'll just share this in the chat. So you try and paste this in and you click on play. You will show up and end up with this thing on the right hand side, which will be the stuff you're looking for. Sorry, my cat is right here. Okay, anyway. So do you all manage to load up the film here? So you can see that there's a title and there's episode ID and then the release date. Oh, good. Great. So now I have a question. So here we only have one query, right? But if say we have multiple, then do we have to select that a certain query to execute? I guess right now the demo is only one query, but technically you can actually do multiple queries. But I'll just show you how to get about composing this first, right? So let's just clear this out. And the first thing you need to look for is the first keyword that this guy looks for is a query. So you have a query like this. So he's asking me what am I trying to query for? So you look on the right hand side, you see a documentation explorer. You see it? Click on the docs here. You show up. This will take on the right hand side. Right. So this is telling me this is a query. This is like a documentation explorer. So it tells you what are the queries that are available here. So we open this. You see that I have there's quite a few operations I can do. The different operations here will be like all films, film, all people, person, planets, and so on and so forth. So these are all the things you can request for. So what we did just now was to request for all films, right? And inside here you're telling me that all films can take in four arguments after, first, before, or last. And it's all optional, right? So let's just try and you click on all films. You tell me that what are the things that are here? These are all the data types that are in here. And so the way that you want to read this documentation is that this is the operation. These are the arguments that it takes in. And this is the response type. The response type is the same. So in GraphQL, they have kind of like a pseudo type system. So they have a type system where it returns an integer, a string, or an object class. So in this case, it's returning an object class called film connection, right? Yeah, type is something like class, like class but without operation, correct? So in this case, a type, right? So we're looking for all films. So and then all films will return film connections. So if I click on film connection, it will tell me what is the structure of film connection. So film connection itself will have page info, pages, total count, and films, right? So let's do a quick one. I'll just try and type all. You can see here that as I type in the graph in this graph, this client is called GraphQL. And GraphQL usually comes bundled together with a GraphQL server that you use. I'll show you later on when we do a hands-on with the GraphQL server, you'll see that this thing comes, it becomes quite handy. So if I type all, it shows up all the different things that start all the different operations and starts with all, right? So you go back one level in the documentation, you'll see that it shows all film, all people. So in this case, let's find all the films that we already did just now. Clearly raised to tell us to tell us that we're looking for, so this year you can request for what you want to, what we need inside. So in this case, it's getting, for me, film connection. So in film connection, it comes with four attributes, page info, pages, total count, and film. I'll just be quick about it and just type total count, right? And just press play. It tells me that there are six movies in this database right now, right? So next I want to try and get all the films. So even here there's a short, very handy description, a list of all the objects we turned into connection. This is a convenience view, blah, blah, blah. It shows us all the films. So let's do that as well. Film. But it tells me that if you type films, it actually shows me some syntax error. So basically it's telling me that you didn't fill in the blanks of what fields you want to get from the film. Right. So I'll do that curly brace and this tells me that it's actually returning an array. You can see the square bracket here. It's telling me that it's returning an array, a list of films. So why is inside film? I click on film. It shows me the structure of film. So it's like an object class that we're getting from this guy. So here we look at inside film. There are different fields that are available for me to use and access to. Say I want to get title, episode ID and say director. Let's try and get that title, episode ID and the director. Let's do this and click on play again. So now it returns not just total count, but it also returns the films, which is in another attribute. Right. Do you manage to get this? Yeah, Michael. What is film connection? Is it like a virtual node you actually can't do any query on? Can. So okay, so the best practice in GraphQL for returning multiple pages of things is to come up with a thing called ages. Ages will be basically like the things that will show up in, it's a way of organizing your pagination. So the way that you do pagination is that we give you a cursor. If you look at film age, it gives you a cursor, which is a marker for the next page. So if you pass in the cursor into the request, which will be over here, I think from the first and last, you pass in your cursor ID into before or after. It actually gives you the record after that cursor point. Oh, I see. So at least for parameters after first, before last, it's actually indicated that you pass in and say, I wanted a record from number one to number 10. Yeah. So I want all the films that come after a particular string or before a particular string in this case would be the page cursor, which you will find in the film age and the cursor point over here. A cursor to use in pagination. So the way that the account, so it's for a large GraphQL API that you go to, it actually has this to you to help you do pagination easily. It's just one of the ways. Another way you can do this is you can actually pass in page one, page two, page three. So that's another way you can do it. But the recommendation will refer to the GraphQL documentation. So they want you to try and use this as a way of doing pagination. We'll give you a chunk of data from page one at the cursor point for the last item, which you pass then to the next query to say, I want all the records come after this point. So there's kind of how they help you do pagination as a way of infinite, think of it as infinite scroll. If I scroll to the bottom point, it actually makes a request for the next page from that last record onwards. Wait, but you see first and the last, these are type integer. So I would assume first and the last would be like, okay, I want the first to 10 records. Let's try that. So you want to try to get me the first one. Let's see what happens here. As expected, it gives me the first episode. As they want to do three, it will basically give me the first three episodes. Then what about after before? What is the string type? What is the condition applied on? Let's have a look at what is inside here. There's page info. Page info has the cursor. Let's also include that. So let's say I'm now, let's try and get the first two. And at the same time, we also get the page info. Page info requires us to have either has next page, which is a Boolean as previous page, start cursor and end cursor. Let's put the end cursor and do that. So it gives me the first two episodes, episode four, episode five, and it's end cursor here. So if I copy this and say I want the first two, I want the first two and also say after, after this guy. Right. Oh, it's interesting. Yeah. So it gives me the next two episodes that came after, that came after this point. And this point is at the end cursor of the first page. Think of it as I, if I leave this out, it gives me page one. It tells me there are six records in law. We're only getting the first two. And now because there's a end cursor for this one, we can put in after, and we can do this. It will probably give me the next two episodes after this point, which in this case is the end of Jedi and Phantom Menace. That makes paging, I think, a lot easier. You don't have to do manually paging yourself. It's all out of words. That's correct. And nothing maybe I'll try and share with you is, I talk about having queries, having, being able to add query variables here, right? See where I can do this. I haven't done this in a while. So you can actually put, replace this two and after as local variables. Right. So let's do this. Something I've forgotten how do I should do? Let me just, Okay, you have something difficult for Michael. Okay. Let's see graph QL. Let's look at the query language. So this is usually where I go to to find out a lot of things. If you click on learn tab, we should do see all the different things here. So let's try a little bit about variables. Let's see how variables work. Right. So you can see I'm passing in this to this. So passes this in as a episode. So I actually have to implement an operation up here. And then pass the variable down to this. So let's try that. So I'm going to implement the variable. In our example, I will use the after can be first. Right. It's a way of doing this. Right. So in this case, I'll probably do, you know, give me the first two. Is that right? This is right. Let me just double check. Okay. So if I try to use a variable, it says first doesn't seem to appear in the graph query. So you implement the first here somewhere. Let me see where I can just replace it with this. So I need to do an operation name. Pass in this value. So it would be a pass in first variable. And does it take in? What's it taking? Is it integer? Okay. I think it's a pipe. So let's pass in the integer. That's the pipe. And I should be passing this in first. Offside in use in position except string. Oh, what does it mean here? Do you think it's possible because of the naming? Because first is already taken. Oh, yeah, you're right. So you get a name. I see. Okay, I get it. It's a pool in the place where it was expecting. Okay, got it. So this, like this. Right. So it's telling me I should now return the first X number of films in here. So I think I made a mistake over there by passing the first into the into the other one, which is the before and after. So okay. So yeah, something like this. So I want to pass in more films. I think I want to show me three films right now. You can do this. Right. So in my SQL query is just passing in this as a string and passing this in as a variable. So it should be a second payload that will be constructed. Yeah. Okay. Yep. All right. Cool. So do you want to get some query results from here? So I will show you a little bit about the interactive documentation on the right-hand side. So you can also find other things like say of all people, for example, right? All people and producing the list of people. And you can see the people connection. So which means it will be turning the people connection. So you want to try and post that on your own, see whether you are okay. I should do it. Find all the people. Okay. If you want, you can always just comment out this or this first command or controls slash. They can start a new query. So always start a new query with a word query. So then you know what to do next. A quick way of getting this done is to kind of like you can do this for a time. Okay. Right. So you type all, you will show up all the people. Then it will ask you what values you want to get from all people. So in this case, it returns the people connection. What is inside people connection? It looks for page info. It's looking for these attributes to be declared. And actually they're not all, not all of them are compulsory. So in this case, I only need people. So I can just put people here. Right. So again, people has a squiggly line. I'm missing something. It's returning a person attribute, but I don't know what attribute you are or you need to show. Okay. Fine. Let me just do this. Click on person. Tell us what are the things that inside a person class, a person type. And maybe I should get the name and gender. The variable is not really needed. So I can just remove that for now. So yeah. So this tells me all the different characters that are in Star Wars. Let's say now I need to know their height. What would you need to do? Oh, control space to help show the available fields. That's good. I'll try that. Control space shows me all the different that's auto-complete. It shows me all the things. Thanks, Joey. That's very helpful. So yeah, control space shows me all the attributes that are available to me. So let's say I want to get a height of a, of all the characters inside and just select the height attribute. Press play. And also now has the height of the person. I think it's in CMs. Can't really be in chess, right? Anyway. Okay. Formatting. No idea. There's a pre-tified here, button at the top. Oh, I see. It kind of pre-tifies the text. So in this case, you see that, wait, your query is actually not required here. So actually remove the query for you. It's just kind of helpful. Okay. Cool. So you can keep exploring this in your own time and do it. Does anyone have any questions so far? Where did you pop out the query variable definition? At the bottom here, query. Oh, I see. Okay, got it. So this is, it takes in as a JSON string. Okay. Okay. Awesome. So that's the first hand on where we try to compose a graph query and also see how the interactive documentation is there to help us find the things that we need to find. And you also get an experience in, we build, it's all to build in validations. I guess that you do it, because when you see that it doesn't, when you didn't declare the field you need, for example, it ends up with a scrutiny line like this. It tells you there's a syntax error. Right. So there's a built-in validation with this so that it tells me, so if I try to do this now, there's a syntax error, expected name, but not nothing is found. Right. So, right. So at least the name has to be there, for example. Right. Okay. Cool. So there's some built-in things for you. Oh, control shift key for the pre-defined. Thank you, Joey. I agree. I'm finding these hidden gems. Is there a short form to return all the attributes without specifying? Unfortunately, no. So that's one of the, one of the things about GraphQL is the very client-specific UF will be requesting the exact view that you need. Right. So that's one of the key output feature. Right. So it won't be returning views that you don't really, you don't really expect to have. Right. Okay. Cool. That was a very good question, I think, from Katie. Thank you. Like, literally, if the data is very long, and you want to just have like a short key and it is forced to return the full data. Right. Yeah. Doesn't, there's no such thing right now. Although there are ways to create templates that you want, you want to get stuff of a certain type. And usually they'll have all your skills there. You can actually declare templates that would then give you, which you're going to include inside. But that's more an advanced topic. I will not cover that today. Right. So it's like a similar idea of like pre-defining a template and then you reference the template. Yes. So there's a thing called a fragment. So you can create a fragment of this, and then it will basically gives you, I want on, or not really in fragment or something else. I think there's something else called fragments or fragments. So if it's like, if you want to get, you know, this, I'll always be referring to this bunch of views, you can actually create a fragment, which you're going to include into your, into your, your GraphQL query, so that it knows that you will be returning all the views that you are looking for here. So you can combine fragments as well. So it's a lot of, think of it as templates in, having a template for, for commonly requested views, for example, which is kind of helpful. Okay. Cool. So you have experienced some of these things, composing GraphQL query. You also look at how the interactive documentation will help you find out what you can query or cannot query. Of course, the, you see what you see here is a schema of the, what you put, this is only available to me because GraphQL allows a thing called reflection, can reflect on what are the, what are the things available there. Okay. Just think the counselor will go, yeah, that's true. Okay. Cool. Yeah. So of course, this, this, this page or this, this little GraphQL explorer is helpful for depth, but sometimes production may not need this. So what you can do, you can turn it off, turn off this, you can turn off the auto documentation so that no one, no one else can understand or figure out what, what are the things you can, you have exposed. Yeah. So you can, something is all the nice things that the interactive, interactive documentation is helpful for depth to figure out what are the key and attributes available for me to query. Okay. So the benefits talk about so far. So, so with GraphQL, you only, as I said, you can need, you can request only as much data as you need. You don't need to get extra data that you don't really need at that point in time. You, so what you, what will also happen is you end up having smaller JSON payloads because you will only be requesting, I only need two fields and you get two fields back, for example, and the single endpoint. So basically that you don't have to worry about, oh, is this resource is available or not available? Okay. Do I need to put slash friends or slash friend, friend develop on the S or something like that. So you don't worry about that. What's just one endpoint and documentation, as I said, it's true to schema doc. That's what we were exploring just now. And in a way, as you notice just now in the, in that document explorer, you also find there's many types. So in a way, GraphQL implements the type system. So you kind of guarantee that you're getting a number or integer or string or something like that. So all the particular types. So it's very strongly typed. So it's helpful for you. If you're building, you will want, you will be building an application which requires you to have strongly typed. You will say building an application in Java, you need data to be of a certain type. You can, it will basically be that and you will need it to be not nil, right? You actually can put a bang at the back of the string. So like of the type declaration string bang, it means you will never, this value, you will request for it, that value will never be nil, right? So it will be helpful, so very helpful. So this is an example of how you, like, if one of the benefits of GraphQL is you really request things that you need, right? And I'm just going to compare a REST API and a GraphQL API and how they, how you would, the workflow you go about doing in building this service, right? So for example, if you say REST API right now, you reach your friends page, right? And you have this single page app that gives you a list of friends. You have an API call, you see, API slash me, that's friends. It gives me all the friends that I have. It will come in as an array and then you come in with the name and photo, so you can actually do the display here with the photo and name that right. And then we click on the person, you go into that page, you go to the profile page and you make an API call, you should get the API profile slash the user ID, for example. You get all the information you need from this user, like it's their profile name, their photo, oh, we mean the other one, I should have to do the ID as well. Let me just do that quickly, right? So for example, over here, I need the ID, for example. I literally compose this slide maybe half an hour before, so I probably should have done that. Anyway, but yes, right, so it is something you would have and you would require something like this over here. But what if there's a feature request right now, say I want to know if the user is online in the friends page, right? Over here, I don't know whether the person is online. Over here is already here in the profile page, the status is there, status online, but now I want you to be here also. What would be the first thing you need to do in the REST API application? You probably want to go back to the API slash me slash friends endpoint and then make some changes. You probably need to then make sure you're making SQL query to include the status field and you also need to map the status field to the JSON output. So before you would do in a RESTful API, usually the field is not already there. So in a GraphQL example, this will be it may be a bit different, right? So you'll need to include the extra field that you need in the friends page. The friends page API will probably be making this GraphQL query as part of the person type you already have the field available. Because I'm not requesting for it, it's not there. But now I need this. What do I do? I just add all the additional field status. Then you will now give me the person status, right? So this is roughly the workflow. If you're doing a GraphQL application, the difference between the two things as in your GraphQL server already have that field, right? So instead of having asked the developer, hey, could you second developer, could you like include that field for me right now? But we think in a GraphQL kind of situation when a person type is created, person type will already have these fields available to you, right? And because it is available to you, I can now make that request to include and request for the extra stuff that I need, which in this case would be the status, right? So it makes your work as a developer a lot easier. As a backend developer, I already noticed, I will know the different types that we need to expose and the types will all have these values that are there. And for the frontend developer, I just need to request for the extra field that I need, right? So that's is kind of the difference in the workflow between a REST API and a GraphQL API, right? Cool. So now we should do a little bit about creating our own schema. So the basis of a GraphQL service is the schema, the GraphQL schema. Schema has a text document that you create as a way of declaring what are the values that are available, the types that are available to me, and what are the different query operations that I can take on this GraphQL service. So first up, in GraphQL, when creating a schema, he has already included a bunch of scalar types. So these are like integer, which is assigned to the two-bit integer, float, string, Boolean, ID, and enum, right? So enum would be like a enum of constants, right? And then of course, you can also declare your own types. So like say a person is a type, a film is a type, or that you could declare. So you think of it as a class that you just include attributes on, right? There are also other types you can use. You can create a list. So with a square bracket, it means now this is in the array, and it will not now value you can just put a bang at the back of it, a exclamation mark. So the integer exclamation mark, string exclamation mark means that the value returned from this view will never be now, should never be now, right? Okay, so let's try and do something about own. Let's build our own little GraphQL schema. So right now, let's say you are building a database system for a library, a GraphQL app service for a library. And now we want you to create a schema that can be used to create this application for this library. So the requirements here will be a library has many books, okay? And the book has a field for ISBN, a book has a published date, a book can have many authors, and a book has many categories, right? How would you go about composing your own GraphQL schema from this? So let me try and open up an editor. Let me show you how this is done. So the schema, you just start with a type, and type will probably have a keyword like book, for example. And book will then have different things. So book will have some values here. So they will have attributes. So what attributes here is the title, right? And the title will be a string because you need to be a string. And then we will need to have the publish date. Before you use the string as well, because there's no scalar type for this, right? And then we have authors, right? Authors will be a person. So let's make a, so you'll be a, you should probably turn a bunch of things called person, right? So now we need person here. Or is person a good value or author is a better word? What do you think? Julia, what do you think? The author a better word or? I think author would have a fish. Okay. So author, author will have a name, which in this case is a string, right? We have other things later on. So it tells me this is now going to return me an array, right? So maybe the book has many categories. And you probably have a real category type as well, right? Which will probably have a string, oops, sorry. Name and string, something like this. So this will be the declaration of different types of, different types that we have available. And then the last thing we'll do is do a query. The query here is like a reserve, reserve word. So it tells me these are the different operations you can get on this API. So let's look for books, right? So this will be the first operation you can do, right? When you do, like say what's up, remember this, you remember this API here, all people. So this is the operation name or the query name. So this is equivalent to this books here. So I can also change it to say all books. So it won't be more explicit, right? So all books will return what? An array of folk. And that's it. Here's a simple graph QL schema, right? An example. Actually I do. Oh, I have to be tight also, sorry. Sorry. Sorry. Yeah. Right. So here are the, so this is a simple graph QL schema, right? So where we have a book type, have a category type and an auto type. At the same time, we also want to declare the types of query you can make on this graph QL server. So in this case, we'll show up as all books, for example. Does that make sense? It's all books, that location actually can be anything. It's more like a name for a variable. Okay. Yeah, it can be a name. It'll be a name for any query operation that you need. So in this case, I want to also probably want to also allow me to do like a book, which gives you one book. And in this case, it'll probably be, I think you can, I can't remember how to declare this. You can probably pass in attributes like ID, for example. We haven't actually included ID here. So usually we'll want to use ID, for example, or in this case, we actually have ISPN. ISPN is like an international book identifier. So in this case, instead of integer of what we ISPN, for example, and you give me, this should be a string, which I mean, get back to you on this. I don't know whether I can declare this correctly. Let me check with the graph QL documentation. Schema, schema, schema, schema type. And arguments, arguments. There you go. Query and query with, ah, there you go. Something like this. Oh, actually I did correctly. Okay, can. Right. And it says here it has to be, not be now. Okay, can. So yeah, so something like this. So it has to, and this string cannot be now. So basically your ISPN must is a compulsory field. Right. Cool. Right. So this is how we go about creating our own graph QL schema. Do you all manage to try to do this on your own? No audience following along? Okay. Okay, cool. So, right. As it says here, query type is special is a list of all the available queries that that client can execute along with the return types of each. So in this case, the books, the query returns to the way of zero or more books. So in this case, here, we change ours to all books. So that's all books. An array of books. Okay. I'll probably commit this later and share this on the repo. I have a, I'll share this on the repo in a while. Okay. Cool. Right. So that is composing your own schema. So once you have a schema composed, right, it's actually quite easy to kind of figure out what you can do. So what will happen here is once you have this schema, when you use a graph QL server that actually supports this, you will actually automatically compose and build this documentation for you, which is actually very helpful. Right. Okay. As you can imagine, once your database gets rather huge, it's probably can also rather big as well. So yeah, you may also wonder, is this actually exposing, how is this different from your database schema? It's quite close to your database schema, but this one actually also exposes things like relationships between your different objects, which in a way will be helpful for developers as you have developed, if you are developing, say a single page or an application that requires us to pull data from you. So when they can see this schema file, it's easier for them to understand how the whole thing is put together. Right. And for them to also build applications around it. Okay. So you can read out more about schemas and types at the graph QL site. So I'll just share this, I'll just share this link. So you can actually read out more about this. So there are many different types, which I have not talked about, the type system, there's talk about query. There's also another type called mutation. Mutations are essentially the reverse of query, query is to find things. Mutation is actually to change things. The mutation say I'm updating. So what we do previously in the recipe I am called, do a post to some, something like say, example would be Anything besides a get is considered like modification, right? Correct. That's correct. So in graph QL, they consider all these things that are not reading things as mutations, right? So you're mutating something in a database. So this would be another result for mutation. So mutation will be, so you can declare a mutation that would take in fields. And then you can also do require input types. So you can actually create types of input. Like in this case, I'm actually doing creating a new review, right? The input type is called review input. And review input is essentially required as a field for creating a review, for example. So mutation would have things like create review, update review, or swimming along those lines, right? So these are more mutations. And this is where the variables will come in very helpful to park people in things. So in this case, I'm passing in a review input, a review input is actually structured this way, which has two attribute stars and commentary. So basically in your structure of thing passing in, you must also include your star and commentary in here because these are the two required fields here. So you create input types. Think of it as like creating your forms. And this is kind of mapping to your forms. So input type is like a way of like ensuring that your SQL server retrieves data in a particular format, which it already knows about, right? It's usually helpful. So it also enforces a certain class type, class of certain like type system for inputs as well. So which is actually very helpful. Okay. I don't really get a part of input. What is it? It's like a equivalent concept of defining a variable for query? No, it's for input type is more for like mutations. So they say I'm actually inserting, in this case, I'm inserting a new comment review for a movie. So the fields required for this new review are stars and commentary. So as I'm creating this review, the method is called create review. And inside here, it requires you to put in a review input. Okay. So it helps you to shape, structure the shape of your inputs going into the service. Which is kind of helpful. Yeah. Okay, anyway, that's going a bit too deep already. So additional. I actually have one follow up question. So if it's like a complex one, this input is a simple one, right? And then it can be embedded with another input. Yeah, I guess you could do that too. You combine inputs or you can have input that takes an array for example, you can do that as well. Okay. Yeah, so it's quite powerful. Right. Okay, so that's the GraphQL schema. So next thing, next step for us today is I try and build a GraphQL client. This is like, it's fun. Does anyone need a break? No? Are we okay to carry on? Okay. I guess we should go on. Alright, the next step will be to help, will be for us to build a GraphQL client in React, right? So we're using React today to build a simple client that talks to the Star Wars API, which we have been interacting with so far. Right. So the task is this, we're building a simple React app that shows all the movies in the Star Wars franchise. We'll also be using the Star Wars GraphQL API, right? So instructions are actually here in my Git repo. So if we go to this Git repo now, there are two instructions, here one for two exercises, one for creating the client and the other will be doing one where we create our own server. So click on the one for the client. Right. So this will be, the thing will be extending to do, we'll be using this service called code sandbox. Have you all heard of this service before? Okay. So it's actually helped to like create like applications to the cloud. So you do actually need to host it and build it in a local machine. Right. So let's follow through, you can follow through along with me with the client, with really the client. Right. So first up, we go to code sandbox, which is this website. So you probably need to sign up for the account. Right. So I would recommend getting an account quickly. So I'm using my GitHub to log into this account. So once I'm logged in, I should be able to create my own sandbox. Thanks, Joey. Joey is like my teaching assistant. I love it. So yeah, Julia, you don't do anything. You and Joey do one thing. But thanks, Joey. We really appreciate this. You know, if we are a professor, then I would be one wiping the black boards for you and Joey would be the one picking chocolates for you. Anyway, let's try this now. So you will go to the, yeah, go to this. So once you click on create new sandbox, you will, I will ask you for like which template to use. Right. So you scroll down, you'll find this in the official templates. That's one for react. This one. Right. You will have your account here. So once you get into the account, create a new sandbox. There will be a bunch of official templates. The one that you want to use right now is the react template. So we click that. It should create a simple react application. And you should see all the things appear in the little editor. Let me just do a quick introduction of our code sandbox. The code sandbox on the left hand side, you see all the files that are created as part of this template. So you'll find, you'll find that there is a package of JSON as you would expect with a Node.js kind of a thing front end application. There will be an index.js, which is kind of like the index file. And then as it includes a component, which is the app of JSON, which is the first thing you see. Now, first is a style of CSS. So this will be the real files of the left hand side you can access to. Once you click on any of this file to find it in your editor, you'll see the screen in the middle. So here you can actually make changes to the file, just like you would with your own editor in VS code. And once you edit the file, you save it. The preview will appear on the right hand side in the small little browser window like this. So it's like a built-in browser into the code sandbox itself. So a quick simple way of doing this is like I can go in and change something, say like hello world and save. You'll see that you will show up on the right hand side, even including my typos there. Save. Yeah, you'll show up on the right hand side. So I think it uses auto reload, I think something. Is it auto reload or what's it called again, Joey? Can't remember. Yeah, anyways, auto reload thing. So you load all the or reload the file so you can seriously on the right hand side. Okay, cool. So once you've got your, does anyone have any other, has any problem getting into the code sandbox? I think it's a bit late for me to ask this, but can you understand my English? I just want to verify. Am I speaking too fast? Am I speaking too slow? Okay, just to make sure we're okay. Thanks for having me. Very helpful. All right, cool. So we're building this right now. So the first thing I want to do is add the new dependencies. The new dependencies that we need to add are GraphQL and then Apollo client. So these are two new dependencies that we need to add to this project. So you look on the left hand side of the panel. There's actually a little section here for dependencies. So the first thing we'll add is GraphQL. You can copy and paste that in. Right. So the first thing we, that's the first thing we need to click that. Next thing we need to do is the Apollo client. So notice there's an add sign in front. So it's kind of like a group of libraries from Apollo. It's like a company that builds a lot of GraphQL related products and libraries, which are actually all very helpful. So we'll go to the bottom, add Apollo slash client. These are the two components or the dependencies you need to add here. You see that the components added when you look at the package of JSON, you'll see that they appear somewhere up here. Correct. This too. Okay. So you did it correctly. You should see total of five packages in your application. Five dependencies rather in your application. Do you see it? Great. Right. So once you got this, you can now get ready to start something. Let's go back into the, this I think should be going into the index.json. Right. So let's try and add a GraphQL client. So you can just copy and paste the two import statements on the top. You can add it to somewhere up here. Right. And then do a little bit of magic. So next we need to, so first you need to import the two, the libraries that we need from Apollo client, which are Apollo client and in memory cache. So it's actually done some caching for you, which is quite nice. And GQL will go a little bit, GQL is kind of like a parser. You will actually pass the string that's inside here as a GraphQL schema string or in this case, it's a query string. Right. So this GQL is kind of like a parser. So these are the packages that we need. And then we need to create client. So the client will tell us where to connect to to get the schema and all that stuff. Let's do that. So this will create a compose, this will actually create a GraphQL client, which will connect to a URI. This URI is actually the same one used by the Star Wars API. Right. So this is what we need here. And then the next thing will be the cache. We're telling you how we're using in memory cache for now because we're not going to use fancy. Right. So next thing we're going to do is we'll do a test to see whether we actually connect to the GraphQL API. So we'll actually do a real test with these few lines. Right. So we actually add it here. So what it's doing right now is from the client. We actually run a query. The query that we're passing in the first attribute is the query string. So this query string, we're actually getting all the, all the films we're getting from the edges and nodes and the attributes of retrieving our title, episode and ID. Right. So we can try to actually run this in the other, in the other client. We go back to here. Right. And you pass this in here. You actually give you the exact thing that we were looking for. Right. So we're doing something similar to put it here and then save the file. You probably won't see anything up here because what we're doing here at the end is actually we just do a console log to show the results. So we click on console. We should then see the objects that we have just retrieved from the API, GraphQL API. So you actually show there'll be a data attribute, all films and edges. And then you'll give us the node. Node will have title, episode, ID and release date, which is actually the exact stuff to where we are getting here. Okay. So imagine so whatever. So basically what the workflow usually would be, I would use this GraphQL Explorer to figure out what I need to get. Right. And once I have that, I got the correct data I need that I will probably copy into my client application. We should then ideally give me the same result that I'm looking for. Right. Cool. So we have, do you manage to get to this point where you can see this in your console? Cool. I see some kicks. So I think it's all mostly okay. If there's any problem, please do, is there anyone stuck? Raise your hand if you're stuck. If you're not, then it's okay. If you're not stuck, okay. Penivias means not stuck, right? Okay. Oh, are you stuck? You want to unmute your mic and help get help you? You don't have results. You probably see at the console side, you see this console? Hi, this Valerie. So yeah, for my case, right, I have the console, but it came out data object loading force, the network status is seven. So yeah. So I'm not too sure where it's going wrong. But when I tried to install the dependency Apollo client, right, initially it came out dependency was not found. Then after that I tried a few times then it came out okay. I see. Yeah. Do you use, do you use Apollo slash client? Yeah, I did. Yeah, but yeah, but you say that I'm quite okay, right? Yeah, I also have data object loading force. I'll go open. I think I need to open it. Yeah, on the left of the data is a little triangle. Maybe you can open up the object. All right. Okay, then we should just type name. Okay, I got it. Ah, okay. What was the error? Okay, explain to us. The error is, did I click further? Didn't it drill down? Oh, okay. Thanks. Yeah. Oh, it should open up the ICICS. Yeah. Right. Yeah. So if you click this, you should appear here again. So you have to click on this one and data. And then all yeah, so it basically is like a drill down. So yeah. Okay, no worries. Great. Great that we managed to solve it. So okay, so this is just to ascertain that we have connectivity to the Star Wars API. So this is great. So actually this part we don't need any more. I can just kind of comment it out first. So next part you want to do is want to actually now make it part of the application to make it display something in the text. So what I want to do first is to now pass in the client into the into our application as a provider. So like a data provider so that we can now use this information in our use the client anywhere that we wish inside the inside this react application. So let's put this in first. So we're adding the Apollo provider and then you should wrap you scroll down. You can see your application here should wrap your application around a Apollo provider like this. So you just need a copy of this line. Right. Right. And then make sure it's close up low provider. Right. Oh, okay. So this you might see this little problem here but because we use we detect the GQL but whenever you use it is still okay. We can just comment it out right now. Yeah. Like so. Are you going to go wrong? Where is the open tag for app on the Apollo provider? I didn't see the open tag. Yeah. Yeah. No doubt. It's 37. Right. Oh, this is the app. This is a self-closing tab. Oh, okay. Nothing here. Okay. Yeah, it's a self-closing tab. So you don't need a closing tag. There's a space between. Okay. Yeah. The self-closing tag in HTML terms. Okay. But what is it used for? Can we delete it? Because we are not playing anything. This is the application. This is your referring to your app. App.js. Oh, okay. This is your application. I'm new to JS. So yeah. Okay. This is react. Okay. So for those who are not familiar with react, what we are doing here, we're returning a JSX, which is a react component. And this is, app here is referring to the app.js because we import, if you look at line number four. Yeah, imported app. App from app, which is app.js. App.js is actually rendering the entire page. Or this page on the right-hand side. Okay. So this is how react builds things. There's components and then the components will be rendered on the screen. Okay. So we're wrapping this app component in a Apollo provider component, which then gives us, which then we can pass in the client into the application itself. Right. So anything that is inside the app would now be able to access to the Apollo provider to then make up a GraphQL API calls. Okay. So now we should now create a new component. So we need to create a new component on the left-hand side. So we will right click on the SRC over here and just click on create file. You'll be creating a new file here. And let's call this the star wars.js. Right. So you right click and click on create file. You should be able to, please put it inside the SRC folder so it can be visible to our application. Right. Okay. So here we'll be creating a new component and you'll see on in the instructions do you see that the full example of what I should, what should go into your import in your star wars.js. First of all, we need to import the react component so that react library so that you can actually use it to create react things. Next thing I do is to get in the GQL, which is how we have passed our GraphQL statement. And at the same time, we also use this react hook. There's a react hook that is provided by our Apollo client, which is called use query. Right. If you're not familiar with react hooks, it's okay. Think of it as like a way of helpful callback. Helpful, it's like helpful methods. Think of it as helpful methods in react. Right. And then the next thing we do is create a new word declared constant for all films. This is slowly to be the graph QL query that we're making. So remember to wrap it in the GQL and back pick all by the string. So this is the actual graph query that we're using. And then here is where we create our component react component itself. In react terms, it's called a functional component because it's using a function to build, to declare the component. Right. And we're exporting it by default. So it actually becomes visible to whichever class that will import this later on. Right. So export fault. And then the function itself copy whole thing in. Right. So this here will be our, the react component that we will be using later on. Right. So let's recap. So first line is to make sure that we're declaring we're making a react component here. We're importing the use query, which is a react hook custom hook created by Apollo and GQL, which is how we pass the graph QL query like this. And now we have this constant call all films and all films to be used inside here in line of 19 over here, which we will use the use query. So it's how we kind of like use the react hook to kind of like declare the react hook. So what happens here is when we use, do we do this? It passes us three things. It returns three objects which are loading, error and data. So loading is telling me that whether it's actually the data is actually loading right now or not. It's probably a Boolean. Error will be basically an error object. If it's, if you didn't make, you didn't imagine the actual request to graph QL or well, or if there's a syntax error in your graph QL, you actually show up in the errors. And then the data will be the actual data coming back from the graph QL server. Okay. So basically use query will basically somehow hook into the client that we declared in index.js. And because we use the Apollo provider, it actually now helps us hook into the client to do things. And because now we have that, and then once we have data, we populate it with things, we can now use stuff that's inside data. So you notice just, you notice just now when we do the cultural console, we'll be drilling down from data, all films, ages, so it's roughly the same thing here. We're getting a node. And then we're also getting the local variable, local values coming from node. We're destructuring it into local variables, title, episode ID and this is the HTML that we will show up later. Okay. So this is in a nutshell what this file is about. So this file is called Star Wars or JS. The next thing we need to do is include it into our application JS. So now open application JS. On application JS, you find that there is all these things here. First of all, you import it. So you can use copy this line, import the Star Wars file, which will be the content of the Star Wars or JS. And next thing we'll do is now use the component. Use the component is just a matter of declaring it like how we do the other declaration. So over here, just like that. And magically you'll find that our, once you save it and reload it, you'll find this will show up. So there's a, there was a short half a second where the word loading was displaying there. So it's actually hitting this point. It's actually still loading the data from the GraphQL. And once the data is in, it actually, then lets you, we render this. So we should be just all these things here. Okay. Do you manage to do this? What is the loading like for error and the data? It's pretty much self explained, like it explains itself for loading. What do you say? You're still waiting for a response from the server. You actually make an API call out to, because it's making a GraphQL API call out to the Star Wars API. So what it's doing there is waiting for the response to come back. Right? So it's making asynchronous call in the background to the API. And the API hasn't returned the response yet. So it hasn't returned the response yet. It means I am still loading the data. So it's more like a status. Yeah, it's a status, correct. Okay. When you were using a use query, you use a little hook to query it large. And is it like a default return result? You have to include a loading error and a data or you can simply get one. These are the three, these are three things that will come in. So, okay, use query will actually return you a JavaScript object. And inside JavaScript object, we'll have these three attributes. So what we're doing here with this query line or this query basis is actually de-structure from the return object into the local variables. Okay, understood. Thank you. So it's, think of it as, I'm, think of it as I'm, so in long form, it's a loop, something like this. Right. And then we... Okay. Is it possible for us to take a full look at the result, like the raw result in a return? Sorry. Oh, yeah, you can. So then, you know, you see the, you understand, okay, what's exacting it. Okay. And we can do that. So let's look at over here. So we can do console log and look at data. That's it. Let's clear this out first and do another reload. Okay. Great. Model star was not found. Probably something wrong with the import statement. Did you include the... Let's see. Did you include the export default here? And it's also case-sensitive or it must be, because when you do the app, right? So this part is case-sensitive. So it has to be the same case as this. Well, you can always try and let's try to do this again. So what you can do is, actually, we will auto-complete for you. So from... And then you must have a dot slash, then you will just show up here. Do you see it? Copy-paste it. That's correct. The file name, you get it correct also. Do you see the file? It's checking. Do you actually see what the file is? If it's not saved, it will be a circle dot there. It was still unsafe on each of the files itself. And declared here, model star was not found. Yeah, Joey, you want to share a screen? And you may show us. Let me... Sorry. Not me. I was wondering if Valerie wants to share her screen with us so we can help people. Okay, I'll make the... Okay, I'll stop sharing my screen. Valerie, you want to share your screen? You can try. Okay, I'll try. Okay. This is correct. Index of JS. Okay. But I mean that Apollo provided... What's this? Apollo provided, won't it? Did you include the Apollo provider in... Do you import the Apollo provider? Scroll up. Scroll up. This side? Yeah, do you import Apollo provider? The point is referring to... Where is it? So the error is in line 35, right? You scroll up to the top. Do you have the Apollo provider imported? Is it on your slide? No, it's not. I think you left it out. I left it out of that part. Yeah. Okay, yeah, go back. In step five, look at instruction step five. Okay. This part? No, no. First line. First line. Yeah, this one. Yeah. I thought I saw it on her board. Is it? I think so. No, she only had the Apollo client and memory... Memory cache. Oh, okay, only one more. Yeah. So I need to put one more there. Okay. I think I'll just place it. You can put it on top. On top. Yeah, okay. You put it at 9.8, I think. Okay, okay. 9.8. Yeah. Sorry to help everybody. No problem. It's a good process. Should be done. Nice. Yeah. Let's go. Let's go. Let's go. Yay. Okay, so sharing. Awesome. Great. Thank you, everybody. All right, let's go there. All right. That was fun. Thank you. Right. So does everyone else, anyone else have any problem with your example? You managed to get the Star Wars movie showing up on the list. So once again, if you want to debug, you can actually add the console log here. Well, of course, make sure your console log is actually not checked into your report. So that at least you're doing stuff. You don't want to expose this to the outsiders, so you just need that before you check in for production. Okay. Or yeah. Great. So this is a quick example of how to create your own GraphQL clients. Once we cap what we actually did. So we added the GraphQL and Apollo client as dependencies that we also added. So we created a client here. So this is basically telling us how to which server to connect to. And then we included this client into a provider for React. So then any of our components in React can now use, can now get data by reaching into this GraphQL client. And then we create a component. It's called Star Wars components. Star Wars component is for displaying the results from the GraphQL request. In this case, we're getting all the movies from the Star Wars franchise. And this is the query that we put in. And because in this, we have actually tested this as well in the in the GraphQL explorer on the Star Wars API. So we should check this and you know, this is the result. And yeah. So from there, we can, there we created our component itself, which is actually using a React hook that is provided by Apollo called reuse query. To use query, it basically does connect to the query component, the client component that we collect in index.js. And then we basically able to make the call to the GraphQL API to give us this result. And this is how we're renewing it right now. So we're putting the episode here, where we can state, right? Who? Oh wait, Michael. So how does Star Wars.js, they actually can refer to index because I didn't see any import from index. It's passing through the Apollo provider like this. So anything under this provider would have access to the client through the React, through the use query react hook. Yeah. So as long as you use this, you will then somehow hook into that provider and figure out how to use the user client inside the provider. Yeah. But then you don't import anything like Apollo provider here, do you? It's actually, I think it's passed down to all the child components of Apollo provider. So in this case, it passed down to app and then because app includes Star Wars and Star Wars now have inheritance somewhat like that. Yeah. So it's a it's a React thing. So it's some magic here. If you want to know more about the GraphQL client, when they were using, it's actually from this company called Apollo, Apollo GraphQL. So they are one of the more prominent companies behind the GraphQL libraries for servers and clients and stuff. The stuff that we're using today is the Apollo client. So you look at Apollo client, Apollo client is actually quite a few times a client as a JavaScript client. So they also provide the iOS client and few others. But for us, we usually go to the developer and doc section and over here, you'll find a whole bunch of tutorials for creating a React, react clients, iOS clients and so on and so forth. There's also a very helpful step by step tutorial you want me to go through. So the tutorial that we're using today is actually adapted from what they have here. I actually went to the React component and kind of like somehow for I can't remember where I found it. It's somewhere here. So anyway, this is the client that we're using. Cool. Let's go back to our slides. Great. So yeah, so we're able to build our own GraphQL client in React. Next part, which is probably the last part, we'll be building a GraphQL server. So this is where it gets a bit more fun. So we'll be actually building our own GraphQL server now and using GraphQL, the Apollo GraphQL library to build our own GraphQL server. So the server needs to know, so for the Apollo server needs to know how to populate data in the different fields in your schema. So that's when we provided the schema like this. It needs to know how do I get this information? How do I populate all this information? So the way that the GraphQL server kind of figures this out is using this thing called Resolvers. A resolver is studying more than a function that asks that they're kind of like, oh, I'm looking for title. Where do I get the title from? I'm looking for all books, whether I get information for all books from. So the Resolvers are an important concept in the server side. And okay, and we'll go through this and we'll try and share this with you in step-by-step kind of way. You go back to the to the documentation, to that GitHub repo, there's a second one, which is writing your own GraphQL server. So I can follow this here. So what we'll be doing right now, we'll be creating a books, a library books, GraphQL server. So we're using code sandbox again for that. So let's go to code sandbox, and maybe we'll create a new project this time, right? So we click on create sandbox. So now I'm creating a new sandbox. You click on the create sandbox on top, or you go back to the homepage before we can see it, see as far as an option somewhere. So I'll create a new sandbox now, and we'll be selecting Apollo server, right? So I selected Apollo server as the template. I shall now, and I'm now presented with the project. So the project here already has the Apollo server installed, the GraphQL and the GraphQL tag. Just a quick overview of what this thing is. So in the graph in the Apollo server, so first of all, you need to import the Apollo server. And then you do GQL. So the next thing we'll do is to construct our schema. So like what we did just now, we did the hands-on session over here. So basically it is to barely copy and paste the schema later on. And then once you have this schema, we need to figure out how do I populate data from hello. The way to do this is to, you need to set up a bunch of resolvers, resolvers which will look at query, and query will basically look at this and refer to this hello. So this is kind of how I, when I do, when I do a GraphQL looking for word hello, you basically tell me that the word hello, hello should then now call resolver and the resolver should then give us the result in this case. And once you have the type definition, which is the schema and resolvers, we will actually create an Apollo server instance like this. And it will now become available to the Apollo server. And then now I click on, now it's serving the application. So once I have it running, I should then see something like this on the right hand side. So this is the Apollo GraphQL Explorer. So if you look at this, it's actually very similar to the Star Wars one. If you look at docs, you'll hear tell me what are the calls that are available. So in this case, the word hello is there. And this will return a string. So to try that, you can go and do this. Hello. Right. And then click on play. You should just say hello world. Right. Can you try that? Right. So once you have this running, so next thing I do is now we're going to implement our library books thing. So I've also, does everyone else have their Apollo server running on the code sandbox? Anyone else have any problems with this? No? Okay. So let's carry on. So first thing I do is now we want to update the definition. So over here, the query type has just one query. So we need to put in some types here. We're going to put in some books. So that's one, this one, what we'll do is so copy this, the type books and put it inside here. So now this one will have the type books. And at the same time, we also update the query. So we'll actually add this additional query type called books. Right. So we declare a new type called books that has two views title and author. And then we also add in a new query that will be exposed to us later on, which is basically the books query. Okay. So this is how this first step is update the schema. The next thing we do is to add in a constant called books. So it's like the database, think of it as a database. So instead of calling it into a database, I'm just setting up a local attribute called books, which basically has the fake data. Right. So I'm going to put this here. So books will now have two has two records inside, which are, which has two titles, which is title and author. Yeah. If you want, you can also add a third one. So like I'm a Harry Potter fan. So I'll just put a Harry Potter fan. So I'll just do what's the first book, philosopher stone author. Okay. So this is as many records as you want. So it's fine. And the last thing I want to do now is so we have updated so versus recap, we've updated the schema, which now has books, book type. And then we added a new query called books. And we added some data here. So this is the dummy data we're using later on in the graph QL. And last thing I want to do is update the resolver. So the resolver needs to be kind of like mapped to the graph QL query itself. So over here, I have two queries. One is the hello, one is books. And you can see my query here already knows about hello. Right. But now it doesn't know about books yet. So I need to include that inside. So I need to create a new line here and call this books. In this case, I'm just going to make it call a function in a function that should somehow return the books attribute which is over here. This one by right takes in a few arguments as well. There's roots, arguments and contacts. I won't go into too much detail, but think of it as so it knows about the environment that is in what are the different things that we passed in and what are things available to you. So yeah, so this more when you start to build a actual graph QL server, this will become more important. But right now, today we just be returning just the books from the dummy data. So imagine instead of calling the books attribute here, we could then in the production system, you could be connecting to a database to get data and return the ORM object, for example. Right. Cool. So that's actually all we need. So right now, if you save the file, we should now have, we should now have this books exposed to the graph QL server. So you look at the docs section. Okay, it's not here yet. So what we probably do is we'll refloat this. Right. So if we reload the browser on the right hand side, you're still going to reload here. You should only click on docs. You should now see the second of the second query that just showed up is the books and books now returns books as an array. We click this, it will show me the type of thing that will return will be a book object that has a title and author. These are the two attributes that I can query for. Okay. So let's try and find the stuff inside books. I'll look for books. Right. And I'll do control space, which you probably tell me to auto complete. Let's get the title first. Quick play. I should now just have the three books available here. How did you manage to get your graph QL server running and providing you the right data? You're right, Joey, as a, yeah, so if it's a more complex application, you would then be connecting to a database. How is anyone, did everyone manage to get your books in? Thank you, Valerie. Thank you. So yeah, so now if I say I want to get the author, so I'll just do this type author, you know, just for fun, right? You manage to get this to run. So he has been telling us this. Let's look at our original query that rather the schema that we had just now. So we created an author. We also have another type called author, another type called category and another type called books. Yeah. So instead of returning one author is doing an array of authors. So what do you think? Do you think we can try and implement the author here? Let's try. So what do you do first? Anyone can guess? Anyone want to make a guess? If I want to introduce the author into my system, what do I need to do first? So I probably want to include that into my type definition. So like this. So now I have an author here. So now I can use this later on. And maybe in here, so instead of passing in a string, it should then return a square array of author like this, which means I will need to return a bunch of authors. But how do we do go about doing this next? So let's have an author and this one written books. Okay. So this one, I probably want to update my data. So now it's the longer just returning me this before we will return my name. So I will update my database, my pseudo database like this. And probably should return me the code. I hope it will return me the correct thing because I should never try this before. Right. So it's now returning me instead of a single author as a string, it's now returning me a new object type for author. Right. And it should then return me this. Let's try that and see where that works. Okay. So if I open this, I should be able to see that it's now giving me a book in the documentation. It tells me a book should return author. An author is an array of authors. An author takes in a string on name. Okay, got it. That's a rather return the names string about the author. Okay. So which means now in my declaration, I need to then ask for the name. Right. So basically, this will return, is to now return an array of authors. And each of the authors should now have a name inside. So I can hopefully this will work. Hey, it does. It managed to resolve the name. So that, okay, I'm turning off check here. So by right, if you're building an actual application, the author should then have his own resolver outside. And author will then be able to get the data that you didn't use that author resolver to figure out who the name is. Right. Right. So that is, so let's say I want to add a second author to the first book, Awakening. I don't know. I have not read this book before. I'll just take the names here. Right. And now if I do this, I should see Julia's name up here. Right. Cool. Yeah. So do you, does everyone manage to change and update their system to support this new schema? Try again. So just recap what we did was we added this new type, added this new type called author. And then I modified author to return the author as an array rather than a string. And then I also updated my database to now include this information. So what if for some reason I still have, I don't know, maybe what if we have another one like say, but in this case, I forgot to do this. Well, I think it will happen. If I forget to return the author in this object, what do you think will happen here? You know, why the filter out a lot of record? I don't know. Let's try. Let's try. So let's see the last item here. Oh, no. Okay. Yeah, before to now I guess it's a string. Yeah. So because it doesn't pass it anything, you can actually force it to be something, I think. Right. Now the problem will filter out. It may crash because now the data, okay, because I'm giving it a non now object. So again, he showed some error. So, but yeah. So at least I must have an empty, if I put in an empty one, like say empty array, so let's see what happens here. Now it's normal. Yep. So now it's just an empty array. Even though it's supposed to be, yeah, so it's not, it's never going to be now, cannot be now. Yeah. So yeah, as you want to force it, otherwise you can do it like that. You can also do this right, like book will always have a title, author will always have a name. Yeah. So you can do this as well. So they can actually kind of create a form of like validation. Yeah. In, in our application at work, we put exclamation mark after all the fields that we, that we wanted to be, to be there. I see, because cannot be now. Yeah. Because in our application, the book had to have an author. So you couldn't, yeah, you shouldn't put a book in the database without one. I see. Yeah. So this is like one of the ways to get enforced. It is like also guaranteed to the client that, hey, this will never be now. Right. So kind of like, in a way, having this way also helps you, you're invading clients that are more predictable and resilient. Okay. Like enforcing, yeah. Yes. You're enforcing a schema of sorts. Great. So I, that actually comes, brings us to the end of today's workshop. So let's do a quick recap. We managed to, I introduced, I introduced about the benefits of graph QL, you know, why people use graph QL and also talked about how graph QL is basically just another rescue API. And also do a quick overview of what a REST API has and points, methods, headers and data. And they will have operations like credit operations, like create, read, update, delete. So this is how it looks like in the normal REST API. And if graph QL is basically roughly the same as an endpoint, which is like something slash graph QL, or you can make anything else, right? It depends on the application. You can do user, either use posts or get to get your stuff. And the data coming back will probably be JSON. Or if you're sending data over, you probably also be JSON. And we did a quick hands-on about how, on using a graph QL client. So it's coming built into Star Wars graph QL. So a little bit about the benefits. You know, it's actually based on the request. So as a requester as a client, I can request only amount of data that I need and not have to overload or load too much things. It ensures your return payload will be smaller. So we have a helpful and you also have just one second point. You don't have to worry about, oh, is it a friend or friends or whatever, right? Or books or books. Don't worry about that because it's just one endpoint. And documentation is actually very easy because you look at the schema. It comes with it. You can just kind of like see what other data you can retrieve and get. And it's kind of strongly tight. So I also show some examples of how a workflow would differ from between the REST API and graph QL, right? When building something like this. Yeah. So we'll talk a bit about the graph QL basics, the schemas and types. As I said, the graph QL is strongly typed. So there's different types that are built into the system. You also could declare your own types, which are like your classes. You also return string and you also have none now values. Also talk briefly about input types, which you can dive a bit deeper using going through the graph QL documentation. We also did some hands-on by creating our own graph QL schema of a library system, right? And of course, query is a reserve name. Another reserve name is the mutation, which is for updating things on the server. And we also did some quickly build our own graph QL client in React in using code sandbox, as well as our own graph QL server. So I hope you all today had a deep dive into a graph QL on its own. And I hope you all learned quite a few things here. And yeah, so I'm open to questions. Thank you. Appreciate it. Thank you very much. If you have any questions, you can definitely email me or message me on telegrams with some of my contacts. My telegram handle is, you want to get to me on telegram, my telegram handle is Mike Cheng, right? So you can put me there. And finally, for Julia, you can get Julia at this telegram handle. And I would recommend you join the telegram group so that we can actually get, share a bit more information. If you have problems, join the telegram group just as do any extended resources, learn more about graph QL. That's a very good question. So I would say going to the documentation site on the graph QL page. So I'll just share this here. Go check out the graph QL page, which has a lot of details about how we should organize your schema and how we should go about using this stuff. And the tools, let's say, so I say a photo graph QL is basically the main thing that I go to, especially if you want to do something for graph QL for React, there probably is something here developer talks. And there's probably something in here JavaScript, yeah, upload client. So fetching data and all that stuff, all that information is here. So you can check it out how the React flow react stuff getting started actually. Yeah, this gang side also gives you a quick overview. Actually, I stole the tutorial from here. So a lot of these things that we went through for the client was actually taken from this part. In the example here, they use a currency exchange system. So there's a different API call that you use, versus what we did was with Star Wars. We can use, but the information is mostly here. Learn, react, oh gosh. Learn, react. You can actually try to use the, I think the documentation here is also quite good. There's probably quite a lot of resources you can check out. Yeah, the reaction documentation is actually quite good. You can also check it out. Any recommended way to write tests involving graph QL or use standard JASMoc? That's a very good question. To be honest, I have not done any production applications yet, but I would suspect if you're building an application like this, you will probably have a each of your application bits, graph QL bits, are actually done using a resolver. And this is something you can test to resolve it. So if you are expecting my resolver, in this case, this could be instead of doing this can do like, this would be a constant. So something like this. So you have a books funk like this, you can actually do tests on this. So imagine breaking this, moving this into a different module, then you can isolate this module and test this module. Probably you just use your standard JASMocs. I think JAS test will definitely work on this as well. Yeah, so you can actually resolve, just test the resolver on its own rather than the entire application. That would be probably the way I would recommend testing this. I believe Apollo may have some react specific tests, test, test examples as well. So you might want to check it out over here. Using type you can use type script mocking, use capabilities, developer tools, there's a whole bunch of things that are written here in Apollo documentation on this. You can also check it out. I hope that answers your question, Eric. I have one, Michael. So when we tried to create an Apollo client, basically we are opening a resource right for the server or client to connect. But it never shows or we never actually did a menu close. And how does it work like on the knees? Manual close of the client. Yeah. Like the connection is open. I just I'm thinking and I'm comparing to HTTP, right? So you open a client, you open a connection for them to connect. But after a certain time, you just sort of close. Otherwise it would be always open. I talk about the server side or client side? On the client side. Okay. So client usually will auto close. I think in JavaScript, we use the library like XCOS or something. You will actually auto close the connection once. Auto close as well after a certain time. After the request has been completed, you actually close the client. I think I'm not sure whether there's any form of connection pooling of sorts, but it's usually not a constant connection to the server. Actually, okay. There's actually another feature of GraphQL, which which is we are going to cover here. This is concept of subscription. Oh, so it's like a pooling? Yeah, it's kind of like a pooling. So you can just subscribe to events on the server side. It's not here. That's interesting. It's a rather advanced concept, but it's actually one of the capabilities of... I read about it a lot as well. But I'm not sure how it works. It's either like you subscribe it and then any event or update will be pushed to your end. Like that? Yeah. Let me see if I can find information about that. Okay. GraphQL subscription. Yeah. Subscriptions. Clients. Server side. Subscription. Right. Fetching data is in the subscription. So you can use the server side to do this. So it's like a pop-up. So you basically, it's a pop-up kind of a thing. So it publishes an event and it will then flow down to the clients. So you have an Apollo client. You can say, I want to subscribe to a particular event on the server side. So once there's an event on the server side, say a book has been updated and then you basically push information down to the client side. So we tell you that there is now new information. So this is a rather, I would say is a rather advanced concept in GraphQL and not, and it does require you there's Web sockets. Web sockets to be working. It's actually not that hard to do. If you use a server that actually supports it. So Apollo server does support it. So, but it does mean you need to have open sockets and mainly to have sticky sessions, which is something that's kind of like tricky to have. You're having a custard kind of situation. But yeah, but this is something that's possible. It's a rather, again, it's a rather advanced topic, which I don't think we'll cover here. So, but yes. That's pretty interesting. But do you actually have any idea whether in real life experience, we would put a possibly leverage that function? It's possible with your building, like say an email client, like say Gmail, it actually does a fair bit of socket connection. So it doesn't actually wait for, doesn't hold the server, but it waits for events to come down from the server. So you tell me that, hey, you have now new messages from on Gmail. So that's one of the examples of like pushing, like push notification of sorts of things. But yes, it's something, yeah. So it's something that requires a certain infrastructure as well. So you probably need to consider whether your infrastructure can support it as well. But if you want to have a large function, do you use a different client or using the same Apollo client you use? You use Apollo client. I think Apollo client and Apollo client supports subscription. And it's not also for subscription. There are different types of client, but I think most people use Apollo because it's actually the most featureful, there's a lot of features in it that is feature support is actually very high on this one. So on the client side, server side is out there. But there are definitely a lot more, a lot of other open source libraries out there for this. You're doing a server-to-server kind of thing. If you're doing, I use Ruby, I can use a Ruby client as well. So, yeah. Interesting. Okay. Okay, thank you. All right, there's another question that's all for today and thank you all for coming. All right. Thanks guys for joining and I hope you have a lot of takeaways and you learned a lot. Anyway, please do feel free to join us in the telegram group. I'm thinking to schedule another one. I haven't picked out a topic yet. So if you have any ideas, any interest or anything you want to learn more, feel free to reach out to me or you can simply post in the telegram. We can discuss this through. Yeah. And also, if any other future workshops are out, I will put the information in the group as well so you can stay updated and get a ticket as soon as possible. Cool. All right. If there's anything else then thank you. Thanks guys. Bye.