Sara Vieira - GraphQL + Apollo + Vue js = Magic

okay so my talk is about graph QL I am a big rough jewel enthusiast I don't know what that means but I like craft UL cuz I'm a nerd and I'm gonna talk to you about craft QL amazing amazing introduction you're welcome there's actually not a lot of memes it just pretty sad okay so I'm gonna start with the fact that I really love graph QL like to me that's my that's my doc right there and so I really like rough QL I think graph QL is amazing and graph QL to me is BAE I also have an entire website just a meme photos of myself and this is one of them if you can tell I'm wearing a t-shirt that says ask me about graph QL and a gitlab jacket I think I'm just like a tech company I don't know I just wear a lot of weird stuff from tech companies I just I I do that for free so if you want to offer me I'll use it so my name is Sarah who knew it's not like I've been here morning sorry about that so as Jen said I'm a developer advocate at a company called Wildey we are a consultancy based out of London in Portugal I am originally from Portugal I moved to Berlin about six months ago sorry do not ask me if I'm okay as a personal thing like because since I did a lot of conferences last year a lot of people thought I was in robot so I started adding these two things so that people on my robot I'm really into terrible terrible movies things like sharknado they gave me life for summary like I think I just really like watching people fail on screen and be like see mom I did okay and she's like well but you don't live in Hollywood I was like mom look at Berlin it's great yeah so I'm also really into football because as a Portuguese person that's really all that we got and the next person who I say I'm Portuguese and says Ronaldo to me I swear to Jesus god dammit this even happened in Ukraine and I'm like how does it hell okay I really adore view like I mostly do react in view and I really like view and one of the reasons is the main reason that L'Oreal picked him since the the simplicity of it really attracts me to it usually when I want to create something something that is more simple that as forms or something that's just a splash page or something like that I always use view also because I think the simplicity is just great I feel like view is the Harry Potter of JavaScript libraries and you're like that doesn't make any sense swaye for it okay so have you ever met anyone that doesn't that truly hates Harry Potter it's really hard like there will be people who tell you that they don't like the movies that doesn't count like I mean in general like I have never met I made one person like that truly hates Harry Potter and I feel the same way like in the general JavaScript community and front-end community like I know a lot of people who had angular and I know a lot of people who hate react which is also valid I've seen some weird I once made a switch take minutes in the Innis here in your south components oh I get it yeah that was not good I think that's why people hit CSS in juniors so but I've actually never met anyone who's saying a hate view never heard of that which is great so when proven unicorns okay so there isn't this amazing thing if I am thank you there's this amazing thing called view Apollo that is done by Callum and one of the speakers that we had today so I'm basically just getting his work and getting free trips out of it it's great you're welcome I flew KLM it was great so how do you do this how do you actually integrate graph QL into a view app okay I'm not gonna talk about the backends even though there's this misconception which is a good thing that Tim brought it up that in the language that Sitecore uses they actually have a graph to LAPI it's a very weird fact that everyone just assumes that graph QL is our know thing and a react thing which is absolutely it's absolutely a lie because it actually can be used with pretty much anything even really new languages like rust and elixir have graph QL things the problem was it was introduced at a Facebook conference no other react conference by Facebook so yeah that's how so first of all install it my I use I normally use yard mostly because at one point it was needed and now I just memorize all the commands and I'll just go with yarn so you're just NPM install view Apollo Apollo boost and graph QL so you Apollo is the integration for the Apollo Corps things into view Apollo boost is what has it has everything that you need under the hood and graph QL is well you know graph QL ok so what do you actually need to do so you import the Apollo client this comes from Apollo boost so if you've ever used graph QL graph QL now graph QL but Apollo in version 2 they have this really huge thing where you had to import like five packages so they just got all those packages and made Apollo boost so you can import everything from it so it's way easier to just get started so you import Apollo client from Apollo boost you also important view apart alone from view Apollo and you create a new Apollo provider so you create a new view Apollo and you pass it a default client the reason why you pass it a default client because you can actually have more than one you may not think that this is a great thing but trust me I've seen things in the react I yeah it wasn't good and so you can have more than one client which is really good so the only thing that is mandatory is URL that Apollo call the URI I don't know it always got to me okay and then you tell view use view Apollo please that would be amazing and you will comply and bound itself I mean assuming that you didn't screw up any of them above parts so you're done so you just set up graph QL which is great so now you can actually do things with graph QL but you haven't done anything so well it's actually query some things get some things from graph QL endpoint and query it so all the examples that I'm using come from this website that I made a couple of months ago actually like II I have no idea when I made this but it said awesome talks like party this was a point where that party domains were like 60 cents and it just went bonanzas with it I have a domain problem by the way uh and basically it just I always found it really hard to find really good talks on the Internet like I just went through this really weird rabbit hole on YouTube so i just started collect and making your website with it and it has a graph QL on point so what are we gonna do is that all of the queries that I'm gonna show you are actually real queries that I use on the website also if you know any really good view talks because we actually don't have a lot I would please tell you to go to awesome talk stop party and actually submit a talk it doesn't have to be your talk I mean that's kind of weird if you do your own talk I didn't add my talks there okay now that we that's good okay so how do we do this so the first thing that we need to do is important to keikyu well from Apollo boost so what is B well so geeky well stands for graph to L query language and it's basically a really simple way for you to state queries so this is not an actual string like you put it with template literals but it's not an actual string but using gql it actually transforms it into a graph QL query so the really good thing that I like about graph QL is that it's what you see is where you get so in this case I am querying for all speakers so you don't actually have to pass a name for the query but if you intend on using any type of dev tools it's good to not have all queries named query I've been there it wasn't good so you give a name to your query you can hit whatever you want it doesn't have to be all speakers you can emit you can shortage if you want it's fine and then you say what actually you want to query so on on that website I have a imagine that it's a table into my sequel database or something with all of the speakers it's not an actual table but imagine that and so basically I say I want all the speakers but I went a little overboard with all the things that I have for speakers so there's actually like things like continents and like I don't know there's a lot of weird stuff with the speakers that I actually don't feel up cuz I'm not an actual stalker so mostly of what I have is the so that generates an ID which I need for keys it gives me back the name of the speaker it gives me a photo and that photo is a type of file so I get to URL of it so as you see it's named URL now you work I never mind now URI but so basically what this does it's going to return me an array array the data and in the data there's gonna be a thing that says all speakers and for each of them I will just have this so there no more over fetching I will just have the ID the name the photo and inside of the photo the URL which is great so I don't have to check like oh can you please just remove the countenance because I actually never put that in so there's also a query component which is this gold flat would reference okay no okay so there is a Nepali query component and you can also call this in your methods I honestly prefer it this way but it's also I think this is a thing from also using reacts is that I like this pattern but if you don't like it there are other ways to call your queries and your mutations but you do it in the methods which is completely fine as well so you call a query you say Apollo query and the only note and the only parameter that you actually need to pass is the query gray so the way I do it here is that I just required a file you can import it and use it in your data or something but I just required a file and since it's a common Janus module I need to get the default you need to get the default this may have happened to me okay so then you have a template and this template has a scope into it and the scope returns you the results so the result is everything that it went to the server or to it went somewhere and it came back with a result so in this result has three things it has the loading the error and the data and one thing that you can notice here is that it has the loading and that means that you know if it's loading and that means that you don't have to set is loading flags on view X which is gray so what do you do so one thing they can do is just check if it's loading so you saw it shown h3 and check via floating and if it's loading gave me just show me the loading thing and if it's an error just say to the user something went wrong it's probably your fault I'm so sorry please update your browser so okay so if none of these things happened that means that we have speakers ok cool so we have a data that all speakers but we have length so we check if there's length and if there is there is length we can actually do a v4 and this is what I needed a key and that I just show the image of the person so there is no extra things that I need to ignore out of it there's no extra anything which is really good and I forgot this part so this part means that if there is a V else that means that it's just empty and you can just say there are no speakers so you can also abstract this into its own component so this is what I usually do and basically all the loadings and arrow states in your apps should be the same usually if they're not like please talk to your designers because they kind of should so you only you actually care about the data so you can abstract all of that part and just get the data okay so let's say you have variables so in this case this is our graphical variables work so you have a query and then there you pass it a name and you need to tell it what type that is so in this case it's a string no one has a name I mean I'm not gonna say no one but it's not very common to have a name that's like integers so it's usually string also because you can just do string integers and so basically the way that this is set up at the back end is that I can filter with name contains instead of saying like name is equal to so for example if you search for Sara it will show me and the cool Sara it was for both Sara's the real Sara but if I search just name equals it will means that if you search for Sara and no age only I would show up which is not what you want obviously so and then you get the exact same thing so the rest is exactly the same so you just say I want the ID the name in the photo so let's attach that to a V model and we just have a V model of search and then we have an Apollo query that the only thing that we give it is that we want the name of the variables that are here to match the name of the variable that we give it here and in this case its name that we defined at the top with the with the dollar sign so variables and name equals search because that's any more of our V model and then we just get the exact same thing so we just do the exact same thing we were doing and we just loop all over it so if it's a loading show if it's not and we already got variables hooked up to a form and the user can search you can do all sorts of things with the search you can filter by pretty much anything which is great this uses Postgres in the backend which actually has a lot of flexibility when it comes to searches so mutations so the way graph QL is that you have two different types of things one is queries and the other one is mutation so you can think of queries as get statements and mutations as posts or put statements or delete statements or mutations make mutations and queries just Kelly good thanks it's great okay so there's also a mutation component so okay so how do you actually call mutations in graph QL so you first give it the keyword of mutation and in this case you actually need to give it a keyword because if you don't pass anything you will assume it's aquarium you don't need to give it a name but for you know sanity's sake please give it a name so you give it a name of create speaker and in this case you need to pass it something to actually create the speaker in the backend the only one that I have that is mandatory is the name so I say okay you need to give me a name and this is mandatory and that's what the exclamation mark after string this exclamation mark means is that it's a mandatory field so if you don't pass it it will just blow up in your face it will tell you why but it will blow up in your face so then you just call the mutation that's to find in the back end that's called create speakers and you say name is equal to the name that I give you which like I said you can name anything so in this case I just get back the ID in the name okay so there's a Nepali mutation and the way you do it is the same way so you pass a mutation to it and you get the default out of the meeting of the file that didn't happen okay so in this case we have an input that has a v-model of name so that means that your file thing will be connected to it and then with the variables you just pass it the name equals name because of es6 i don't have to say name call a name so I can just say name and this means that as soon as I eat hint hint hint yeah that was not good so as soon as I submit this form that v-model will go to the server and mutate the thing so in this case we also have template scopes we also have slope you know what I mean we have templates with scopes in it and in this case this gets the mutation the mutation function which by default is called mutate you can call it whatever you want I guess we'll just call the Mutai and there's a loading and there's an error so as soon as I submit I prevent default this is something that I think also just take for granted the submit the prevent but god damn it is a good I wrote so many less functions it was great so and I just call mutate on it and since I call mutate it will automatically pass it to variables that I defined at the top and it will create me the thing okay so that's cool but one problem that this approach has is that it doesn't actually update the front end so what we do is that we go to the back end and we tell it ok there's a new speaker please put it in the database but I don't really update the front end and I really want to two-way data communication on this so there is an update function so as you can see here on update I am calling a thing called on update and this means that whence the when's Wow when when's Wow ok is that Dutch yeah it is thank you doesn't mean when okay so when's the thing sends it to makes your actual mutation on the server you will return it will run a function called update and in here I am saying that I want to run the method called on update and let's define this so this is really weird but I'll explain it gotcha Femmes so this gets the cash and he gets the data that you pass to it so in this case the data that you passed was just a speaker's name basically which makes sense okay so out of the cache where you can do with the cache is that the way the reason why Apollo is so good is because it stores everything in a cache and you can use that cash as a data store for example you can use a cache as anything that you want and you can also read queries from that cache because it stirs them in the same way that graft will work so if you pass a query to your cache it also will return you things so what we're doing here is that we're getting all of the data from the cache but we're reading the query of speakers which is the thing that I said with all the speakers basically and out of it I'm just deconstructing all speakers you can get data that all speakers the same thing and you also can write a query to the cache this is kind of misleading because you're actually doing a mutation but it's cached I'll write square you'll actually change what's in the cash and by doing that it will completely change the front-end because what the front-end shows it's what's in the cash not what's in the server and so you pass it a query the queries speakers so you want to query all the speakers and the data that you want to pass is what you're actually going to change in the cache so you get all speakers so all the things that all the speakers that exist and you can catch the one that you created so in this case I have an ID in a name so basically I can cat ID a name which I just deconstructed but you can also do concat and then name equals create speaker that name ID goes great speaker that ID and then so if you want to add things so in this case I just added a place kitten photo so you can also add things like this so you can it's not forced to come from the user input you can add these things yourself so if you just wanna add memes to everyone you can do it I'm pretty sure there's a meme API if there isn't can you please tell me I'll make it like real fast it's fine so there's also this really weird thing called type name so this is what Apollo uses to know what the hell your things are so when you query all speakers it assumes that that type is the speaker type and that's the type name that it gives you so when it queries things it can actually do that way faster because it already defined what each thing is make sense that's too many people for me to know okay so I have a demo of this on code sandbox I'm not gonna pray that thing tonight works but I have a demo of this one called sandbox and that you can check it out I will also share my slides obviously so you don't have to memorize this link it's fine and so another thing that you can do with graph QL and that you can do with Apollo because of the way that the cache works is to use it as a store so you can actually use local state and you can use mutations and queries to change your local store so the store that you use is not just for data there's other things like ocean but there's other things like you know I'm serious like forms or like check if the users online or random things that you may need to store forever like the user name for example you don't want to get that all the time so you want to store that in in a view X store or in any store any type of object and get it you can actually store this in the Apollo cache so you can make queries to the local state and whatever you have on the server so this means that you never shipped shipped shift that's the word you never shift your mentality so when you're coding graph QL when you're making the queries when you change to querying local data you actually just do the same thing you just write graph QL queries which is great so yeah so I know that I'm what standing between you and lunch so yeah not really we're not really a fan with that okay so this is totally not readable so I'm gonna do this so all of my slides are at a view I - Apollo - magic is that now that is H and so you can check them out and you can also check out the code sandboxes that I have there and I think it's honestly as the person who's been using graph QL for quite some time I do think it's a really good step forward in terms of data fetching data and mutating data I think it's something that really oversimplifies the creation of apps and I would really advise you to take a look at it also please don't clap because I'm also the emcee so I need to tell like really jokes before we go to lunch so don't make it more awkward and yeah that's about it what did I just say

Channel: Vuejs Amsterdam

Views: 11,104

Keywords: Javascript, vuejs, react, reactjs, angularjs, angular, angular.js, react.js, frontend, front-end, frontend developer, developer, coding, programming, html, html5, css, css3, webdesign, web developer, code, tutorial, vuejs.amsterdam, frontend developer love, frontendlove, graphql, react native, mongodb, nuxt.js, nuxt, nuxtjs

Id: XXxgG1Ez_Eg

Length: 21min 21sec (1281 seconds)

Published: Tue May 07 2019