 Welcome to the Dave Matteo show This might be our last time Okay How many people have done what we graph here before? Couple cool. How many people have worked with react hooks before? So we have the right crowd. Yeah. Yeah, this is good If you haven't done either of those things Probably the person next to you has so Feel free to interact. Yes with us and with each other You have my permission and blessing to do so also questions and whatever Follow us on Twitter as usual, you know You know, it's David McClellan and Ed Mateo Collina. So please follow us on Twitter. Thank you And so let's I would say let's let's start Dave. Let's start. Yeah. Yeah, so Welcome everybody and this is an interactive workshop. So you expect to do some coding maybe there will be some material left over to be and Do at home exercise because it's a short format. So yeah, there's seven parts We're hoping to get we really want to get to part three In the hour we might get to part four. So we'll see but it's self-guided as well So you can just keep going if you want to First thing we both work for near-firm. So Check us out. We are at the booth. So if you have any help with your javascript application We are a professional services company. So let's talk and we can help in all sort of ways so please Just you know, just reach out So a couple of things quick things of the setup you can use no 10 plus. So if you have no 12 is fine And but but if you do have issues switch to this version basically because that's what it's written against originally And does everyone know and understand and have installed nvm Anyone don't How does anyone not have nvm installed? Okay, cool. Cool. Cool. What version of node do you have installed? No dash v Okay, okay. Well, okay. If you have issues just let us come help you. Yeah, no worries Okay, good. So everyone's pretty well set up then. Oh We might need more chairs here. Well, there's there's two here. There's one here three people As one listen chairs over here as well. So if you want to go over Dude GraphQL is really yes. We popular. You know, you see I know also reactives. Oh More people. Okay. Hi. Hi everybody. We started too early. I guess, you know It's actually like right. We are right on time man Does everyone have a seat? Oh, yes, maybe one over there. There is one more seat over there one here at the front Two three. Ah, good. Okay. We have fit everybody Listen, I think there is some if you want if you don't want to sit on the floor There is one over here. There is one over here if you want it, but otherwise if you're comfortable there, cool Okay, so let's just reiterate Near form near form. Hey booth booth There is a raffle At the end of the at lunchtime. So please come there go there. Whatever for a bangle, right? It's and the airpods. So they're both as well. Yeah. Oh, wow. We're really like ramping up. Yeah. Yeah, okay But there's a thing called a bangle as well. It's it was a kickstart project. Yeah, what a long story blah, blah, blah It's nice. It's an IOT project Everyone who came in This is written against node 10.16 But your version of nodes should work with it as well, but if it doesn't no date one, so no date one No one's on no date. Are they still? What about in production? Because you really shouldn't be Because it's not supported anymore. Yeah in two weeks in two weeks. It's not supported anymore So we're gonna clone a repository We're assuming everyone knows how to use git if anyone doesn't talk to your neighbor talk to us So oh, yeah, we're gonna do that in a minute. What are react hooks? A React hook is a essentially like a mini state machine. It's a reusable stateful function And it doesn't obstruct the view hierarchy Versus other ways of managing state and react There's a seat just there at the front if you can find it No 10 you want Also near form So here's an example of a react hook This is one is con this conceptually. This is why it requires some libbers just like, you know for talking purposes So you say we have a library that has a used API hook so the use API hook would be used within a function component and It would return an object from which we do destructure the parameter the keys error and name The the second value here would be like what the initial value should be which is where name is loading. So the first Value of name would be loading so when it renders the h2 element in the JSX there It would first say loading the use the API hook would go and query the make make the asynchronous call When that call resolves it would trigger a re-render with that new value and the second time It's called the use API hook would return an object where the name is Whatever that user's name is that correlates with the ID Do you understand so this is the flow of how hooks work There's no it's not you're not awaiting your your rendering and then you're re-rendering which is the react way And the major difference is you move away from classes. Yeah, you know react and just use functions Which is way for me makes it understandable. I could never understood react with classes So sorry and just you know quick admission here and just these make me use react and lovely Yeah Anyway, yeah, and I also agree But this is this is a much more self-contained kind of encapsulated way to work with react in our opinion So What hooks do is they allow you to store and manage local state state It allows you to have a separation of concerns that ties into what we're saying about classes So if you have a class and you have to define how it gets its state and different things And then you have class inheritance involved in that too things can get coupled quite quickly But if you're using hooks Particularly if you've written them yourself, then you can kind of update that functionality across your application quite easily And that's where it comes into the functions versus classes, which we've just covered So GraphQL is a data query language Okay, it's it's it was it was born at Facebook a long time ago to To build an API that can represent the entirety of Facebook Whatever this means What is useful for well, it's usually it has some very lot of very nice properties, which it's Self-evolving it can evolve it. You don't need to version it and it's really powerful It's key. It's chemo based. So you write the schema you get the GraphQL schema and then you provide some functions and code resolvers to Populate that data it also strongly typed so you can actually define your types and Everything would work now. It's not it's nothing related to typescript. Okay, so don't worry about that Really different thing It's also self-documenting which is for me this most critical the most nice feature of this and what it enables a greater mentor of Productivity so you can actually explore the API using some tools that will you will see if you're not familiar with them And it's actually very powerful because of this It's it's short and up the development cycle of not all I need to think about this rest API Blah blah blah instead you can just add some more data terms some more some more something more into the schema and just about the It's it has fewer run it provides a fewer run trips So it's a normal traditional rest application if you want to fetch three the data for for your app needs to do three holes Over HTTP instead of doing three holes You can just sit your GraphQL and point only once asking for the all the three three pieces of data And we'll automatically bring it back to you, which is really powerful to provide a better performance on the on the front end of your system and It also provides a little bit smaller payloads because of all this So what is a GraphQL hooks? GraphQL hooks are it's a library that we have written a near for to provide a smaller version a smaller a minimal way of using GraphQL with hooks with react hooks and it's you know You probably use familiar with Apollo Apollo is kind of big compared to what what you are aiming to do with rare with GraphQL hooks. This is tiny and it works really well and It's it's really lightweight. It's a few kilobytes to add to your to your bundle compared to to Apollo. So Right that's clone The first URL the second URL is just to for your interest. It's the library that we're going to be using We'll keep this up until everyone's got that clone because we can't really proceed until you've done that Making a picture also. I guess what people are cloning if anyone has any questions They want to shout out on a discussion while that's happening. Feel free or if not, we can just sit here in awkward silence. Hey Yes Yeah There it's good. It's a good. It's actually what I wanted to see and react in the first place Yes, like years ago, but I'm glad that they actually went to that place in the end No, only with function components Well, it's that's that's how they've I think they're trying to move people towards that by by making that cool It was yeah, it was yes Because ear six clusters were introduced So they followed that trend of ear six classes and then they now they've come back to the original kind of simple idea Which is great Like that we have a problem in this industry where people add complexity for the sake of adding complexity because they think it makes them look good This is recorded Dave, I don't care I mean to me, I think like if you know What makes people look good to me is when they found an elegant and simple solution to something and we actually I do Actually really like react looks for that. Have you cloned this? Okay, have anybody had any problems cloning? Okay, fine This is the same thing. Yeah. So first part one, okay Yes, they are fully interoperable. So you can use a class component inside hooks and vice versa, right? Yes, yes, but you can't use hooks inside of a class component So with so say for instance the react hook use effect. It's kind of analogous to the Component did mount lifecycle method. I think so there's there's analogs so first of all The goals of the first step is get a graphical server up and running and explore that server using graphic graph IQL Graphical graphical. Yeah, graphical. So what you're going to use. You're going to use no JS. Okay. It's no plus just interactive So maybe it's wrong. You have the wrong conference if you want to use another another language We're going to use fastify. Hey, I'm Mateo. I'm kind of started fastify with Thomas like back in 2016 So it's a long time ago. I had some ideas. You had some idea You won't see me anywhere near it, but I was part of it It was part of it of the original ideas about all of this. Please check it out It's part of opens a yes foundation and so on so, you know, check it out and we're going to use react Okay, it's react hooks. So anyone have a react and we're going to some graphical stuff. So You can check. So the first thing you do you're going to the exercise folder part one Hello world run MPM install and run run MPM run watch Yeah, so that you know it automatically restart when you make changes So you don't need to you know, restart the process manually This is also going to take a little little time to do because MPM install It's a little bit slow because of the Wi-Fi And so and then you want to go to local host 3,000. Hmm. Come on in We've got floor space floor space is that There's a chair here. There's a chair here If anyone wants a chair for their back or whatever the chair here After your back guys We think we also take care of your house in this workshop you see anyone Need some help with this All good Okay. Well, let's uh, oh No, no wait, they got to do it. Yeah. Yeah. Yeah, dude. Do it. Give us a nod when you're done We'll check in in a second We've got like Oh, yeah, yeah, I've already installed it. So you should see That should be your end result after you've run MPM run watch should have the server listening One two seven zero zero one three thousand and if you open that It'll be this hello world thing And you can list users you're gonna add a user and add Mateo But if we refresh it it disappears. And so what we're gonna do is we're gonna add that server-side state using GraphQL with Reacttux Okay Has everyone been able to load Localhost 3000 and see yeah, okay fantastic the beautiful hello world application. You see we are really good CSS developers, you know put so much style. We just choose not to do it We're minimalist Okay, so if you go to the list users page You can see as I just showed you you can add a name if you refresh it'll disappear Because we haven't connected up GraphQL dot dot dot Yeah, so everyone take a look at in the source Server folder as a GraphQL.js file. I'll open it as well By the way in the thing that you Cloned probably want you in the repo that you cloned you also have This this index.html file so you can look at the slides there too on your machine So this GraphQL dot.js file We're acquiring Fastify GQL, which is a module written by Mateo. We'll go into details on that in a second. Don't get too excited We have Just like a mocked data. We're not you're gonna we're not using a database of this it take too long But you get the idea. This is a placeholder for you know data storage of an array of users We have two schemers which we're gonna go into details of two types Yeah, two types once came out today. Yeah, one scheme. Sorry to GraphQL types one called user one called query query has a user's key with an array of types of user So this is basically saying this is an array of objects with the names Which are strings which is the describing this here No And then we have resolvers which is Basically the counterpart that you give to Fastify GQL to say this is how we handle a Particular type in the schema. So we only have one defined for query And it has a user's method which corresponds to this user's key and we return the user list array from that and Here we have the Plug in the fastify plugin that registers fastified GQL With our schema with our resolvers and notably we set GraphQL or graphical to true because If you still have your server running, yes You can go to is a foreslash GraphQL HTML so go to localhost 3000 foreslash GraphQL The HTML Yeah You've missed the age. I miss the age, you know, I can I can always put in a typo in here all the time Okay, so now we have like Wait, you when you when you open your UI, you won't see this query variables piece. It'll be down here But you're you might want to just pull that up for later You'll see why So one of the greatest thing about GraphQL is that you can actually, you know, what you can say you can open up this and then if you start typing You automatically have auto completion and you can add in line dogs to your you can you can add in line dogs to To your comments to to your resolvers so you can basically say I want users Okay, and so and and then you can actually say for example And then you can specify the property the properties that you want and you say name Again, and you close note that if you open dogs, you will see that what are the root types Those are the ones that are attached to the query object so that, you know, it's you can actually explore this and Search it and navigate it completely. So a graphic a graphic while GraphQL is fully sub describing. Yes Yes So if you open dogs, you can actually say for example, you say you see users Then you can click on users and it tells you the fields You need to pay the key part there is reducing the payloads. So you want to lonely load the data that are That you need so you you know, you want to know which fields you want So that's because that's a key part of this So I don't want to return all the full object because my object on my system database can have I don't know 100 fields, but if I can only ship five or three of those fields, you know, I don't need to develop a Version of my API for my mobile app that requires less fields I think they can just connect to the same GraphQL and point of the web app that needs more fields So you don't need to actually Implement the same API twice for different clients. So it is really powerful If you think it like that, especially as a way for teams to communicate that you can press enter You can press play and it automatically works Which is pretty powerful because you can explore and develop your queries while using you using these these development environments that are already part of the graphic system and It's really really really really powerful at least from my point of view So We go ahead. Okay. So one of the things of a fastify GraphQL ggql that we have developed is Is about performance. So you might want to check this out if you're if you're already using GraphQL because Fastify gql is actually fast and We have done a lot of extensive amount of research on auto-optimize graphql We've done the last year at this conference Matthias Booth and myself did a talk called graphql accelerated if you are interested you might want to check that out and It's a pretty goes into deep into why and how we have optimized it how we have optimized it graphql Yeah for this it's this is the graphql is actually a hard problem and because it's solving something that That if you design your API is really well in the first place and they're they come from the client in the first place Like you're you're driving it from like a UI perspective Then you could theoretically try to design a system without graphql Graphql comes into play when you need to aggregate a lot of API's that you haven't had control over right and so But what it's doing is application joins Yeah, so an application join is obviously usually a very bad idea. You want to do that in a database. It's gonna be more efficient So this is actually a hard problem in node because we're you're trading off a lot of different things So performance is very hard for for for this kind of thing So fast by gql is like pretty amazing, but the one thing it doesn't have yet Mateo Federation yes Federation so sure in Apollo you can have you can you can distribute your graphql schemas across Basically an organization Fastify gql needs that if you want to see that with performance you got a Talk to him on on github. So were you all able to run the query? Fantastic one more thing that fastify gql does which is pretty amazing It does it compiles the queries the graphical queries into javascript functions In a safe way. So what it does is essentially just you know Take your graphql query validates it and then compiles down to a really fast JavaScript function that then it's evaluated and executed and we cast that function so because of that we can save a lot of the time a lot of time that Is spent into validating the query caching the query validating the query and compiling the query Yes and no so it's it to some extent It's similar but the problem is that persistent queries do not do that on the other side that the implementation of persistent We did not do that. All of these is done at runtime. So essentially sketch within the same process So it is slightly the different technique. It's the same kind of concept, but a different technique So if you serve your server still running run this query and See that you get the result just make sure that everyone's Working It's working for you Did we run it ourselves? Yes Yes, okay So everyone who's running. Have you seen this this output? Yeah. Yeah, cool. Cool. Cool. Cool. Okay part two I think we're gonna make it to part three. Yeah So part two the graphql schema We're gonna update the schema to create a user. So we're not just gonna query the users We're gonna start creating users And we're gonna test it with graphical or graphql. Whatever. So going to the second part two exercise so You have to run npm install again Run npm run watch again same pattern and go to localhost 3000. Yes. Absolutely. Yeah Stop the first one. Otherwise, you'll have a port conflict. Everyone got there Yeah, still waiting. So let's take a look at the graphql.js in Part two source server So actually really like working with the font this big so much nicer on the eyes So in the graphql.js in part two, we still have the user list. We've got some to-do items Everything else. I think is the same. So we're gonna start editing this file And on the to-do list, we say we're gonna add a mutation type to schema. We're gonna add a create using mutation we're gonna take a name parameter and We're gonna return a user type from the schema. So Let's do that. So graphql schema defines the relationships and the structures of the data Nothing to really elaborate on there is a so one of the key things of of Graphql is that you have this type subject that can return types other type subject and other type subject and other objects It's it defines the relationship between things. Let's say that you have a dog that you have a type dog and a type person you can say you can create a Property on the type person that says dog Dogs and that returns the dogs for that person. Now these we call our different resolvers. So what you can do is you can Structure your code into in a way so that all these all these various concerns are separated And it actually works pretty well because you can actually think about different features on your application and implement them Very quickly based on this Guess there was much without brown. Yeah, maybe In that so in our in the schema in our graphql.js file, this is what it currently looks like The resolvers as we've explained are the functions that have other counterparts to the schema But the queries are for fetching so we have this query in our schema, but mutations are for writing So Obviously some of you probably know this but we're just making sure that we were all on the same page as we get to the hooks part So to create user we're going to add a mutation to the schema and And to the the counterpart of it to the resolvers in our graphql.js So at the bottom of the schema if we add this in here type mutation create user name string With an exclamation point. They call this a non nullable type. Okay, otherwise known as required required It's a non nullable which means required a weird way to say required You know, it's non nullable Which is required, right? It depends if you're a positive person and I'm really negative You see you can you can see negative logic or positive logic? I don't know it depends on how you write your Sentences has everyone been able to add this yet still some people working on it. I hear a couple of keys clicking away So you need to put them into the movie that there's top level mutation, but I would put them there. Yes These are top level things, but now you can make things a little bit more complicated with the nesting and objects But you need to have a top level Entry point so the only top level entry points that your application can use our query and mutation So the rest is known top level No, but you could everyone good everyone got this into their schema Now we're gonna do the resolver. So in the resolvers object. We need to add a mutation key capital M and then That key holds an object which has a method called create user. Oh shoot I forgot to look into what's the underscore for is the current object. So it's a mutation of it Don't worry. All right. So the mutation This is your design is so no, it's not my it's got you out So one of the key things about GraphQL is that you can always return the current object So if you're actually creating or mutating Something in a big tree you can always refer to the parent object on that on that chain And that is that underscore but given that mutation is a root object. We don't need it So we call it underscore and forget it's a little bit functional style putting it as underscore So I don't know if you're familiar with one of those functional language We put underscore when you don't need it basically means I don't care about this parameter, right? We were you would use the object in yeah, so you would typically you use those objects a lot when you query So if you're creating a big graph structure You can you want to know for example, which you know if you have a person that has a dog You want to know when you're called you writing the resolver dog You want to know which person you are asking the dog for and that data will be in that parameter Make sense Okay, so in the mutation resolver. We're just pushing to the user list obviously this is just for the purposes of learning Because you don't want stateful services you want to push the database right everyone good Okay, so we're going to test that mutation in Graphi Kul So if you still got your server running go or if you haven't you should start it with npm run watch Logo 3000 forward slash graphic you all the html And make sure remember I said like that little hidden almost hidden panel where it's like your variables Make sure you've got that ready because we're going to use that in a second now Has everyone been able to load the graphical? graphical UI For part two Okay, I'm seeing yes as I'm not seeing no so we shall proceed Yeah, we might want to Test it first. Oh, yeah. Oh, no. Yeah, sure. You're right here. This is it Uh, so we go into you can by the way you can get this off the slides if you don't want to hand type it uh, so I need to run the parchment Am I not running it? amateur You keep killing it. I don't know why Muscle memory. Yeah, I know It's you have a little bit of refresh. Yep So first we need to put this in no not that Yeah, the copy paste on the slides. It's annoying because when you try to copy it goes to the next slide Uh, so we put that in there the query variables down here. We also need to add Uh, and I'm just going to do it and then you can kind of see it the query variables here because this is uh, this is essentially uh A variable kind of a variable that you define in the schema And then the query variables are then passed to The resolver the resolver one of the key thing about uh, uh using this type of using query variables It's because it's like I don't know sequel. I mean if you're from here with sequel, hopefully everybody You probably have seen like there is question marks When you put put the put the things down you don't concatenate a string for all sort of problems like sequel injections and all whatever issue you can imagine Query variables are the exact same thing. So you use them when to specify parameters You don't concatenate that string into that main query because that would be Make sense run it though. Wait, let's run it. Oh You probably haven't because we didn't do it right. Okay, hold on hold on Uh, yeah, have you got it? I'm gonna go to one I made earlier You see it's Yeah, you need to refresh me. It's not loaded yet. Yeah, but you need to refresh Yeah And that's what you should see if you see the other thing you didn't do it right like me So then you can actually and then if you go back to the query Then you can see the bob's been added Okay, and I want to hear called bob guest of honor Oh, no bob come on. No roberts I guess that name is falling out of fashion then. Yeah I like the way uh Sorry Oh, you're starting the data in your go to the resolver. It's not there not there go to the slides. Okay. Yeah So if we go back through the slides for a second Go back go back go back one forward. Yeah, there is see it. So we see it's pushing it to the list user list is an array Um, again just for learning purposes. We're not recommended and you just draw an array for your state In your process, but we just push that that mutation resolver Uh Calls create user Yes And for the purposes of this workshop one of the things that is interesting here is that if you use you Both create users and users can be async function So you can use async function and promises to write your result. Nice Okay, does it make sense? We're nearly at the hooks part and we still have time. So yeah We are rushing towards towards the goal. So if you're Okay, here we are part three Okay foundation laid um So the goals of part three we want to check out this graph ql hooks library see it in action Uh, we want to hook up the back end data front end web page Uh, we want to retrieve a list of users from an api using a graph ql hook So if we go into part three, uh, or you can can do if you got part two working you can continue working on that However, you want to do it? Uh, but anyone who wants to make sure that you know, they're starting fresh go to part three amp. M install amp. M run watch Everyone there? Yeah amp. M stores class today Uh, in the same folder we're gonna you might need to open a new tab Or you might need to control c and then run amp. M wrong watch again However, you want to do it, but we want to do amp. M install graph ql hooks So we're gonna bring this graph ql hooks library in right now Download it The push and if we push the new release out this morning. Oh That's a good time to do it You know you you deploy on friday, right? So if it doesn't work raise your hand If they all raise their hand Ryan Yeah, I just want to by the way where we are here I just want to shout out to brian mullan, which is was the hi brian hi brian the original author of graph ql hooks. So um We have recently shaped uh support for the graphical subscriptions, which is a long conversation and topic for uh, To support like live data both on graphical hooks and fastify gql in the last month. So pretty big Good work. Yeah Did everyone install graph ql hooks Okay, so in a source client j s app dash shell dot j s We want to import the graph ql client from graph ql hooks And then we need to set it up So internally all the graphical query goes to slash graph ql by default You could have made that the default Yeah, you maybe should So In What have you done So we're going to what was a client j s app shell And we want to import Uh the graph ql client And we want to instantiate the graph ql client And then we can probably remove Import and instantiate Good thank you point three and four. Yeah, so that's that to do done So this is a long topic. Yeah, you know broad My uh the current I think Where the industry is going most of the time is using uh json web tokens most of the day that that's what goes for possibly the One of the most widespread solutions Because it allows you to keep your services. Yes, because you would like to keep your services And they are that's a standard way to actually encode a token Somewhere and then you need can store that token whatever you want or regenerate it refresh you It's really it's a very well done standard And I would just recommend to use that and not re-vent it. Okay, everyone got that No frowns All the frowns are upside down. Okay Uh, the next part is in the same file. We want to uh add that client into The um We want to wrap a provider All right, does everyone know how react providers work react provider in context? So react context is essentially A way to do sort of lateral state instead of having to pass properties all the way down through to components We can wrap a provider around a component and then we can access that that context from any component in that tree Later on so it's kind of like a little bit of a trap door Um, so or dependency injection depends on what the dependency injection I don't know. I I just get you know a bit sort of narrative with it Narration we can talk about it for like a day. Yeah, uh, so what we like we we've got this here But actually you don't need to re-duplicate that you can just say I'm going to add a client context into my imports like this Right And then we're going to wrap the client context provider around The app shell and then we say the value of that provider is client Yes So when we when you set the value of a provider You can how you can import that client context somewhere else and then you can say client context consumer Wrap that around your component and then suddenly you have access to that client Yes Yes, but this is this is this is now the graph ql hooks library, which is front end. Yeah Yeah, we're pointing it out the fastify server. We are parting out the falsified server. Yeah, if we had our own context Um, like our custom context for react. We just wrap it above this You can wrap it above. Yeah I don't understand the question it's if you want another context you can just wrap that Oh, yeah, you can have multiple contexts you can have as many as you want There's also you instead of using client context consumer. There's also a use context react hook So then you can just use a hook to get your context once you've wrapped it, which is quite elegant Has everyone got this part? great now We're going to set up in source app pages list users dot j s We're going to take those queries that we were playing with earlier in graphical and we're going to uh You know put them into that file as uppercase list users query and create users mutation source app pages source app pages list users So They go outside of the function, right? Yeah So that's that's what we're doing. We're adding this to source app pages list users dot j s adding these two queries that we were playing with earlier Well one query one mutation and we're just about to hit the magical part where we actually use a hook Wait, I'm just coming. We can't hear you from I noticed that the schema has been duplicated right because we had we used to have the schema and the server dot j Yes, will that always be the case? Do you have to duplicate it or do you like do this? As in like The project and you can probably import it. There is so this is not the schema These are queries Oh, yeah, they're not types. They're not types types are in the the types are on the other side this specified the queries So these we use these queries in graphical earlier. That's why you recognize them, but they're not actually in the server. Sorry, I miss Was incorrect there Still some typing so we're gonna we still have half an hour We can do more we can do part four we could we could start part four at least See part seven seven parts of this Yeah, we weren't worried about whether we had enough content Okay, I'm hearing a couple of keys still typing so we'll just wait a few more Minutes maybe one or two minutes any questions You see no, I don't know almost no typing anymore It's good. Okay. It's good All right So also in list users j s we're gonna use the use query hook from graphql hooks So here we're importing it as my lovely assistant just help to display And then we this this piece here needs to be inside the actual Component because you can only use hooks inside of components else. It doesn't work React we complain badly. Yeah, I mean there's there's very good reason for that because they actually use the fact that you've used it In the component to actually track the state So that's why you can't use it without So the use query hook returns an object with a data and a refetch key The data key is the the data that is fetched by the query And we Do an assignment as we're destructuring that object We also assign a default value of an object with a user's key and an empty array So that we don't have issues where it means we can just map over an empty array later on right? Yes It's users type Is users tied to our query? Which part? Yes, the list users query. Yes, would be called something else if we change the shape No, so this is your constant. You have a constant earlier. We just did it here. That's a constant Yeah, okay, so it's nothing related to the types No, it because of the text in there you can call it bob if you want to or fubar when we define their schema We had users As a property that was formally defined. Oh, yes. Yes, so that won't change. No all of this code is stable Yes, yes, but the key child the key things on evolving graph ql is on writing graph ql Based application is that You do not change things You just add just add more properties more resolvers more types You do not remove anything In this way old clients can still work. So for example, if you write them on mobile app, you can actually Have used different graph ql You can use the same queries but with different properties and then you have multiple versions of that app being Survised the same graph ql endpoint even if you add more types and more queries to support new features. So you don't need to It's essentially it was one of the problems of rest api that you have those nice version numbers In those rest api. I don't know if you love them, but Whatever, I like them. I like those version numbers. Okay, so I've put it into Am I in the right place list users? Yeah, so I put it into the list users js file So we have import use query from graph ql hooks at the top And then within our exported list users function component We at the very top of that we have This call to use query and as as we were just discussing we pass in the list users query Constant into the use query hook and so what's going to happen is What we need to do some more setup But what what can happen then is that use query can Asynchronously call the server as I was talking about earlier with the use api concept concept The initial state will just be Data with an empty users array When that query resolves it can re-render that list users component with that with that state Made sense so far Has everyone got this down? Yeah, cool Um So the data the use query Returns A data key and that's the jason that's past jason that's received from the api and a refetch function So you can trigger a refetch? Um, potentially with uh, I guess, uh, a button Yeah, or a refresh button if you want to or maybe when you do an action So Yeah, if you want to if you change the data you might want to refresh that Okay So again in the same in the same file, we're gonna Destruction the the the use use mutation hook From the graph you are hooks library So we don't have to do as a separate import. We can just do this this here You can remove line from three to six Oh, can I? All right I'm also going to remove all this game in the way. Yeah Okay, so if everyone got the use mutation hook imported and then we can Use the use mutation hook it also inside Uh a function component. We'll put it underneath use query So use mutation returns an array Where the first element of that array is the function that's used to call that mutation So we're calling it create user. We can call it whatever we want when we destructure an array Is everyone familiar with destructuring? Yeah Pretty neat. I like it Just don't you like sugar and don't just don't nest your destructuring because that's crazy Don't do that Keep it just like go on a new line and destructure the next thing Otherwise it gets a bit insane We've done a massive poor request recently I'm not going to remove some very nested destructuring that we put in for some reason nice Uh-huh Right here. So refetch is Is uh Alliest to refetch users with the uh, yeah So when you destructure you can actually alias one key to another key using a colon Right here. We're not using it. Yeah, but it's right here. That's the declaration of that variable So the so use query returns an object with a refetch key called function. Yeah, you got it Okay Yep, you can remove line 13 13 13 Oh, yeah, no, then yeah, just keep the function but remove just Yeah, yeah Okay, and now in create new user Uh We want to turn that into an async function because currently it's not Does everyone are familiar with async await? Yeah, do you like async await? Okay, have you watched welcome promises talk by James now? Okay, wasn't that fun? Is your mind still all intact? Okay, yeah, just yeah, it requires thoughts. This is the problem uh with like a easy to learn hard to master pretty much the motto of javascript And it's still going with async await Um, so we got this remember we got this create user function We've destructured as from the first element of the use mutation hook We're now going to use that it returns a promise so we can await the results of that In our create new user function right here, which is in turn used in this on click handler So we await the the create you uh user function passing variables passing name, which we're getting from The use state hook here Initially, that's going to be set to nothing But we can set the name the name is set in the the input field here when you when you had a name So this variables Property that you that you passed to create user an object with the property variables is saying I want to set the variable of my mutation Which is name Right so that that gets passed in On the on the server side Similar to how we did name bob in the the query variables Panel that we had to lift up Same thing Everyone got that Oh, and we also want to do refit refresh users after we create a new user So then you've got like a An immediate update from adding that user Yeah, it projects very well though So, uh, I'm not familiar that much with react But when you do set name Onto updating the state which will trigger a re render which in itself will redo the use query Which will refetch the users on its own. So why you need to refresh again? Good question. It's it's now it does now So it does now that you know that it's a memory the data is memorized automatically So we're not refetching the you calling the GraphQL API anytime every time We're just calling it once and then case cast data And when you call refetch you actually fetch get the data again Otherwise, you'd end up in uh continuous. Well, no because you're not calling set. You're only calling set name in create a new user It's uh, it's all maintaining in the local state. So it should be These are good questions. Yes When is the data flush from memory So if the if any data use that you you get with use query Is stayed memorized when is it flushed from memory? Do you keep it in the local storage memory or It's attached to the The component so it's not connected to okay to other stuff So it's basically when the component goes out of scope that data you really get lost Which is how hooks work in a core In a core way if for whatever reason instead of doing the queries in In the components themselves you want it to do it. Let's say in one centralized spot on the app startup You just want to get everything like a big app state You would just need a component to do that. You just take it in one and then you pass whatever stuff down Yes, you could do that. Yep. What about the refetches because let's say individual things need to now Let's say the news you could pass the refetch function down if you wanted to Yeah, yeah, or as context Okay, good Great questions guys loving it Uh Set name is the a set state function, which is just this is just a normal React hook called use state if you know about hooks, you'll be familiar with use state. It's kind of a core piece Um, it returns an array with the the value of the state and then an update a function We call it set name because we can Um Oh gosh, we're on part four No, we can try that Dave you want to run that. Oh, yeah, right. Yeah, you might want to run it. I don't know All right. Okay. Okay. So what we can do mpm run watch It might be wrong. Yeah, it might be wrong if I may need to fix it Yay, here you go. Oh, I didn't install it Do what I say not what I do apparently. Yeah No, we also say in the load We're using use query to load the good data Oh, yeah, Dave. You need to update the thing. Sorry Sorry, so again, what's happening? You need to all right. Yeah, you need to do Data instead of users you need to put down. No, it's users. It's fine. It's fine Yeah, but we needed to use no, no, Dave. It's fine because it's already put as users. It's fine You don't need to do anything. You should work. No, it won't just try No, it won't because the users is here inside of data. So we have to get uh, okay Yeah, so we have to do const users Yeah, but I think it was data Yeah, okay. So if you add this line to line, uh, to underneath you do const Destructure users from data Because there's a users array in there that you need to get rid of Or and then that will be then mapped over in this ul element So before we can progress Let's try that to structure. Yeah. Well, it'll work. This will work. Okay. I'm pretty confident. It's a work Let's take him a reputation on it Cool What open hey Look at the Look at the console What is the It's not bundling correctly. Oh really? When in doubt remove node modules Also package lock if you have that Yeah package lock has caused us some issues Hmm Or shrink wrap same thing At least shrink wrap is kind of like explicit opt-in Is this your update? No Is it working for somebody? Well, you're a better programmer than me Uh, that would be a good one Thank you Thank you pet programming So we can create a user Dave you do myself. Yeah, you go to school. Yeah Refresh and it's still there. Okay. So you should be able to do that Were you all able to do it? Because we were not yet. Not without help. Okay. Who needs help? I might not be the best person, but oh you've not um, sorry go back No, go back to user mutation that line. Where is it? You just showed me it here. Um, you're you're not um, you're not calling it Yeah, you've got to pass in the uh Create uh user's mutation. Where is the error? Sorry, what line? Okay Yeah, let's see Okay, so it's where you're trying to do structure From use That's his user query not use query Where is it? Say loud or not? No, not loud Anyone else? Everyone else got this working? Nice Over here Next one You call set native Oh hold on So the same thing happens for the refresh That would So we call refresh Anyone else? Next one Let me see it It's not magic, it's definitely not magic Use query Any hooks or you use the prefix with use Uh You can So this is actually a good question So you might want to say loud Um, I was wondering if you could use typescript to help keep track of all of the different schema Consistency that you need to create across this I think that depends if you if you if you bought into typescript then probably But if you've not then don't Don't use typescript to do this Um I think it's just a completely different paradigm And it's an opt-in kind of thing Like you need the whole house to get the kitchen sink Um, I like typescript for the DTS files because I think that has Value in like across all kind of schema interface thing And I like typescript because it can process JS doc So that's completely opt-in and you can Apply a tool to that at any time you want to Um, beyond that like I think it's about You could use that in that way You could use JS doc with typescript To help with the GraphQL kind of typing Like that But I like that because it's totally opt-in Um But if you're using typescript then why not There's actually a library as well recently There was a I think it's called like TS GraphQL Or GraphQL TS Where someone has actually done a project where it's like Emerging of those two things So it might be worth checking out if you're into typescript Yeah, yeah Yeah, no again I think like if you follow Matteo's Advice of like never change your schemers Then that's easy But if you ever want to change a schema Like the more you kind of enforce those types The more places there are to change And the harder it gets And yeah My thing with GraphQL as well is I wouldn't I wouldn't I would use it when I had no other choice Because as soon as you start using it You have overhead So like when I'm green building I'd say don't do GraphQL Until you get to this place The complexity here is running a little bit Out of control So now we need to use GraphQL Unless the project you're green building Is a back-end project where With no front-end component That the organization is separated in such a way That the front-end team never want to interact With the back-end and there's no full stack Say there might be a mobile team Like that, in that case It makes sense to do GraphQL from the start Because then they can always define exactly what they want Yeah Of course Of course Come to the booth so we can talk Sorry, say it again When you say let's take me on the server on the client Is there anybody stuck? On the UI Yes, you could do that We want to set the name because we want to display it as well Oh, alright Yeah, so we do it, we take an extra step But you could do that, yes We've got like five minutes Is there any point going to part four? We could introduce it No, I would just go through Do you think? Okay, so have you got any questions? Hmm? Yes, that's the thing Sorry, otherwise Okay, yeah, that's up to you Is, uh, for local testing Is there a way, like a pattern in place For making use query and use mutation return? I would recommend to use just Just mock There is some stuff on the You're wrong, but it's Yeah, that's the react way of doing things I know man, I just don't like it I know, but I know you don't like it I agree with you though It's the react way of doing things Just use the smart But there is some more discussion about this In the readme and so on, and if not Open an issue and we can help out Any other questions? A couple more things that are Interesting in this workshop, so I'm going Through them very quickly First of all, there is some pagination How to implement pagination in this Is a concept that needs to implement Everywhere, and you need To reinvent the wheel with GraphQL To some extent, so There is another way of doing pagination, so please Check it out I'm going very quickly This is just in case you want to continue In your own time Part 5 is caching Again, very important piece Unfortunately, GraphQL It's a nice thing about HTTP caching, so you might want To do some different things for caching It has some side effects I'm not going to go through that much But there is some caching and so on And if you want to go forward There is server-side rendering Which is a pretty important part If you're writing out react applications Can I just say something about server-side rendering in general? No, I don't want to enter the topic We don't have much time Don't server-side render as a default choice That's all I'm going to say If you want to know more why Booth And There is another module Called GraphQL Ux SSR That you can use to piece Nice And GraphQL Ux are also Woo I started to clap These were some people That were involved in helping prepare this Because this was actually a cross-team effort So this was done by a lot of people at NeerFirm So if you want just a big shout To all those guys and girls That helped out Over the course of this year So it's a nice project that we started at the beginning Of 2019 So it's been growing and done pretty well I feel free to throw any PRs or issues All that kind of stuff as usual Hope you enjoyed it You have them on your machine already Go to talk, index.html Just open index.html It doesn't use any crazy framework for doing slides It's just an HTML file You see These might say a thing or two about our style But you know Booth