 Okay, we'll get started. I think it's time Hi everyone. Thank you for coming. My name is Maria commas. I work at a major labs I'm based in Zurich, Switzerland, and I wanted to talk about GraphQL today about the basics GraphQL has been Hot topic lately like more and more people are interested in it we can see in these results from last year's state of JavaScript survey that most people wanted to learn about it and Then from the people that had already used it almost everyone would use it again Let's start with some background history GraphQL was developed by Facebook by in 2012 then three years after that they decided that they wanted to open source it in 2015 and then just last year a foundation was created to provide a neutral and open home to help further develop and for more people to use it GraphQL in essence, it's a long document that is Accessible online this would be the first page and what it does is it specifies a query language and Execution engine so it's essentially a way for the client to say hey This is the data that I need and then wait for the server to say This is the data that I can provide you with GraphQL then sits in the middle of the back end and the front end or the back ends and front ends and it provides this Middle layer and this consistent interface. You can have many back ends and they can be different Kind of sources. It can be a file or it can be a database. It can be a third-party external API that you need to access data from and GraphQL abstracts that complexion and that Yeah, and it makes it easy for the client to access the data and in the front end you can have also several Front-ends it can be a mobile application. It can be a web application and as long as they can send the GraphQL query to the server they'll get the data that they need Garrett gave a talk on GraphQL in last year's summit and His talk was about how he had been Skeptic so far and then when he started using it He became an enthusiast and what he liked the best was not the technical aspect of it But how it transformed the ways that the front-end and back-end teams Worked he works in Netflix and he said that he saw Dramatic improvement on how people were communicating about the data needs So it's it's very nice to see that It starts this meaningful conversation between the front-ends and back-ends and also between the people that work in the different areas of an application and in my head it's kind of a pattern lab where you have these Libraries that define a set of UI components so people can talk about them and use the same words have a shared language and a shared knowledge of all the needs that The application has and how to evolve that with time So it's kind of something similar but but with data if we go back to why Facebook decided to implement something new in the first place what they saw is that because more and more people were accessing Facebook through their mobile phones They had to be very efficient on the way they manage data But it also had to be very easy to use because of course There's many many people that would work on it and people that didn't have a lot of time to get familiar with the new thing That was complex to use So how did they manage to have something that was powerful and flexible enough to cater all of their needs? But at the same time easy to use on the people side They kept a few principles in mind in the specifications. They defined them and when designing it They thought that that would help them accomplish that complexity free and powerful tool one aspect of it I like to call it wiggies glove and That would be what you get is what you ask for and it's about from the client side getting exactly the data That you need no more no less But also being able to specify and describe that those data needs in a very natural way if we look at that through An example, let's say we are tasked with implementing the UI for the profile page in github It's yeah, there's a lot of data that we want to display and it's organized in a specific way Let's see we could maybe start with this part here it has a the avatar it has the name the nickname it has optionally the Company where the person works and where they are located and also the website maybe If you wanted to have that data so you can display it as a human It would be an easy way to describe to say yes I want to display information for this user that has this specific login and I'm gonna need a URL to show an image I'm gonna need the name a login a company location website URL, etc So this is what GraphQL provides you with a language to say exactly that So this would be a query language a query Where you can say this is what I need please give it back to me and it would This is what the response would be and this is by the way, like real production data github has an open public GraphQL API that everyone can play with and you can even if you authenticate you can even star repos from there or follow people So these are screenshots from using the the explorer that they provide And we can see that the data that we can that we get back is exactly what we need it And in the shape that we specified it with so it's very easy to work with that because you know exactly What you'll get and in which shape? If we wanted to maybe move on and say, okay We also wanted to display who that person follows on github We can see here that the first person that she's following is George So how would we extend that query to add that? We would add this following field and then in this case We specify that we want only to get the first result to simplify a little bit And then for that result we also want to get some information Which is very similar to what we were asking for for the main user. So the name login, etc The response. Yeah, again, it's it's following the same shape that the query had it has exactly the information that we asked for and Yeah company, it's not specified. So it's just an empty string and everything is as we expected it to be Another important aspect is that it is strongly typed So the server can guarantee and and can and the client can guess Exactly what well, it doesn't need to guess can know exactly which data is Accessible what that means also is that the tooling that can be built around this? Is very powerful this is graphical and this is open source as well So you can add that to your project very easily. This is the one that he did have provides And we can see that on the left. That's the query that we had in the middle We have the response that we saw as well and then in the right. We have Documentation for the schema that they provide So even if you're not familiar with their API or even if you're not familiar with GraphQL at all You are able to go to this in browser tool and start typing this on the left this Model with a list of fields that you can add you get that just by typing command space and that way you can start exploring what data is available and As it can know exactly which queries will be valid as you write them You will get very useful errors if you are asking for Information that's not there or if you are missing Required argument or anything that might not might make your query not be valid You can even query the scheme itself So you would be able to get a list of all the fields that are available In here we don't see that but we do see that we get the type name for the information that we are Requesting so in both cases, it's the user and then the User that Leah is following as well in the right. Yeah, there's also a lot of information that you can get By for exploring the schema you can get which type each field is going to return some Descriptions sometimes and what arguments that field might accept etc we've seen what the query can look like and This is another example, which is very similar. It's taken from this link that I have down there It's a very very good article about the basics of a GraphQL server So this would be the front-end part the client side, right? We would have this user field with an ID to say which specific one and then yeah from that one I want to know the ID and the name even though we do know the ID in this case already How would that look like on the server side of things? When you define GraphQL server, there's two main aspects of it This is the structure and then there's the behavior the structure is the schema and the schema would be a collection of all the types all the data types that Your application will have For this example, we have the type query that would be the one that all GraphQL servers will have because it's the entry point for reading any data and then in in that we can see that we have a user field which accepts an ID and It's required it's required because it has an exclamation mark That's how you mark it and it's gonna return a user What is a user user is another type that we define that has two possible fields It's the ID which is required again, and then the name which will be a string But that doesn't tell us how to actually get the data For that you have the function resolvers so each field is mapped to a function resolver and That is what makes it so flexible because in that function you can have arbitrary code You can have anything in there As we said in the beginning GraphQL is a specification. It doesn't tell you in which programming language you have to write your server or how to implement it but this here it uses a Reference implementation by Facebook written in JavaScript that other libraries uses reference We can see that the for the user field that we had before in this case we would resolve it by Calling a function which is fetched user by ID and we can see that we get the Arguments and we get some other information that we can use to get the data that we need With this we could see also what the user how the user is going to be the fields that it has How are they going to be resolved and in this case because you always get the information from the parent field The user object in this case They can already return it because it's already accessible in the information that they get from the parent Can we use this interval? Yes There's this GraphQL module. That's the main module, but then there are also other related modules So if you were to install this and enable the core module, you would get out of the box schema which gives you access to all of your content entities other stuff as well like image styles and menus and you could also extend that and modify it as needed There's two versions that the one that I'm describing would be the Three third version and then there's this Fourth version and what that's about is because we were saying that having that flexibility and that conversation going on between the front-end and the back-end teams where they have to define what data they need and how to structure that and You wouldn't get that with the version 3 because it's out of the box. That means that it's very tight to how Drupal thinks about Content and how it models it so it uses Drupal specific concepts like entities and bundles so if you wanted to do to really craft your own schema you could use the version 4 it's There is still some work to do to make the developer experience Optimal, but it is usable and if you wanted to know more I would suggest that you go to the slack Drupal slack and ask in the GraphQL channel if you have any issues with it This is what it would look like if you install and enable that module in your Drupal site You get this graphical awesome in browser Development tool same as we saw before this is without doing any custom stuff So on the right we can see all of the fields that we can query and the arguments that they can take and on the left if We can start type typing we get auto completion and in this case We are querying nodes and seeing them seeing the labels that they have which is only one in this case But yeah, you can see that you can immediately Play with it without having to know how it is implemented on the server There's also the option of using it even if you don't want to or if you don't have a decoupled project this GraphQL tweak module what it does is it provides you with a way of Defining the queries in your tweak templates so you can keep using tweak engine template as you would in a Regular site and then from there you can use that data to display it as it makes sense for your view If you are interested, there's this block at the amazing laps block and it it links a couple of webinars that Philip mellap gave on the topic and also links to a session that he gave in Drupal con Europe last year and Yeah, it's very detailed and it also links to Project an example project that is accessible on github. This is the slack Drupal the Drupal slack and yeah, if you have any questions or any problems both Philip mellap and Sebastian Simpson Are very active in there asking questions and getting feedback from the people that are using the modules There's a lot to cover. We only saw like the most basic stuff We didn't get into fragments or variables or this Yeah, many more concepts related to GraphQL If you want to learn some more, I would recommend that you go to how to graph kill that come It's a tutorial and you can get your hands dirty immediately because it has these widgets where you can start Queering right away and it really is a very good resource to get and started with this There's also a principled graph QL. This is by Apollo Apollo provides a lot of very Good tools to work with react and Apollo and I mean graph QL And what they did in this page is just define 10 set of Good well of best practices that they found Then the third link there would be the explorer that we've been using for the example. This is the github API and you can also go there. Yeah and start Writing queries and exploring their scheming see what's available and how that could work Then the last one needs a book It's really accessible and it goes through the client side and the server side of things is quite long It also gives you access to a slack channel where you can talk to other people that are learning graph QL And with the author himself as well That was it Any feedback is much appreciated and then there's also the link to the to give some feedback on DuPalcon Seattle in general Thank you. There's a few minutes left for questions if anyone had one Yeah, if you want to come up here or if not, I could repeat the question Question is how about using Drupal to discover what I'm not sure I'm getting the question if you could come up here Maybe I would Thank you the examples you went through aware geared towards Drupal being the client and Exploring data using graph tool. What about the opposite use case? Can Drupal serve content? Yeah Maybe let me go back to this light here. So in this case using the graphical module You would have your content entities your bundles and your content types as well And then you would have access to all of that data Thank you expose it for you