Build Apps With Vue 3 + Apollo Client 3 (with Natalia Tepluhina) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we have i'm gonna get this right natalia did i get it right yeah yes this is almost right oh as close as i'm ever going to get okay so i am super excited to have you on the show thank you so much for being on here uh because we are going to talk about some really really fun stuff uh which we'll get to in a second because first i want to talk about you for those of us who are not familiar with you and your work do you want to give us a little bit of a background of course so my name is natalia and my last name is deep luhina so jason was almost correct on this and i'm a vgs core team member i care mostly about few documentation so if you are reading view three dogs this is like part of my work together with a few docs team and like on my everyday life so like i'm i have like full-time job so working for git lab i'm a staff front-end engineer working for gitlab by day contributing to view by night which is like normal open source development i think yeah like a true superhero developer by day developer by night um open source by day open source by night definitely um well yeah so uh so i'm really excited today because we're gonna talk about something that i i feel like i know reasonably well which is graphql uh but then we're going to talk about something that i don't know at all which is view um and so i've done a an episode with like divya takashi and came on the show and and we looked at vue um i've had uh gift egg on the show and shirley will on the show and we've talked about vue but i haven't really managed to learn view i've managed to like put things together to make view apps work but not to actually understand right so i'm really excited to dig into this um but we're specifically talking about view three and apollo client three both of which are are pretty uh pretty like fresh right and so what in your opinion what's the most exciting thing about vue 3 like why why are you excited about it a few things first of all as a person who works on enterprise application by day i would say performance because vue 3 gives us a free performance boost without refactoring our components to functional ones it's like great thing because we have performance issues and this is going to solve them second is not for my everyday work but for a person for me myself because i had an extensive experience with angular i like typescript i have a stockholm syndrome i'm sorry so view 3 is written with typescript and it gives you typescript support right from the box and it's really great because everything is typed without explicitly writing typings which is amazing and third part we will be slightly touching it today is a composition api for react people this is something similar to hooks which is not hooks but similar to them this is a way to abstract logic nicely and to reuse it nicely as well in a functional style so it's for view it's kind of new thing because previously you could abstract logic on component level you could create mixins this is a moment of pain for everyone who used mixins and you could work with renderless components but right now we also have a functional way to abstract logic i'm really happy about very cool very very cool um and then when we're talking about graphql uh so i found that like what i like about graphql is i'm i'm really fond of the discoverability of it right i like that if i've built a graphql api i can send it to my co-workers and say here's the api and i don't have to write a bunch of documentation or send them you know detailed specs of of what it's going to look like they can just look at the the playground and kind of figure out how things work um so you know that that to me is always kind of one of the biggest benefits i i'm curious if there's anything that that you find like specifically exciting about it that that um you know that makes you want to work with this pattern so first of all as you told is like its discoverability second one is basically what you ask for is what you get and this is very important if you work with a huge structures of data let's say repository and like a small example not from gitlab from github from github version 3 api which was rest api imagine i want to fetch a list of repositories of a certain organization and i want to know what languages were used on every repository and how many forks does repository have so first step i fetch a list of repositories first rest api call every single repository is a huge list it's like basically 200 properties on every repository object do you think i get languages there no i have a link i have a link to like languages page do you think i have forks no i have a link to forks so now i'm iterating over all the repositories and for every single repo i make two rest api calls one for forks second for languages and that's per repository so if you query 100 repositories you're making 300 or no you're making 201 rest api 101 yes exactly sometimes you need to make them recursively because they are paginated enjoy and then if what if i want to do this with craftkill i just use github version 4 api which is graphql api and i fetch a list of repositories with only two fields forks number forks count and languages that's it one api call no overfetching not like all the data i don't need at all yeah easy that is super exciting it's something that i'm i'm really really into as a as a general practice right it's like only deal with the things that you want to deal with and not the things that are um you know like we we just we just only want the data that we actually need right like there's no there's no benefit to pulling in megabytes of data if it's all just gonna get trashed when when we're done building the page imagine if you're on mobile and you have like a low connectivity mm-hmm and that and like when you're talking about static site generators which is something that i talk about a lot um one of the things that that happens is when you make api calls that data that api result is going to get embedded in the page so if you are using a traditional rest api and you're putting this data into a static site generator you're actually including the full result of your api calls into the generated json for that page with gatsby or or you know nuxter next or any of these these you know exported sites so if you are over fetching that isn't something that gets abstracted away by static site generators you're going to send all that data down so graphql is going to give you you know give you the ability to just solve these problems um but yeah so i i know there's a lot we want to do today and i want to make sure we've got plenty of time to do it so let's let's switch over to uh working on some code before we do that let's take a second to uh to thank our sponsors we've got live captioning going today i still haven't figured out why uh why my site has betrayed me and won't show me the the embedded uh captioning but it's at streamtext.net uh which i've just pasted a link in the chat you can see live captioning happening right now um this is made possible through the generous contributions of uh sanity off zero netlify and fauna who all pitch in to make this show more accessible to more people and i just realized that i've got double chat boxes going on i fixed part of my overlays and it caused it caused other issues so slowly but surely this stream is gonna get dependable again i swear um in addition to live captioning make sure that you check out natalia's twitter go follow her um and we my site has become self-aware yes that is that is correct [Laughter] uh but yeah go go follow natalya uh it is a a non-stop stream of great insights um and and a lot of things and also if you are feeling generous today i am currently matching up to 2 000 in donations to black girls code so if you are looking for a tax deductible donation to make go make it today and you can double the impact of that um just post your send me a tweet with your receipt and i'll match it up to two thousand dollars u.s um okay so we have view and i went to v3.viewjs.org um and then i'm also looking at the apollo client here is this the right page yes i think this is the right page and we will be also using view follow which is an integration but don't go to their website stream use v4 v4 view apollo let me just find a link like v4.apollo.vs.org okay got it yeah yeah this one all right so these are the tools that we're going to be working with today um and we started a live share so i have an empty folder here and we can see that natalia's in here um i'm going to remove this one file and then i think we can just get started right so if i want to if i want to get started what's the first thing that i should do let's create a project with ucli and i hope jason has view cli installed because if he did it so we will create a project and right now view cli you type view create okay and if you have a folder already created you can just have a dot here okay and that's enough i think okay here we go no uh generator yep exactly excellent no we will manually select features manually select okay yes we don't need linter screw enters i'm just using printer global but this is fine we don't need any css processors we won't be doing any but we will be choosing view version babel is fine let's leave babel where it is okay so okay we are ready enter enter yes we are going to use view three it's not a preview anymore in dedicated config files no we don't need a person i mean you're not working with view shame but fine [Laughter] i'm biased okay so this you have i mean you have view it's two of your core team members at netflix with you i know yeah we um so sarah jasner is a view core team member and then we just hired ben hong which we're super excited about um so two people write interview documentation that is yep um that is definitely a strong argument in favor of you but they're gonna have to fight me and cassidy over it so this sounds like an interesting netlify challenge i would say like make a fight and whoever wins that's a framework perfect did you see did you see when uh cassidy and sarah did the the chicken fight no so oh my gosh cassidy plays this game where you start back to back and then when somebody says go you have to act like a chicken and the first person to laugh loses and uh it is really funny i there's there's a video somewhere that i'm not gonna be able to find right now um but if you can find it it's sarah and cassidy having a chicken fight and it is one of the funnier things that i've seen it was at a conference um like maybe jsconf hawaii i think oh my god i need this [Laughter] but uh okay so we've got we've got a project so in here i can see that we have um some view the babel plugin the cli service and what's this one is this single file components yes it's compiler sfc but i wonder like i can see only node modules probably visual studio code is like not loading all the files for me unfortunately i can only see them on the git get ignored it may have skipped that um did you do you need to see the node modules not really so what we have here right now is basically a view project and would you mind running it so we will need oh you know so you will have a service creed so yarn serve will start npm so your npm thumb oh this one is well i see it's in it's in either this one looks like it was set up in yarn so we can use whichever uh and here is our local site yep beautiful it's running for me as well so beautifully it's like a very default view application but i i'm happy you find our view logo beautiful i mean i like it as well i mean i think this is what i do like about this is is that it it actually like takes you places um i feel like a lot of projects make the mistake of their their hello world is just like a hello world um and this actually is like hey you started a project here's where to go next so props to you and the rest of the docs team i think we need to replace like a few linux here because they are mostly for v2 ecosystem but still and by the way have you ever noticed that three main let's call frameworks rgb back angular is red react is blue view is green i had never noticed that and that is amazing um but i guess that means with our powers combined we can create the whole rainbow it's true so we have a project everything is great and let's start our definitely great challenge yes we use in trying to install a power client so small spoiler while view 3 is released as well as apollo client 3 is released both are still catching up with their ecosystems which means that all the integrations are way behind so what we're going to do right now to make things work is we will be installing view apollo okay which works perfectly with view two but we need to do some really hacky work on it to make it work with view three so bear with me first of all we have your application website not think about viewable let's install a client okay let's go to apollo documentation i think you have it open i can do the same if you want but it's like up to you okay so we've got our our documentation here explore docs it has an installation part get started i guess it's okay and there is like npm install apollo client and craft gel yes and since we have a yarn lock i will use yarn instead i'm going to i'm going to try to remember to use yarn i've uh i've been like i feel like every month i change which one i use i'm like oh yeah yarn is better because of monorepos and then i'm like oh monorepo's make my life hard i'm going to use only npm and then like just back and forth and back and forth so we have apollo client installed yes here it is now my like my internet connection isn't stable probably visual studio code is eating all the connection possible so let's go to main.js and let's start with creating our follow client for now let's forget about any kind of view integration we just want to create a client and we just want to make a first query with very simple promise no smart queries no magic at all okay so let's import two things from apollo client which is actually apollo client and creating in-memory cache okay and let's start working on the client don't you mind me typing because it's it depends like if you're fine with this no no go ahead this is great so let's create default client and this will be a new apollo client instance and here we need to specify two things in our application first is the url of the graphql server and please let me know if you have graphql server running locally uh let me check i think i started it let me make sure i mean it should be on localhost 30 000. if it's running it really doesn't like this so is this on is this on view two by chance do i need to install the whole oh no no it's just a polo client so it's like it doesn't care about any kind of framework it's just just a polar server it's not running it's fine we will use like any kind of free api okay that's so weird because i have i have it okay no worries i will use rick and morty api for now if you oh weird i'm getting a yarn i know because what what the same because for me it's really very blurry so i'm like trying to recognize it sorry it's saying that the uh yarn package flat map stream is 4040 like that package is missing or something i wonder if it exists online npm meanwhile i will try to create a link so we need to specify the url and i will be using freerick and morty api with the graphql they have rest api and graphql api so if you're about to compare this is like really great thing yeah it's a wonderful and let's create also a cache which will be new in memory cache if i'm correct should be fine like i'm checking the docs on the background because yeah it's correct i'm i'm the same way okay let me share a link with you to the rick and morty graphql api so we will be able to check the playground and show how it works i just copied your uh your link from the code so here's okay all right so in here we can look and this is what this is what we were talking about when um when we were talking about the api being discoverable right is that if we come in here there's a docs over here where we can see everything or my favorite shortcut if you hit control space it'll just pop up all of the available things so if we want to get a list of characters then we can look in here and let's see we'll get some results and then let's let's just get the name and we get let's just got the name it's beautiful and and look we only got the name but if we want something else we can get that too um and and this is what natalia was talking about when she said that you only get the data you need you're you're not over fetching you're not loading a bunch of stuff that's gonna just remain unused um and you know as you get into apis that have tons and tons and tons of data you can imagine like how much of an impact this will make on the size of the the data that you're sending down exactly so let's try to use this query in our application let's just copy paste whatever you created for characters from the graphql playground i mean it's not graphical it's prisma right it's prisma playground yes they use prisma but um it's like let's call it playground because it is so let's create the first query here yep and here we will need to use ejql right because we need to use a templater and that's going to come out of the of the client right i think it's from graphql tag let me just import it here it will be input gql from graphql tag i guess i'm just not sure if it's default import or it's named imports i'm quickly checking the documentation here as well and oh it okay oh they have it by the way we're correct they have it in client three oh nice very cool it's embedded it's embedded right now i just get used i got to use the apollo client too but i feel like that was kind of one of the major pain points of apollo client 2 is that everything was so modular that it was like you needed 15 packages to to use the client and so this is kind of nice that they they took that feedback and brought it all back together for v3 exactly because you were installing i think like 10 different packages like people previously even the state management was separate it was apollo link state so now we can work with our client because we have default client and we have a query so let's make first call so we will be using default client query and here we need to specify the query actually right and then we need to like resolve our promise so let's just console log it we have response and let's do my favorite stuff is like i always have this joke at conferences because like if you're google developer expert you get to really know chrome developer tools and for me it's like using console all the time and the debugging with console log and enjoying counseling like everything explaining with console logs i'm kind of kind of a console log developer advocate i am i feel very much the same people continually show me how to use the debugger and i'm always blown away by how powerful it is and then i never use it and then okay let's go back to console if you say i can cancel lock everything okay so i'm starting this up and that should give us a um a list of characters yeah oh wait something went wrong the dependency was not found we're missing i guess what dependency is dates react react so now it's the best moment that looks like that's why i'm on this stream we got to install react into the application okay so i'm going to yarn add react and don't ask why because when i discovered this my main question is like apollo why why you so cruel to me why you make me install and react to your app but probably they will change it to be peer dependency at some point i guess so but so far it's very funny if you get the installer here but we have an application running we have an application running and let's check the console okay so we we need to parse it as json but we got a response yes okay let's see so we can just take this here and we will add one extra log where we can do uh res json and now we should see our actual characters here i think maybe maybe oh it's not it's not a response what did i get wrong let me check the code hmm response type explorers body it's a readable stream huh i mean the main thing here we got a response we're not going to use it so it's fine i mean we were correct we are hitting the api we are getting 200 we are happy in a in a related note i was able to get the um the local api running um and so now we have a list of wines so let's take a look at this and this list of wines is really ugly because i think i was adding like some test wines so i'm sorry for this i screwed the list of perfect hungarian wines oh this is great this is and yeah this is a great list because we have um we've got a bunch of wines here and if i add let's add a description and maybe a variety right beautiful yeah lots of stuff yeah okay perfect um and then the the reason that we wanted to use this one is that this adds something new which is mutations mutation and subscription but we'll see how it goes oh wow subscriptions all right let's get serious in here okay so um so now if we want to we can pull in data from our uh from from our own api so if i drop this one in instead and we do this let's see if this one works for us i guess i can prefix with query just for the sake of clarity yeah and then if i come out here it doesn't like our response.body for some reason like does it need to be like that no if you remove it yeah i don't know i don't know why it doesn't like our try to remove json at all and we'll see how it goes oh here it is okay so graphql is doing the json parsing for us so here's our list of wines okay perfect so we have all wines we have it fetched now let's try to kind of make view and apollo client friends yes which is not that easy so we will be working with view apollo as an integration and for this we will go to view apollo installation part we will skip all the view cli three projects we will skip everything and so on so whatever what we want to add here wait what are they actually oh installation part got it so yep but don't even try to like you add apollo no because this is for view cli three project and it will try to install and fail trust me okay so the only thing we need to really install right now is yarn add view apollo but we will be using very particular view of pablo so okay if we scroll down a bit i'm just trying to find the correct place there because if you're going to use this documentation it's a bit outdated it's exactly for view too okay all the apollo boost as you can see it's apollo client too as well so we have apollo client installed and you can click on next steps and you will see that there are three different apis for view apollo option a classic api really need a name with a smoking cat it's like hahaha classic no we're not going to use classic api okay we will go with composition api okay so you we can click on the composition api and you will see like npm install view apollo composable so we are going to install this and we are going to use yarn okay yarn add view apollo composable composable yeah okay so now we have now there will be some magic okay doing this and let's start we will have errors no worries this is expected okay so what we are going to do here again this is the code you would need from view two for view three we will still need to import the default apollo client from apollo composable so let me do this for us okay and you can see that the syntax here is slightly different from what you can see on the documentation there is no more new view and the render looks different as well and you may ask like what is going on here so view three we changed the way to bootstrap a view application right now we're not creating a view instance we are creating a new app and we are mounting it that's why we will need to change the syntax respectively for our application as well so bear with me first of all we will be using setup provide it's kind of the same so this part is not changed that much the only difference here let me just quickly go back to the code so the only difference here oh wow my wait a second my live share yeah it's like my live share for a moment gave me like total freeze so we will be doing the same with the setup okay so here on the create app we're going to have a setup function which is instead of app we will be using an object so here we are defining a root component instance previously it was app because we imported it from here so right now we are going to use the same like oh it's not formatting for me so instead of apollo client we will be using default client and that's the one that we set up exactly we just created it here got it and but here is provide and in the documentation it's imported from the composition api let me explain this cryptic magic okay so a composition view at view composition api is a plugin for view two to use this new api with old version so it's kind of like a bridge okay here here we have u3 so we don't really need to import it from composition api anymore but we will need to import provide from view and if you wonder what provide this what is going on here if you work previously with react provide and inject is kind of similar to react context okay you provide something in the root instance of the application and this default apollo client will be available in every single component you don't need to test as a prop with all the component chain you can just simply refer to it and use it whenever you need and it's also great for dependency injection so what we're actually doing here is dependency injection makes sense okay i've i'm following so far how you feel chat you you following it might be a bit complicated i think yeah i think people are with us here so this is exciting right so so um and i like that it's being you know again talking about uh consolidation like taking feedback and and consolidating these apis so that it's all approachable in one place this is this is really nice so um so now that we've got a provider we're able to provide our uh the default apollo client and the default client and basically what we're saying is we want both of these things to be available in any child component is that correct yes exactly it will be available everywhere and under the hood our composition api will be using this as a default client previously you would need to add apollo client to view prototype using view use view apollo but i think like for me it always feels like if you adding something to the prototype it's a very hacky way and it doesn't feel clean to me if you refer to something in the prototype chain so it's like okay now it's a bit better but we did a provide but we still need to render something we actually need to render our app component right so we will add also another function here and the render function would be it's just a render and you can see like benefits of typescript even so we are not using typescript here it's already like giving us all the signatures everything what we need here i think it's yeah it's it's showing on your screen but not mine so let me see what happens when i go to do this okay there we go so uh i think it might be because my i have everything in my vs code turned off to be less noisy during streams oh okay okay sorry this we ran into this um last week with with ben olugwadu where um to get the typescript stuff i had to use my other instance of vs code that doesn't have everything turned off for for streaming um so if you want to see how that works in vs code uh check out that episode i'll i'll drop a link to it real quick um but yeah for now you'll just have to trust us that works because it'll take way too long for me to go and and set up a new live share and everything [Laughter] so we are going to return and here it will be a small function called h and here it should be imported okay it's not auto invert so what h is is actually creating a virtual virtual dom node and its age just for usability and we want to render our app so it looks a bit more not a bit more a lot more verbose than it was previously right but we want to provide a polo client and if you work with apollo client it's always like some additional setup so let's try to run it and give all our console errors okay so i'm serving and let's take a look at what happens okay so so far no errors yeah reloading the page oh no errors nice no errors okay it's like it's magic when you're doing live coding you always have errors apparently jason doesn't i know it's like okay so should we take this uh this part out do you think the yes i think we can remove the query safely okay so we can get rid of that part yeah let's let's comment it um so far so good i mean app is rendered we have no console errors so let's start working with queries and get our errors back because we will i've been experimenting so it's fine let's go so now let's not go let's first of all allow our webpack to import graphql queries from gql files okay because you don't want to write a query every single time using gql and for this we need to create a configuration file because in view if you want to work with webpack and configure webpack you would need to create a file called view.config.js and you can see even an icon here is kind of like yeah vs code is smart enough to say this is view config and here i'm going to cheat honestly because every single time i'm searching for this config and every single time i'm like finding it back in my old project so i just copy paste it and i will explain so this is basically webpack config it's not view related at all and we're saying that if you see files with extension graphql or gql please use graphql tag loader then and make them be able to import and use in js and view files that's it but we're just creating a new rule for like your files and for this we're also going to create a new folder that's how i usually do this i call it graphql it's very visible and let's create a new gql file here let's call it all wines dot query dot gql again you're completely free in naming graphql queries however you prefer but we came with this name convention where first is the name of the query then you define if it's query if it's mutation if it's fragment because you can use fragments with graphql or subscription and then you actually have an extension i'm not sure it works for everyone but i think it's useful if you want to like see them very descriptive loan names but descriptive so jason let's copy paste our query for all lines here okay we will be using it just grab this out of here okay i guess we can be descriptive up here yeah and i think very and let's give it a name because i have like ocd about this apollo devtools complain at you every single time you use non-named queries okay okay okay it's fine it's name now i'm happy about it so now we have this and let's go to our app dot view okay and let's try to make the query from the view component using view yes this is the part that i'm really excited about because this is uh this is the part that i feel like this is where the light bulb goes on right um so before we do this there's there's one question in the chat would this setup work with uh with veet i hope i'm pronouncing the name of that project properly you are absolutely correct people always name it white when it's fit and i have no idea if it's going to work with bit because we will be hacking even this one okay okay even if you see a light project because if your apollo is not ready i've seen some issues regarding bit so i guess it it works the same way with a bit and the apollo is not ready for both okay and if you check issues of view apollo repository there is something like that people refer there like it's not working with bit but with this small patch which is like 200 rows you can make it working should be fine so let's go to our app view and let's add a very new thing so basically what we have here is a typical view single file component yes where we have a template part a script part and style part and we don't care about css and i think this is a like this is one of the things that if you're not familiar with vue this is this is probably like the the most kind of view specific thing that i've seen is this setup this is this is something that seems really unique to view um and it's something that's incredibly powerful too like i love this idea that as i'm working on my my components that everything lives in the same place but isn't some kind of like very specific syntax so like i i personally don't love uh css and js right but i do really love having my styles co-located with the things that are happening on the page so this approach is really really nice where i just get to write regular css but it's in the same page um and so i think this is a really unique and this is one of the things that i love most about vue is is this approach to organizing code but it's also a bit a bit limiting because you need to really work on your components not to grow to be incredibly big otherwise you're just scrolling all the time fair enough so basically what you have here what you see here it's called options api it's an old syntax i shouldn't say old it's one of the current syntaxes as well and it's still a default syntax so what you can have here for example is data and here in data you usually define any reactive properties you are going to work with let's say message i say hello jason and you can change it reactively you can show it here on your template and there is one of the differences between v2 and v3 in view 2 you would need to have only one root node so i would need to wrap everything in div right now we can work with multiple and you can just show your reactive data here for example so if we go and check our website there will be a message click right below everything yeah and it's shown here so this is basically options api you can have methods here which are basically methods to change anything to run like the functions you can have computed properties which are getters mostly getters based on reactivity and so on let's also play with the composition api so let me first change our familiar data to something new and this is called setup okay setup is a new option that is present in the composition api in terms of life cycle hooks it's running first before component created so if i create something in setup it will be available everywhere in the options api like data or computed or methods but i cannot access data from within setup our message simply doesn't exist the moment when setup is evaluated let's move message here just to show how it works so for our viewers it's not that cryptic i will create const message and here we will make a reactive property based on the string hello json as initial value okay for this so v3 is completely three shakeable we will be importing every single method we need here and here i will be importing ref from view what ref is doing i will be calling it as a function with hello string and i will remove this from data for now what's going on here under the hood ref will convert message string into an object so i'm just showing how it looks like this will be an object that contains a single property value which will be equal to hello jason string okay you may ask why you have a primitive by converting to an object view three is built with proxy based reactivity and to make all the reactive dependencies tracked with proxy you need an object because you're proxifying objects they're not primitive values that's why any primitive is converted to an object and this object is tracked reactively got it good thing inside of this setup function if i want to change anything of the message i would need to use use message value okay because this is an object but here in the template it's automatically unwrapped for you let's return and so we just return it yes we need to return it got it okay we are returning it from setup and right now it's available everywhere in the options api as well is as in our template so if you check your android website right now yes if i didn't make any kind of mistake there should be hello js string again yeah so this is like what we are going to work with we will be using a few functions from view apollo composition api so now you know that we need to work within setup okay and here we go with the syntax that is more familiar to our react friends what i'm going to do i'm going to call a query here i'm going to use our allwinds query and make an api call from within setup and for this i need to import a method i need to use use query from view apollo composable why it's not autocompleting for me this is probably my um this is my setup betraying you [Laughter] sorry it's like where is my auto completion i'm almost sure i typed it correctly yeah you yes i hope i really hope for it it's like we cannot cheat with jason set up so we have used query here and now we are going to make an apex so i want to have some result and i want to call a graphql query and i need to import my allwines query gql so let's go and input here import oh i'm sorry import all wines query from and let's just so this should be correct okay so it doesn't like something unexpected token do i need to restart it after we did the yes yes because we changed webpack setup okay so let's try to restart it stop and restart and hopefully that'll clear this up for us there we go okay okay so it's not complaining about the setup anymore but let's go to our browser and check the console there i just use query i just want to see okay websocket connection um let me just reload here okay here we go uh cannot read property apollo app tracking of undefined yes exactly and this is the problem i hit when i was preparing for the podcast i was like yeah let's just make it work okay let's search github issues oh no matt is like we want to make it work so there is this one is reported already to view apollo i think three times okay and there are pull requests created to fix it they're just ready to merge and they're waiting for maintainer to do this but they're not purged and i was like what do we do in this case and there is a way super hacky way let's make it work anyway so what we're going to do here we will create node script okay that will just run and change a few of node modules actually change view apollo cloud module with all the fixes that are mentioned on this pull request oh perfect so bear with me let's create one more folder here not on this src let's just create a new folder right here let's name it scripts so if you are going to share this repository with your viewers people could easily find it let's create a new file let's call it patch dot gs and i will just copy paste all the things here don't even try to dive into it it's very cryptic it's just reading it's basically just reading loading tracking js okay and use clarity.js and it's changing a few things because vue apollo is still compatible with view two in particular it's compatible with composition api plugging so it uses a few things from old syntax so it uses dollar sign root and i believe jason has this in that console and it's like it's complaining about dollar sign root we are going to replace it with root so what do we want to do here now we are going to just run scripts patch jess okay do i need to run this locally yes please try because for me it's like i cannot find this one okay so i'm going to make this executable and then i'm going to run scripts patch js permission denied why how dare you um let's see i mean you're the master there i know right this is my machine what are you what are you what are you trying to tell me here um read write i said to execute chmod oh did i do minus x i bet i did uh plus x scripts patch and then let's just try that again syntax error oh we have a we have a bonus wait no we don't line one const fs require fs why oh maybe it okay that ran i ran it as an actual node script awesome okay so let's try this again oh you know what it was we um it i yeah if we had put the like the shebang to identify it as a node script um that would have been different so i was i was doing it one way and you had written it a different way so that's just me not understanding and so now if i rerun let me clear this run again invariant violation expecting a parse graphql document so actually i think i know what this one is i think we forgot to put our all wines query into the use query let's try that again hey no errors hey awesome okay at least it's not breaking it won't be shown everywhere right now because we didn't return it right but if you check the console for graphql calls there should be a graphql call for our api and we can check refresh it because we are running it on components mounted and check if there are any graphql here it is there is one right excellent okay so we've we've got our data um so now let me see if i can do some view i'm going to try something so i if i knowing what i know based on what you did with the setup function if i want to store my wines as a value then i would do const wines equals ref and then i could do result data all wines and then i could return them like this oh that's how close try it and i will say what is wrong here okay so i'm going to try to use this and we're just going to see what happens if i try to dump all of this data and it explodes and it exploded because cannot read property all wines of undefined exactly oh because the query has to finish query is finished but if we are not so first of all let me say first of all result is already a ref because view apollo is doing this for you oh okay okay so i didn't need this then yes and also to unpack a result view apollo has a specific function called use resolve i mean you can use it as it is right now but the problem is why it complains about data all mines because your result is a ref and it has value this is an object that contains value property so if you cancel log result okay let's make console log the debugging happening okay so we'll we'll console.log result and i'm going to reload the page oh no wine does not oh i gotta get this out of there okay so here's our ref value so you can see a result is a ref okay okay so if i do i if i want to use all wines um i can just like return result like this or how would you what would be the right way if like i wanted my list of wines [Music] i think my internet is dying again oh no oh i thought you were just like unimpressed with my question no it was really nice attempt i'm sorry for my face expression it was internet don't blame me so you're already on a good track but let's use some magic that apollo client allows us to use so let's first explain what we're going what we're doing here because we made a query right now we're using query and people probably think like okay it's a promise the thing here is not a promise because apollo has two different types of queries first is query which we used previously it's just completely like you use fetch or axios it's just a promise you resolve it you have a result thanks bye but also apollo has smart query which creates an observable and smart query is like you're subscribing to this one and it's reactive if result of the query is changing your application reacts to it okay they have their own implementation of observables i mean if you worked with rxgs you've heard about observables they have their own implementation called zen observable if i'm correct okay but you don't need to dive into this you just need to realize that smart query is something reactive and it's number here we have smart query and for smart query we can define different options for apollo clients one of them with all good apollo client 2 was update with update you could say i don't need all this huge object i just fetched i don't need data rest whatever i just want to have all wines maybe i want to specify a different name for the property because apollo client is very picky about this if you have all wine's property you need to like have all wines in your response otherwise it's not matching so in view apollo we have a similar thing let's just simplify this a bit so we will create a const called we can say name wines and we will use result no auto imports for your natalia go and edit yourself it's like such a nice thing it's like you're lazy developer i use it it's amazing like working on on this vs code setup versus my my day-to-day i realize how much i depend on vs code to solve my problems for me i know right it's yeah but i i like to do it this way because then we have to like with the the automatic stuff we have to talk through it because i feel like otherwise i watch people who are so fast with their auto completes and stuff and i'm like i have no idea what just happened auto imports they're just writing some stuff which is auto imported for you like wherever this came from [Laughter] so some cute stuff but okay we are going to use the result so user result is actually a function to kind of expose the property you want and to define a default default value for this because what if result is not defined what if we fail with use query so we are unpacking result here and just in case you can always alias is with something more intuitive here but for now we have result and we are happy about it we will give it a default property of null so okay if something went wrong at least now is specified as mines so our view application is not complaining at us got it saying like what the hell is wines i have no idea and here we want to expose our data i think it's uh data.all wines all wines right all right simply so now we don't need console.log result and we can return your wines here great and so then up in the top when we do this list theoretically speaking hey we just we just graphqled in view yeah we hacked it a bit i think that we but so so to to maybe dig in a little bit to that hack the hack is only to implement changes that that just haven't been merged yet so this isn't like doing something that won't be fixed it's just t it's getting a fix in that's not available yet yeah we're just going a bit ahead of the name and we are just merging this patch ourselves yeah and i really like this kind of hacky stuff i always feel like i don't know like super high care i just made a thing work and it's it doesn't work and as npm modules like i made it so good thing is we have mines and we can actually make some view magic to render this list in a bit better shape than we do right now because right now we're just rendering this stuff so let's be nice let's create a list let's use semantic html because this is important we will create a list and here we will be iterating through the list of wines and vue has magic directive called v4 which works exactly like for loop in javascript so we have wine in wines array okay and you see that i'm not sure that for you it complains but for me it does complain linter is saying like you need a key and this is fine because in view you need to make the field unique and rendering properly you need to add a key which is unique identifier for every single list element we will say that one name is fine i'm not sure you're fetching an id let me just quickly check no title not name title will work title is unique here as well okay but i always recommend like if you have a chance to fetch an id package id let's let's make it an id and then i can update that oh you already added it okay great yeah i added and here like now it's a task for jason please render wine title for every single list element okay so we can just add like an h2 we'll go wind.title amazing and then i'm going to get rid of this this big json dump up here look at it go um and then there's one comment in the in the chat that i do want to address or love um we used a node script to get it to render so what this node script is doing to be clear is that you would you won't use this once once the prs are merged into the the view apollo repo so what we're doing here is we're just applying a patch like we're basically applying a pr to the the ship node modules um once the p with the pull request is merged these changes will already be in the code so we won't have to run the patch so this is kind of one of those things that like in the in the near future this patch.js will no longer be necessary it'll it'll just work because those pr's will be merged so we're just using this hack for now because like and it's important note i think like jason as a person who did maintaining open source knows that if you're an open source maintainer it's very hard to deal with all the pressure and all the stuff that you need to do and it's not your work you're not paid for this so if you're like why it's not merged let's not complain about the maintainer it will be merged for sure because maintainer also is your core team member he has a huge workload and vue cli so so far we're using this hack and remember that you're not obliged to use the latest version of everything we're experimenting here because i really like to explore vue 3 and apollo client 3 it's new for me as well especially apollo client 3 and i'm really happy to like play a bit around it show it but usually for production right now you will be using polo client 2.6 mostly i'm using it as well i know i know it but and we're just looking a bit forwards we're looking into the future and just trying to show how things will look probably in half of the year hopefully so we have a query everything is good now like i'm just checking you not that much time left for creating a new wine even so it's very tempting to create a new one and to add it to the list but let's at least delete some kind of wine right we can work on deletion so for this we will be using amputation obviously so if i wanted like maybe we can just put like get the ui in place um and we can say delete this wine yes and so for each one now there's going to be a delete button yes um and what we need to do here so obviously in view options api you would be creating a method which would be wrong when you click this button with apollo and view composable we will be using use mutation hook i shouldn't say hook it's so reactive if you apolo composable used mutation but if you work with react apollo client has i mean reactive poly client has hook called use mutation so it's very similar in these terms so let's import use mutation from composable i'm getting to this like okay and we will create a new function here so when you use use mutation it will expose a method called mutate so whenever mutation is called you're mutating something but honestly you shouldn't use it with this name in the application because what if you have five mutations and everyone exposes mutate let's call it delete point right and then we are going to use use mutation but we need to create the mutation so let's go to our api and this is like json work not mine let's go to our prisma playground okay and check what do we have in the field of mutations for deleting a wine so i can delete a wine and it wants an id and that's why we were smart we are fetching an id and then this it doesn't return anything when it comes back yeah we don't need to return anything it just leads fine and it's fine because i was lazy i was lazy when creating a polo server just like delete it and forget about it so probably then we want to set this up as a um as a mutation as a gql file and do you want to set it up as a a variable right yes let's let's show variables i mean we have 20 minutes let's play with variables okay so in graphql we have um we could just hard code this thing and our id would be you know here but in javascript we can't we can't like rewrite a graphql query it'll it'll kind of it'll blow up on us so instead we use this concept of variables where we can instead define a variable up here and say what its type is and so we're saying that this is going to be a variable called id and it's going to be a type of id which i am matching to the type here of id the exclamation point means that it is required and then i'm able to use that instead and that means down here i can set an id and we'll make something like that and this will attempt to delete a wine with id of 1 2 3 4 which we don't have right now but if if i run this it'll it'll fail um or it or there was a wine called one two three four which i just deleted um but either way we have uh it so this is kind of what's gonna happen right we we get back a true that the the deletion was successful um and any wine that we pass with this id will get dropped out of our configuration so we can see here here are actual wines um and so i'm not gonna delete one from here but we can just take this as the id and drop it in here and that would delete this wine it would it would stop showing up uh but so what i'm gonna do instead is let's go into our graphql and i'm going to say delete wind dot mutation see you're getting the naming convention really fast it's a it's a good naming convention it's super clear right there are no questions about what's happening in here um and then i guess i will name this as well so we'll call it delete wine and that will be our graphql file so then over here i can import import it yeah delete wine mutation from see again you you got the naming convention even here it's so nice to see delete wine mutation.gql good now i like i really i really honestly want to hire jason it's like such it's nice to see such a teammate that gets every kind of naming convention without explaining it but i spelled it wrong okay there we go all right this is fine so this then should put us in pretty good shape we've got a delete wine and then can i just return this like straight up of course you should return this delete wine so okay so this is the part where i don't know enough view to know what to do next so we've returned our mutation as a function from setup and we need to call it whenever we click button so if i was going to make a guess i would say that there's probably something like a v on oh v on okay yeah but for be all you can use a shortcut which is just abs add so let me just fix it for you look at that okay all right and then um your call and delete fine right because you need to call it really can i i can just do that yes but you also need to pass a variable does this work yes but no i mean it works but if okay all right okay i was doing so well there for just a second okay you you almost correct here but let's try to remember how we are passing variables to graphql mutation it should be an object because we have an excellent id so our id here is actually wine id yeah correct okay so this then theoretically should work let's go and check what if we fail okay i mean i don't know i don't know i can only guess our first wine here is this samueltinon so let's delete it and let's check our console and let's check our craft capables this is important one right okay so i should have had this open when we started so i'm gonna oh wait it's gone click on delete this line again right now when you have open so i deleted it it's not gone you deleted it it's correct graphql is successful you can see this and if you refresh a page it's gone because if you can refresh your page there is one very important part missing right now okay so i just deleted this one so when i refresh the page it's gone and it will disappear yes okay so what is going on here and why our wine is not disappearing immediately there is a thing about apollo cache so let's dive into it a bit for people who never used a column apollo is itself is not only a graphql client it's not axios for graphql polar also has a cache and when we were creating a client on main.js we specified it as cash in memory cash you probably have seen this and what is cash doing every single time you fetch something from graphql endpoint it's stored yeah it's a majestic it starts in the apollo cache and on any subsequent call when you're querying absolutely the same query with the same variables apollo will first check the cache so you can think about it as a getter you have a query first it's like okay if it's in the cache cute you have it in the component if it's not in the cache it's going to fetch it from the graphql endpoint that's how paul is also capturing the local state of the application it's possible to store there even things that not exist on graphql ap api at all but for us right now important moment is apollo is smart and when you are updating a single entity in the cache it's smart to check by id and update it so if we were updating the wine changing its name it would do the refresh for us okay the problem here is when we add an entity or delete an entity because in this case we need to explicitly tell hey we changed the list please update the cache for us gotcha that's why apollo contains also update functions so when we're specifying any kind of the mutation any kind of the query and query mutation like deleting or creating an entity we can also specify an update hook and in this case it's a bit more problematic because we will need to specify this hook in the function on the template and quickly check it for the syntax because again with apollo client three like i don't know the syntax of update hooks so i need to go and check so give me a second checking documentation i know we like shorten time but let's better do it correct from the start well maybe and maybe we can actually just define the function here like uh like you mean like if you'll get to wine so yeah delete and update with an id and then we can like run yeah we can we can run delete one here as well meanwhile let me and it's really fun when you're coding without like knowing if it works or not i know usually when you do live coding at that presentations like at conference talks you kind of know what is going to happen here that's a that's the kind of the the ethos of learn with jason it's it's loosely controlled chaos [Laughter] it's so much fun you can't deny right i i mean every time i do the show i i leave my cheeks hurt from smiling i've i've laughed a bunch so it's it's one of the highlight of my week is is tuesdays and thursdays when i get to do the show i bet so okay we can define it checking the apollo documentation we can define it on the user mutation it's which is good already oh we can define it in here but yeah but we can also define it quickly checking this form but we can also define it in the function sorry for the silence i'm just trying to find out like how to operate better with this no worries in fact i think we even have we can just like do a little bit of music while we wait oh even so [Music] [Applause] [Music] [Applause] i'm so happy that i unbroke my sound effects they've been broken for like two weeks so this really just warms my heart so if we want to define anything on the mutation like update hook it's going to the callback function so like it's like this okay and we can specify update hook here that's like update but i mean logic is going to be here with like all the rigging query and writing query do we do we need to return an object or is this no no no we don't need to return this is not an object this will be let me again quickly check for this yeah we need to return an object sorry it's like because this is this is a configuration one okay so should we just do it like uh like a one of these kind of deals yep okay so the thing right now i'm trying to remember how do we pass an id here because what we can have in our brackets in in update basically is actually only the store and which is apollo cache and everything that we get as a response so let's try to play around these okay let me just quick yeah exactly i just realized that sometimes i used update and you could use it externally so there is a chance we can try to run it in delete one so okay let's try to try to see first of all i will just try to get id here to see if callback receives an argument and let's play around update okay so what we have here in the update amid is a function first of all and it accepts cache store as a first argument so this is basically our apollo cache here got it and second one is whatever we get from so here if we would be returning anything from the api like some object with id of the one we deleted it should be here for now we just yeah what if we just uh update the server to return the id instead of returning a boolean do you think that we can do this because i'm not sure server will return you an id i mean oh you want to update the server oh this is five minutes yeah maybe maybe not with five minutes maybe we uh maybe we don't do that um it's really nice so that's what we do here let's just try first of all to read so when you want to update anything in the store i mean for the case of the example let's try to at least show how we read this store and how we change it if we are not successful with an id at least we can show how we operate with the store okay so we will have const data which is store read query because apollo cache is operating with queries all the time and that's kind of like it uses the query as the unique identifier exactly so we want to retrieve whatever we fetched as all wines query is all wines query okay and let's cancel logic and check whatever is going on when we delete a wine not so many wines left so we still have we still have a decent amount of wine left so let's uh let's delete one and see what happens okay cannot read property id of under oh yeah so this this one it didn't like that so we can what if we uh what if we just get like all data out and see what comes back um so then we can we can just kind of like log both of these and and see what it gives us when we try to i think it will be nothing because we're not passing anything but let's check okay so our args are empty um but our data is the cache we get all of our wines and it does include the one that was just deleted um exactly yeah so it looks like it looks like we need to update it properly in this case and uh okay i'm just trying to get a few memories it's like when you run the delete wine if we can do it on the living line like with the second parameter here because this is so basically this is variables um okay here and let me quickly check the api again because i remember that you could pass an update previously here so maybe we will be able to do this as well i'm not sure if guillaume has updated the documentation because i was complaining about this one i remember this like mutation updating the cache and cache updates this is cute message variables so yeah you can pass it as a second parameter as well so whatever we have here we can just copy paste our things and oh whatever what have i done okay i just copy paste it and we can delete the second parameter all together here okay and we can pass it here excellent okay so right now let's try it let's try it again just without arcs number for us uh yeah so i'm now in here's our app i'm gonna reload the page i'm gonna delete this one and nothing happened oh and we are calling delete an update fine oh we are calling delete fine sorry oh yeah okay so we need to return delete and update cache and then we'll change this one to be delete and update cache and then i made this into just the id get sent in so we'll uh we'll update that okay so let's try this one more time here's our data we got our so we are almost here our update function is running yes this is already good right yeah so what we are going to do here and this is a huge scene i think because and i think apollo client three will just called me for this right now because i'm going to mutate the cache and this is not how you do this looks like const data is okay i will try to make it as immutable as possible this is important thing about apollo client three you can update cache only in immutable way okay do we need to change this to be like updated data yeah so i'm going to like do this oh like that okay okay it's fine by the way let's create updated data okay i'm usually using libraries like emer if you have deep nested structure but here we don't have really defensive structure we are finding this so we will be using data filtered right uh it's going to be data.all wines dot filter oh yeah it's that all ones right sorry for me it's 10 p.m and my brain is already kind of big so we have a wine and we want to return everything if id is not equal to the id we passed here so we want to exclude the one with the given id and rest of the stuff is fine and then do we just need to return no no no no no no no oh sorry sorry we need to write it back to the cache okay we need data we changed something and now we are going to do store write query and again query is the same we are going to change all wines query here okay but we also need to pass data and data will be our updating data okay let's try and i think i think we have to do uh all wines because when we when we dug down here we ended up with uh this updated data ends up being the this array yeah yeah so that i think that should get us and if it doesn't we might have to let's see come on fingers crossed everybody drumroll look at it go uh yeah it complained a bit because we have invariant violation we need to like i can treat it but i guess that is like complaining about the different structure define a custom merge function okay so th this uh this would be something that we definitely don't have time for today but and yeah and it's new for us both i think because it's apollo clients free but at least interface is updated yes and so we and we managed to get this right like we're this this puts us in really good shape um and that i think is a great point to to call this done so natalia thank you so much for your time today um remember to go follow natalia on twitter uh is and let's see there's buckets did that just work hell yeah it just worked um okay so here is your personal website is there anywhere else that you want people to go check out view three documentation please if you use view if you don't use vue it would really great if you could read through documentation drive ugs and if something is wrong in the docs because it can happen please submit an issue because it's the only way we can improve documentation absolutely okay so with that one more shout out to the sponsors thank you white coat captioning for for making the show more accessible to more people thank you uh netlify fauna sanity and off zero for generously sponsoring the show to make that captioning possible natalia thank you so much for spending your time to teach us today i had an absolute blast i'm really excited about what's get what's becoming possible with you and apollo uh chat thanks for hanging out and make sure you check out the schedule we've got a lot of fun stuff coming up uh later this week i have cape coming on the show and we're going to look at building some static sites with sanity and that's going to be a lot of fun so make sure you come check that out stay tuned chat we're going to raid natalia thank you again we will see you next time

Channel: Learn With Jason

Views: 6,985

Keywords: apollo, vue 3, javascript, apollo graph ql, apollo client 3, applications, vuejs, vue, learn with jason

Id: UbYt1PokMrM

Length: 92min 6sec (5526 seconds)

Published: Wed Oct 14 2020

Reddit Comments

[u/chchan]

If you follow the tutorial today you can use vue apollo instead of straight apollo, don't use the Vue CLI to install Vue apollo there are some errors that still need to be fixed. Instead use NPM or Yarn to manually install.

The modified setup for the main.js should look something like this:

import { DefaultApolloClient } from "@vue/apollo-composable";
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client/core'


const apolloClient = new ApolloClient({
  link: new HttpLink({ uri: "GRAPHQL_LINK" }),
  cache: new InMemoryCache(),
});

createApp({
    setup(){
        provide(DefaultApolloClient, apolloClient)
         },
    render(){
        return h(App)},
    })
    .use(router)
   .mount("#app");

Just replace GRAPHQL_LINK with your endpoint