 How is it annoying to see a spinner and the application takes forever to load? Performance is crucial in user experience and slow loading data can really hold an app back That's why today I'll be exploring one of the tools to enhance the data fetching and data loading It's called the graph QL This works, right? This should work like that You don't have a USB, of course Sorry about that Oh, I have a... Sorry, technical issues. I don't know. I don't have an AC I think this should work Yeah, yeah, of course Where is it? The shift? I'm just pressing whatever now You know, never mind Never mind, I will just use my keyboard It works, there you go Alright Thanks So today I'm presenting, again, the power of graph QL So we're going to explore the powerful capabilities of this tool And how we can use it for API and modern application But before I do that, quick introduction about myself And it's not working again Quick introduction about myself Hello everyone, my name is Yara Divyan I'm Lebanese, I currently live in Barcelona And I'm a software engineer at Factorial So before I start talking about GraphQL I'm just going to go over real quick REST API We all know about REST API, REST API And it's like the go-to solution When you're dealing with data fetching and data manipulation But with REST API, we can have some problems One of them is the underfetching And underfetching is when I'm requesting data And to get all my data, I need to have more than one REST API request Because I'm not getting enough for one request Also we have the problem of overfetching Which is actually the opposite It's when I get more data than I actually need in my request So all of this can result in this loading data In the appearance of spinners And we hate spinners in our application And they reduce responsiveness of the web application And overall the usability of the application, it undermines it So let's try to solve this question To solve this pain with GraphQL First, what is GraphQL? GraphQL is an API query tool Okay, I found this on the web for easy as e Check it out Sorry about that, it's my friend Siri Siri, shut up Alright, so GraphQL is an API query language And it has three main pillars The first one is the single request property And what do I mean by that? I mean that we can have all the data that we need In one single request And we're going to see later how we can do that The second one is the easy data manipulation And the GraphQL supports precise and simple data fetching And the last one is the strongly typed schema And when I say strongly typed schema We can think about it as a contract It's a strict contract between the server and the client So more about the schema Here in my diagram I have the schema that's defined And inside my schema I have all the logic Everything I need to know for my application I have the objects, I have the models that I want I also define the operations that I can do on my data So the query, the mutation, everything So what happens is the front end Or the client, it requests some data Or it wants to manipulate some data So it talks to the back end or the servers And what happens is the server needs to check with the schema Which has the contract with it And to see what kind of operations are allowed And what kind of types are defined and everything So everything happens inside the schema And the DB is there just to provide the data Or to execute some manipulation, some mutations for the data Now, what is the schema and how we construct it? We need to understand something, which is the types We have four main types in GraphQL The first one is the scaler, which are the basic types They can be integers, string, boolean The second one is when I don't have the types already predefined in GraphQL I construct something called customer scalers And this is used to express some date or time variables The last one, the third one is the enumerators Which is when I have a discrete set of choices That I want to express, and I know what output I am expecting For example, to define a role, I can define the role being an admin Or a guest, or a default, or a manager I know what kind of output I'm getting And the last one is the object And the object is actually a combination of all the previous types And also of some objects, they're the complex data structure That when you see, we can actually understand The last thing that I want to talk about is the query And from the name of query, what is query, is a function That used to request and fetch data from the GraphQL API It's a really cool thing about the query is that... Shut up, see? The cool thing about query is that it helps me define what I want And it helps me to get the exact data that I need So the thing here in this really simple query Is defining what I want as a response So here I'm trying, for example, to get a post And the query takes an argument as any function Here I'm taking an ID And I need the post to return the ID, the title And the author attribute, for example So everything is defined by the developers And I don't have any surprises from the back end From what I'm getting, because I'm defining what I need So it makes the API more efficient And more flexible for the developer So I'm going to let that thing end for two seconds And now that you have enough basic knowledge On the GraphQL and how things work I'm going to jump to a quick demo Suppose I have this weblog application I know, design is my passion So I have a user, I have some posts And I have a friend's list Now suppose I want to render this page What I will need is three requests First one to get the user The second one is to get the post And the last one is to get the list of friends So now suppose I want to take my application to the next level And I want to have this kind of pop-over Or tooltip or something And inside it I will be also displaying some information About the author of every post So I will need three additional requests To get the user information So it's more than four requests Just to get this simple page So imagine the amount of spinners I will be having now That's crazy and we hate that We hate spinners So let's try to solve this with the GraphQL First what I will do I will start with my schema Just to understand how things are done I have a user, I define the user attributes that I have ID, name, email, whatever And I also have posts that the user can see They belong to the user And what is a post is actually another object Inside the post I also define the attributes And the post has an author What is the author is actually a user And lastly also inside the user I have a friend's list And what is a friend is also a user So now we see how things are connected together Now that I constructed my schema I'm going to try to construct my first query What is this query doing? This query will try to render the page that I have And inside my query what I have I have my argument, I have my ID And again I'm defining what I want I'm telling the client The client is telling the server what it needs So I'm telling here for the user I need the user attributes I need a list of posts And I need a list of friends of this user So all of this is being done I need one request, which is SlashCraftQF So no more under fetching here I don't need more requests just to get One simple data that I have It's as simple as that This is how my output would look like Strict, basic, JSON format output I have all my information I have an array of posts I have an array of friends As simple as that Now one more thing Imagine I decide in my application That I don't want to show the email anymore I don't care about the email and I don't need it I don't need to render it So basically with REST API I will have to accept it Because this is my request to get the user So with the backend is giving me I'm gonna have to deal with it I'm gonna have to parse it and do all the logic there Or I'm gonna have to change the logic in the backend But with GraphQL all I can do Is just remove my email I don't need it here And this is how my output would look like No email, no overload of data No load of transfer So no more over fetching here I'm getting exactly what I need So Yeah I'm gonna go just one take a quick look Again on my application And if we look again We can see that we have something common here We have some common fields There are all the user And if I take a look again at my query I can see that inside my query I'm repeating myself here I'm repeating the attributes again And again And I think most of us are lazy When it comes to writing the thing Over and over again So what if we had a way To connect everything And just to group everything in one single query And this query is gonna Every time I'm gonna call it It's gonna just give me the information Of the user instead of me repeating myself Well that's possible It's possible with something called fragment And what is a fragment? The way, the only way Or the simplest way to think about Fragment is like An abstraction And it's like Extracting data from a query Extracting a sub-query And I can reuse it everywhere Like a puzzle piece And I can use it in every query And every time I'm using it I know what it's gonna get me I know that type it's gonna get me I can construct a query called user fragment And every time I will be calling This fragment It's gonna get me the ID, the name And the email So this is how my query would look like again I would be just calling the fragment In both places, for the user And for the friends Now the also cool part about it Is that it makes my code more maintainable And more modular Why? Suppose I decide to make my Application even more sophisticated And I wanted to add the bio attribute here Now, if I had the old query there I would have to go to everywhere I'm calling the user And call the bio again But with fragment I can just add it here And the bio will be requested everywhere I'm calling the fragment So yeah, that's pretty cool Now, everything I just explained And I went over Can be possible, or it's kind of A bit complicated to do And Apollo client is a simple library That's used to integrate GraphQL With our front end Front end project With React, Angular or any other Framework that we're working on And it provides caching capabilities And it makes it easy for developers To use GraphQL I'm gonna combine everything that we did It's just simple JavaScript file I'm sure if I'm gonna run this It's gonna fail It's pretty basic to understand How things are connected So I'm using my Apollo client here And I'm importing My use query method here And I'm gonna use this query To actually call the query that I constructed So I have here my query that I constructed before I'm not gonna put it here That gets user query And what I'm doing, for example here I'm defining a user profile component And inside it, I'm calling the use query From Apollo To my constructed query before And also the argument Which is the variable Which is here the user ID And what it's returning It's returning loading Which is a Boolean value To know if it's loading or not To know if I'm gonna display the spinner or not The only spinner And the header field And also the data So this is how it's gonna look like I have the user For example I can define it And I can be able to use it in my component User.name,.friends,.post Everything that I'm actually returning In my query Yeah, pretty cool And there is more I haven't even scratched the surface Of GraphQL We still have the mutation 15 minutes is not enough To talk about that We also have the pagination Which is used for extensive data And the other handling As seen before It's here Because the GraphQL It dedicates just the field For the errors In every response So it's so easy to handle it And to parse it And all of this So yeah I highly request Or advise you to check GraphQL It's a really interesting tool to have And it can take really like API management And data management to the next level And to check that There are a lot of tutorials online A lot of documentation One of them is the Official documentation for GraphQL And the official documentation For Apollo as well And there are a lot of free resources On the internet to check Last but not least I just want to go over Some real life use cases Of GraphQL Starting by Facebook Which is I forgot to mention Is the creator of GraphQL And Facebook is using it For the Instagram application Also we have GitHub That's using GraphQL To construct their public API We have Twitter using GraphQL For their Twitter lite application And Twitter lite is the application Used for slow connection environment So they're trying to Make the application more performance And requires less Less rendering So this is great When they try to escape The over fetching And under fetching and rest And lastly also Airbnb is using it To unify all the API And it makes it easy for developers To maintain Airbnb application So, yeah, we can see that GraphQL has made a huge impact In the tech industry And let's try together To unlock the power of GraphQL Thank you Hi How do you validate the query According to the defined schema? Sorry, I didn't hear the question How do you validate the query According to the defined schema? I don't... The schema does it itself It's Apollo It's the integration with Apollo That validates everything That's the thing I pass only my arguments to it And the schema is how it's defined Because I'm defining in my schema My user type, for example And I'm defining the user type Like the ID is always an integer And I don't know the name is a string Or the date has this format So every time I'm sending a request To my Apollo client It's gonna check this query It's gonna check what kind of type I'm passing, for example And it's gonna return it for me And if anything is not matching It's gonna throw the error by itself Is it possible to return a partial response For the request for the query? Partial response for the query It depends what I'm sending This is the thing I define in my query what I need So if I need the partial response I just need to tell it I need it partial So I only define it The principle stuff Yeah, you're welcome Where are you from? Great, thank you Thank you