Production Ready GraphQL

[Music] [Applause] [Music] all right everybody it's happening we're live thank you so much to the apollo team for helping me out with using a computer that's awesome i want to welcome everybody officially to the uh graphql production ready graphql session i am so so so happy to see you all hey everybody it's happening so i'm super stoked to be here we are going to have a lot of fun talking about all things graphql and why don't we just get started we have delayed long enough so my name is eve porcello i'm super excited to be here you can always reach out to me with any questions that you have eve at moon highway is my email address at eve porcello online i'm coming to you live from tahoe city california i have created some courses for linkedin learning and egghead io and we've written a couple of books about graphql and react so today is all about kind of taking what we know about graphql already and building on it with this awesome ecosystem of graphql tools so we're going to start out by getting acquainted with some of the latest features of the graphql spec um i guess upcoming features is a better way to say that we also have a session on or a section on schema design apollo studio rover cli error handling caching all sorts of fun things um what else can i tell you so um if you have any questions at all feel free to share those in the chat i have that up on my screen here so i will be monitoring that throughout and here's a look at our timing for today so we're going to get started i'm starting a teensy little bit late but we're going to be taking some breaks throughout so that we are able to um so that we are able to get all of this fun knowledge into our heads and then we should be wrapping up at around 11 30. so keep the questions coming i will stay on top of those as we move through okay so what we are going to talk about first today is defer and stream so to get us into the mood for this i want to talk a little bit about a philosophical question which is how do we get things done in general how do we get things done how do we reach our goals how do we make things happen my birthday is january 2nd it's the day after new year's so i feel like i'm always very consumed with new year's resolutions and self-improvement at the beginning of the year so every time one of these events comes along one of these birthdays comes along i think okay here's what i'm gonna do i'm gonna exercise every morning at 5 30. yeah exactly let's go capricorns i'm going to cook delicious vegan meals every night i'll meditate three times a day i will triple our business and then i will call my worst relatives once a week then by january 3rd the next day i'm eating ice cream for dinner and everything has gone fully out the window because i've basically over i've over promised what i'm going to do and i'm trying to do too much at once happy birthday january 4th i like it so we can think about this kind of overload of information of plans of goals etc we can think about this as it relates to graphql so from our clients of course we always send these graphql queries to our graphql apis in front of our data sources our data is then collected by that graphql api and we also have a way of doing this with apollo federation with a gateway in front of all of our various graphql data sources so we want to think about when we are fetching data or when we're trying to get things done how a query does it so let's talk about how a query does it we know this already but we'll get it into our heads to start out the day um every time we ask for some data from a graphql api we're going to send a query then we're going to get back a big blob of data and that's that our query matches our data exactly so that's how a query gets things done and a mutation gets things done by sending a mutation and getting back a another blob of data all of these are http requests we're asking for the data from our single graphql api and then finally we have graphql subscriptions which are going to be sent over websockets we'll send a subscription and then we'll get back a bunch of blogs of json data anytime that data changes so these are kind of the ways that we get things done in graphql we have a query where we are reading some data we have a mutation where we are writing some data followed by a fetch for grabbing a little bit more data and then subscriptions we have the ability to listen for data changes in real time so we're waiting on all of that data to come back so um you're asking about are the slides available absolutely so i'm going to share with you a whole repo of a ton of different files and a ton of stuff that you'll be able to use so more on that in a second so let's think about a query we got a ton of different fields right we have a name location birth location all these different fields on the cat and the traditional way that we will send this query is that we're going to ask for all of this data and get it back in a single response so we're basically saying let's do all of this at one time just like my new year's resolution and that's a lot of effort and it might be more successful if we broke it down into smaller chunks so instead of me being so ambitious on january 2nd and falling apart on january 3rd we're going to break it down you hate the cat i love the cat i'm very offended by that just joking okay so we have our query we are going to break down our query into little pieces so let's think about how we might do this a cat our biscuit cat here all we really care about at the beginning is the name the location and the birth location so we're breaking it down we're getting those fields that we need right up top and then what if there was a way to put off or wait for those extra fields until they're ready we'll display some data to our user first but then we'll hang out we'll be patient for the rest and yes some interesting information for a cat right astrological sign we're all putting together astrological charts for our cats right so i posed the question what if we could do this and the answer is we totally can and that's with the emergence of these two awesome directives defer and stream so this is a an old awesome uh this is an old awesome gif that was part of a blog on apollo's site in i think 2016. the idea of defer and stream have been around for a long time they've been bubbling up in the ecosystem for a while but the whole idea of the defer directive means that we'll load the data that's most important at the top of the page check it out and then the subsequent data will be loaded later versus the gif on the left hand side where we're waiting on all of this data to load first and then displaying it so a better user experience is we can break out that flow so that something displays to our user right away the way that this looks inside of a query is this so we have our cat all of the important fields are listed up top then we create a graphql fragment for a wrapper around a bunch of different fields that we might need later and then we're going to use that at differ directive on the fragment to get that to load okay stream is another one of these awesome directives so let's say we have biscuit and there's a lot of questions about biscuit the cat um what school does he go to and where did they learn to provide a bike um that's a really good question we're gonna have to get into the data for that to dig deep but cats ride bikes i think bike riding dental school for cats exactly you got it all right cool so let's talk about the stream directive for a minute before i show you a demo of all this stuff we have our cat named biscuit but biscuit has a ton of friends biscuit made a lot of friends at cat dental school and what we want to do here is we want to intelligently load them so that we're not having to load too much data at once so biscuit has these friends and brisket's popular he has a ton of different friends so what we can do here is we can add what's called the at stream directive we can specify an initial count so a certain number of pets that is going to load first and then we can load three at a time as more and more cats become available so what's extra cool about this is we can even defer fields that are part of the stream so maybe we have a bunch of friends of biscuits and then we want some of that less important data we want the whether or not the cats are dentists etc etc so we're going to add at differ to all of these extra fields and use them in combo all right so i'm going to show you a demo of this but there are places that you can experiment with some of this code so i'm going to copy a link here i'm going to paste that into our chat there's something called the graphql bleeding edge playground which is kind of an exciting name and what's cool about this is you can test out some of these new graphql features before they're actually added to the spec but in general we're just trying to prevent people from seeing this screen we're trying to make it such that people aren't just like waiting on all of this data that they really want to see instead we can break down that data fetching story into different chunks so that people are getting access to data at all times must have some sharp engineers working on it totally so i'm going to share with you this link to a yeah so let's talk about a couple different things so in general just getting us all on the same page graphql as we know is a spec it's this living breathing document where we're constantly thinking about collaborating on new features what i just shared with you is a link to the graphql spec edits um issue here and what you can do with this is kind of track the progress of how differ and stream work you also will see in our next slide here and we'll check this out here let me make sure that we are linking to the right place we are so we got express graphql right this is one of those awesome graphql um this is one of those awesome graphql libraries you can check this out today so you could play around with this today the really good question uh for that jenny asks are these features already available if not when i would love to start using it now so yeah you can experiment with using it right away either using the bleeding edge playground or express graphql or graphql js throughout the next year or so i would think that most of our favorite server libraries like apollo server will be implementing this and making sure that all of this is supported so you can check out the yeah exactly so you can check out the apollo server project for differ support and stream support as well and this will really relate to our front end so we'll be writing a lot of queries that utilize defer and stream also okay so thanks everybody for sharing awesome links i love it y'all are killing it at link sharing i will share this other one and taylor asks seems like these directives aim to solve the same type of data fetching issue as react suspense potentially any thoughts for future use of when to pick one technique over the other so yeah i would i would say in general that all of our it's really it lines up really nicely right we have concurrent mode and the possible future of react suspense where we're thinking about breaking down our data needs into smaller and smaller chunks so i think everything will kind of be moving in this direction as we move forward i think that graphql giving us a nice way of linking our components with our uh data reque data fetching logic and requirements is going to be a really powerful thing i'll show you in a second how this looks in an actual project and let's go ahead and transf transform and yeah david says i'm glad we're getting the hot apollo gas i'm in the right channel for it defer and stream isn't officially in graphql js yet but we're aiming to support it in apollo server as one of our next big projects awesome so yeah i think this is being played around with on branches in some of these larger projects but it's something that will be it'll be a big deal so let me show you what this looks like in one of these projects so i'm going to let's see i'm going to start our server and i'm going to start our client here and this is just using a demo from the link i shared with you before the graphql bleeding edge playground and let me pull up the graphical interface over here so we are so used to seeing graphql playground and now apollo studio explorer that this is such a weird site but we have graphical here and we can start to send a couple of these queries so let me show you what this might look like in a in a little query editor here so the first thing i'm going to do is i'm going to send a query called differ test and i'm going to ask for a name pretty straightforward i send the query it sends an http request i get back a blob of data that's the exact same shape now i want to ask for another field here called exciting data as we would probably imagine exciting data is going to be something that we have to wait a little longer for it's going to be a field that we have to wait a little bit longer to fulfill so i click on the play button i'm waiting and then i get back everything and it says it's worth the wait which i tend to agree with but i think we can make this loading situation a little bit nicer check this out we're going to write a fragment called later fields we're going to define this on a particular type and this time we want to put the exciting data field in the fragment so now let's replace exciting data in the initial query with dot dot dot later fields we're going to add the at differ directive right after the name of the fragment so when we click play check it out it says has next has next has been added to the response object and then we get back the second piece of data when it's ready so has next again will be added to our response when it's true it means more data is coming when it's false it means we have all of that data pretty pretty cool right so that's the deferred directive we can add on to this a little bit more by testing out a stream so think about defer as being breaking down a request where an object might load certain fields first and then some other fields later yeah i couldn't agree more very cool very exciting and very you can think about all the ways that this might be useful so yeah the data just lazy loads automatically in the response yeah so we're gonna in our resolver functions define the logic for how we want that to work so when the data is ready we can use some asynchronous functions to make this work and pull back that data when it's ready other questions is this better than using pagination using apollo cursors i would say that pagination is more for you can use them in combination so with an example like this maybe we have a maybe we have a list of different items that we want to load a list of tweets for example we might use pagination to say give me the first 10 and then as i ask for more pages directly either by scrolling or by clicking next then go ahead and load those when they're available on the other hand defer is being used to break down these objects let's say it is a tweet maybe a tweet is a bad example yeah a tweet is a good example so we'll have a photo right and then a name and then underneath that is the tweet maybe the tweet is the thing that's deferred it comes a little bit later pretty pretty cool other thoughts that are coming up is this working over websockets this feels like it's working over websockets right where it feels like the pattern of subscriptions where we're listening for some data but it's actually working over http so we are still going to use the http architecture that we're familiar with queries get data so a query will have those fields so i don't know exactly how so the way that this will work with resolvers for example in apollo server and in these other server libraries is that you'll just write this logic in those resolvers let's see awesome questions everybody this is fun cool so great question here if i was doing this via use query and react how would i succinctly differentiate between the two sets of returned objects would you use a use effect dependent on the returned object and then set state based on the return data uh maybe i would say that we're not quite there yet with um with that approach but i would assume so having said that our data is going to we just want to think about our data as being more of a stream and less of a single response streaming just meaning we're listening for more data we're defining in our resolver how much data we should be uh returned and yeah this is gonna this is going to work in all of our client tools all of our server tools i'm giving you this as a preview of something to get stoked about to get excited about for the future but we can start to think about how this will work for our own our own data fetching so we've talked about defer right defer thinking about breaking down our objects into different chunks to load when the data is ready but we also will have access to a stream so check this out i have a query and i'm trying to keep it super simple i have a query called stream test now the stream test query think about a stream directive as being used for lists lists are going to be used with streams because we're going to specify a certain number of items that we want to load first and then we'll get subsequent items later so check this out we're going to say at stream we're going to specify an initial count and let's just specify an initial count of 1. the stream test is going to return an array of strings so let's watch how this plays out it says what's it says up and then it says friends similar to our defer having the has next property is going to tell us that there is more data to come so the hasnext property is super important we're going to be able to anytime has next is true we're going to be expecting more data to be rendered in the front end this is something that again it's coming it's not here exactly yet you can experiment with this stuff however it's a really nice approach so defer we're thinking about breaking down our objects and loading later fields later the slower to load fields later a lot of times we talk about like things below the fold i don't know if that works in all cases because websites aren't newspapers but you get the idea we're loading some data in the background okay so let's go ahead and let's go ahead and go back for the moment someone had asked for the link to the graphqljs so i will share that here the other is expressgraphql again these are working on different branches so if you want to check out these different branches you can just to see how this stuff is implemented and yeah hugh has given us the more apollo hot gas that up differ and stream are coming to apollo client and server very soon so couple things to think about for our different stream this stuff is coming don't panic too much about the implementation these libraries are going to use the spec to guide their uh guide their approaches and let's see they are going to work over lambdas and all of the ways that we use them now because they work with asynchronous functions and resolvers so that is a look at our different stream what i'd like to do next is i want to point you in the direction of the student files for the class people were wondering about that is there a repo of course there's a repo so let's see see if i remember what that repo is called i do there we go okay so here's what i'd like you to do i know there's some more questions about our are a different stream but i want to point you in the direction of the resources in this repo there are links to slides these are the ones we covered so far there's also a link to the schema design slides that we'll be getting to in a second the links about differ and stream are added here too and then each one of our sections of the course and i'll be adding more links to this too because a lot of times people will ask questions that lead us into fun tangents that we can add for everybody's resources inside of all of these folders you'll have start and finish files or sample projects that you can run when appropriate okay cool so if anybody has any trouble accessing that do let me know but i'll give you a second to pull up that repo and download it cool and let's see david is saying the recommended transport for a deferred stream is a multi-part mixed response i don't know if lambda lets you incrementally create such a response but i doubt it yeah that that makes sense i think in general um yeah this will be an interesting this will be an interesting approach thinking about we all came to graphql for efficient data fetching right and breaking down our already efficient queries into smaller chunks is going to be really interesting and then steve said hi steve by the way uh just theorizing but libraries will probably use promises or async await strategies and implementations and manage streaming protocols in the background yeah totally so that's how the functions on the back end of my demo work are just with async await and so very good so yes what we're accessing now i'll share the link again is a link to our production ready graphql repo this contains everything that we will need for this course i will i will also um yeah i will also add to this as time goes on okay so let me open this up i'm going to take a look at our repo in vs code and go ahead and check out the section on schema design okay so a lot of nice conversations going on about our discussion of defer and stream if you're interested in more check out those links that are in your student files because you can check out the status of the project and go deeper on any of those things and also yeah also try to check out um how that stuff works you can run everything if you'd like to all right so let's talk a little bit about our schema design section this whole section of our course is going to be dedicated to collaborating on updating a schema to make it readier for production um and make it better all around so what i'd like to do is we're going to take a look at the slides to get us started so we're going to be able to find those in our student files as well of course and this will be your opportunity to share your opinions on how to iterate on a schema as well and i'll give you some tips and tricks along the way okay so let's talk about a schema so we have a schema inside of our student files inside of the schema design start typedesk.graphql that's all about these pets so we have a pet type we have a customer type and then a few different fields from there and what we are tasked with doing today is taking our existing schema and updating it to make it better some things to keep in mind before we embark on this project is we want to think about with any schema design project that we're working on what are the clients need so what data do the clients need are we just defining a bunch of fields that map to a database or rest api that we never use those fields or are we actually thinking about the clients we also want to be thinking about specific consistent naming that's readable and sensible to anyone who is consuming our api and then finally we want to be thinking about if possible how do we create custom objects over scalar values so those are things to keep in mind but inside of our schema here we have an enumeration type called pet category inside that pet category there's a dog a cat a stingray and a rabbit now this is a pretty good approach but what happens if i want to add some sort of pet to the enumeration type i'll have to add it there and i also am going to potentially have a difficult time defining custom fields on each of these pets so a cat might have a curious boolean but a rabbit doesn't share that a rabbit is neither curious nor not curious a stingray might have a chill or a fast boolean but we don't want to give that similarly to a dog and then what happens when we add our horse those that horse might have special properties special qualities that are added to that specific type and the enumeration type might not be sufficient to describe it so what we're going to do is we're going to update our pet type to a graphql interface and the interface is going to create a bunch of different implementations of this pet type and then from there what i can do is i can add different custom fields to each one of those and then where it says tbd future pet i'm going to be able to add custom fields to maybe the future pets that i add maybe we add a new pet in the future there are custom fields on that we will share the initial properties of the pet but then we can add on to that too okay similarly we may want to create some union types inside of our schema so we have our union called a family pet which is either a cat or a dog and then we may have other types of unions for different types of pets and we define this by just adding a pipe between the different types and then when we query we're going to use a an inline fragment to make this work so what i want to do is make some enhancements to our schema based on that conversation again we'll open up the typedefs.graphql and let's zoom way in on this let's also make sure that we have our dependencies installed in this folder so i'm going to type cd i'm going to drag the start folder over here and then we'll run npm install so once i've done that if we take a look at our server it's pretty straightforward we just have a new apollo server where we're defining some mocks as true if you haven't used this feature before how cool is that we're using the power of the schema definition language to give us this awesome type system for our api maybe i don't have my data sources wired up yet and that's totally fine i can still build out my front-end prototypes i can still build out our schema i can iterate on that schema until we all get it right before locking it into uh locking it into a permanent state okay so even though we are not all in a in a classroom together right now i do want everybody to um yeah isn't that cool that you can drag a folder into the terminal i totally stole that from a terminal i just i just saw yeah so our class i saw so i copied that from a terminal i saw that's technically true but that makes no sense so yeah it's under o2 hyphen schema hyphen design under start here we have an index file and again we have a property here called mox true this is going to allow us to number one run our server with our current schema and then we're going to be able to iterate on this schema until we get it right and then we will move on from there so let's go ahead and make some adjustments to this and thanks everybody for your awesome questions i appreciate you so yeah let's talk about what mocking is a little bit more if you haven't worked with that before so think about a mock as being a way of returning some fake data for a field in any graphql project we have a document called a schema the schema is a type system for our api anytime i have a pet right it has an id a name a weight a category so what's super sweet about this let me run npm start to run this of course i have something running let's say goodbye to different stream and hello to our schema i'll go to localhost 4000 and on localhost 4000 it will pop open apollo studios explorer for us which is sweet and now check it out if i send a query let me collapse that a little bit when i send a query we have let's say a query for all pets right id and name now i haven't set up my resolver functions i haven't defined any logic for how my data is being returned so when i click run i'm going to get back some fake data some mock data some dummy data that's a little derogatory but this is going to return some sort of value for an id and then some sort of a string value for the name so it's just going to look at what are all of these fields and return based on that and if you're interested i can show you some mocking techniques that we can add onto this in a little bit one of the things you're probably thinking is how do we have why do we have only two responses and that's just because when we set up mocks with apollo server the default is to return two uh two objects in a list but we can always change that if we want to okay so let's go back to our schema awesome jenny the odyssey series also covers creating mock data in your resolvers excellent so yeah the odyssey series what an amazing thing right so line three yes so another great question is totally does mox do mox work similarly in apollo federation yes absolutely so anytime you have a schema it's a pretty mockable thing it's a strict type system that is going to define what your types are but remember what we're trying to do here is we're trying to enhance our schema in order to make this a little bit more extensible and to make this readier for production there are lots of changes we could make to this but let's start with this one i'm going to first change our pet to an interface think of an interface like being a class a class has certain fields on it certain shared fields and i'm also going to with our interface get rid of this field called category because i'm going to represent different types of pets as implementations of this interface so check it out i'm going to say type pet or type cat rather implements pet now don't be upset with the messenger on this but anytime we create an implementation of an interface jenny dogs are coming soon i promise any time we create an implementation of an interface we need to copy all of the fields from the base interface the main class into our implementation the reason for this is because we need to define specifically which fields should go here and then we can add on so we could say sleep amount int and then whether or not the cat is curious which will be a boolean we then are going to define different types for all of these different pets that we want to make available at this pet library so as promised let's go ahead and copy well let's copy the interface because that's maybe a better way to do it we'll copy the interface we will drop this here so i'll say type dog implement pet so everyone is yes i'm being shot as the messenger totally um okay so hear me out this is why i think this is the reason so we are going to there's no sense of um like injecting these fields into individual pets we're going to keep in mind only write our schema once so this is going to pop those in there this is going to um let's see everyone is sebastian says there's some benefit of structure for this and i think that's totally totally fair we're being very specific about which fields are being added to each one of these types the whole idea here is that and xavier says this too though ideas we're trying to be very declarative when we are defining our types even though there is a little bit of extra effort on this it's going to serve us well to document our schema correctly so yeah a lot of folks are in various stages of acceptance of this but i'm just passing along the info for you so let's add on to this a little bit so we got our cat right we are gonna add some fields for a dog what should a dog what field should a dog have and we'll show that error in just a second i've taught a lot of graphql classes in my lifetime and uh people get mad at me when i talk about interfaces um so cool what fields should a dog have what field should a rabbit have bandana color i love it we'll just make that a strat a can fetch i like it uh we'll make that a boolean drool level i love it cool i made that at like halloween boolean too many o's anyway rabbits what do we got for rabbits kind of like obedient for a rabbit because obedient make that a boolean and all of your fun today um let's create one other type just for funsies we'll make a stingray too we're going to grab all those fields whether we like it or not from the interface because we love to be declarative and specific when we're documenting our api and then we will add favorite about like carrot we're all on the same page with that likes carrot i'm making typos can swim that's very funny hopefully they can swim let's talk about that his teacher oh man okay so those are good so what we're thinking about with our schema is a pet is a pet a pet has certain fields on it that a cat will have a dog will have a rabbit we'll have and a stingray will have we do want to add some custom fields though for each one of these pets because while they are sharing a lot in common they do differ in some areas think about that as being [Music] like an a user right you might have a base interface called a user and then you have different types of youth user authentication rules where there are different fields for each a couple comma comments rather that are coming up are why are we making all of these fields required anytime we see an exclamation mark that means that a field is required and for that i would say you can decide whether or not for anything whether a field should actually be non-nullable or not a good rule of thumb with that i've found is don't make a field required unless you absolutely need that so let's take a look i'm sorry that some folks cannot hear so let's take a look at what this looks like in our schema something that's cool about using the built-in apollo studio explorer that ships with apollo server 3 is that we're constantly refreshing our uh our api in the background i don't know why i just hit refresh that was a weird thing to do when i was saying that okay so let's take a look at our documentation here we have a list of pets and then we have these fields that are available on these pets so the way that we're going to do this in our in our schema is we're going to add to this a couple different things so let's try to run this this will give us these fields on the pet and then if we wanted to add some fields for specific types we can definitely do so the final thing i need to do here though is we have our pet interface right so if i scroll down to our pets it still should be returning that pet type it's also a possibility now that we've created cats we've created dogs we've created rabbits and stingrays we could create some custom queries for these types so we could say all cats we could say all available pets etc etc so the other thing i want to point out here a couple questions that are coming up um so mocks don't seem to figure out dates so yeah the dates will probably just look like a string in our mocked data it will return something now if you wanted to create a custom mock for a date you certainly could and i'm going to write a note to show you how to mock a list and to create some custom mocks just in case you're interested because we have gotten a few questions about that sweet so the other thing i want to add our schema here is i want to add a couple of union types oh it just blows up well ken guess what we're gonna take a look at that now then because we don't want things to blow up right all right cool so friends let's go ahead and fix that now the first thing we want to do for that is we're going to make some adjustments to our apollo server constructor now the apollo server constructor here is currently we're just saying mock's true now we can remove true from this and instead of just going with whatever those defaults are we're going to override the defaults with our own with our own functions so check this out we will say const mox and we can create an object of different mocks for different types so for example we could say like int every time i ask for an int i want to return six anytime i ask for a string i want to return a cool pet i don't know and then for a date what we want to do is say is return something so we could just say like um 0102 2021 remember i said that's my birthday i'm very creative so this is what that would look like in that response okay so here's what i want to do i'm going to open up our typedefs once more i also want to remind you that there's a finished folder that has a typedesk.graphql file in it if you get stuck at any step in this process you can feel free to you can feel free to check that out but i think let's take a little break we're going to take about a 10 minute break when we return we're going to go deeper on these mocks we're going to test this stuff out we're going to um patrick had asked will a mock of uh the pet array i'm like array those are square brackets um if the pet array very hard to talk sometimes we'll return just two items i will show you how to return more but there's a lot more to come so why don't we take a pause i'm going to put a timer up on the screen if any questions pop up during the break i will answer them as soon as we get back i like to give people an actual break so they don't feel like they're missing something but i will see you back here in 10. all right everybody welcome back thanks for coming back that's always nice um before the break we talked a little bit about how to set up mocks and i wanna continue along that conversation and also make some other adjustments to our schema to make this a little bit better um so what i'd like to start out with is we should be using the mox object and sort of injecting these mocks into our running server a couple things to think about um let's see looks like people got tacos for their break that sounds awesome it's only 9 40 but i would be extremely willing to eat tacos at this time so what i'd like to do is let's go back to our type definitions for the moment and i'm going to make sure that our server is running on localhost 4000 what we did before was we changed our pet type into a pet interface and now we want to make some additional changes to this to represent some of our other types so thing one we want to do is we want to create a family pet 640 there that's good that's a more socially acceptable time to eat tacos so we're going to create a union type called a family pet then we're going to create another union called an exotic pet which will be either a rabbit or a stingray that's kind of funny to call a rabbit what a wild pet that is um but the whole idea behind creating a union type versus just a regular type is that we can return a list of multiple types so if we scroll down to our query type and let me move this down to right above that so we can actually see stuff we're going to add here a family pet here we're going to say let's return a list of these family pets similarly we'll do the same for exotic pets so not only has the addition of this type and this needs to be a capital e i'm sorry not only has the addition of this union type made it such that we can return a list of multiple types but it also is going to allow us to ensure yeah exactly renaming project to tiger king yeah brb change that i'm very sorry i should have made that better i think there's gonna be a season two isn't that something i heard recently um that's a fact that's littering my head um so we have a list of all of these is a mascot cat dog rabbit etc yeah exactly so all of these are great ways of just making our data a little bit more searchable in a different way okay so that's that with our union type the other thing i want to point out here is that as we are coming up with our schema and mocking these different fields i think a really nice thing to do before we start writing any resolvers is to start to think about how start to think about how we can make this better before we start committing anything to actual apps so here's what i'd like you to do using the schema that we have here using all of the things that you know about schema design already and if this is the first schema that you've seen in your life you have seen words in your life so there might be better ways of describing some of these fields so what i'd like you to do let's take the next maybe two or three minutes we're gonna take a look at our schema and make a suggestion for something to change we're all collaborating on this it's an open forum for collaboration and then we can talk about like why we would make those changes so whenever you're ready go ahead and drop your suggestion into the chat christopher isn't sure if he's ready for a season two yeah i know i feel similarly maybe we got what we needed from that in season one cool so kate i love your suggestion we're gonna i'm gonna be quiet while people think of their ideas but we'll go over that in just a second yeah totally sorry and i'll scroll down to the union types we just created i love what everyone is coming up with so far what is a pet due date so this app is for checking in and checking out pets like their books from a library um so we could potentially go check out a stingray for the weekend so the due date is just when we have to bring it back very normal thing yeah so if you missed the repo for the class it's pinned at the top but i'll share it again i'm gonna copy this link address here and share it so the finished code is in the finished folder okay so thanks for your awesome suggestions keep them coming one thing i wanted to do before we get to those is i'm struggling with something in our setup so i wanted to fix that before we continue so what i want to do is i'm going to stop our server for a second i'm going to npm install nodemon which will restart our server for anytime i make changes what i'll do next is now that this is installed yeah exactly i'm going to type n-o-d-e-m-o-n so a fun fact that i realized the hard way about uh working with nodemon on these projects is that you have to pass an extension of an extensions list of all the file types you want to watch for restarting so for example graphql javascript and json if you're using any type of file that isn't javascript or json you need to add this and then this is going to watch all of those files for you so now what i can do is try that again oh i just installed neutron again i'll try npm start again that's going to start that project this is going to start to tell me that i don't know how to write code i forgot to save this so this should run that again so all of these are working so yeah this tip i was always like ah and today too i guess um why isn't this working and so that is awesome okay so let's scroll back up and exactly let's scroll back up a little bit and go through some of these awesome ideas that i'm seeing from folks um there's tons of different ways that we can add more quality to our schemas so kate won first in on the schema tips and i love what she said remove the pet category enumeration type it's redundant now with the interface design awesome so yeah because we have the pet category being sort of defined as individual implementations of each of these interfaces we can get rid of that perfect other ideas um let's see pet category so we'll make sure that that all pets category is no longer in our arguments here on line 109 and if we wanted to we could move the um we could move some different pets into this as well so you could create different queries for different pets uh there's a suggestion for let's see using lists in production hurt a bit in my experience one has to be conscious about the cardinality of those lists when something is boundless or can have a high number of objects in the list it's better to use relay connections yeah so you could use uh let's send a link to it the relay spec there are a lot of different pagination strategies in general one of the more popular ones of these is the relay cursor connection spec where we're returning these custom objects instead of returning just regular types so what i would mean by that is maybe we'll return a custom object that has some pets on it but also has a cursor that points to where in that list the pet actually lives so that's an idea i love that uh what else um would it be better to separate due dates from pets as it would limit scalability yeah sure we could point to those instead i like it um what else maybe rename pet to animal i like that too that's a good idea let's take a look at a few of these others um add a filter parameter on all pets to filter by union type or individual pet type totally you could also do something like this you could say all pets or sorry all cats and just return a list of cats which could be kind of cool i think when we're defining our queries naming things is super important so ensuring that we're naming these fields something that's readable that's understandable is super important um old and older version of me used to create a lot of queries like this which i think is fine but i think it's nice to call it like pet by id find pet by id does anyone have a better name for how they would want to select an individual pet we are here to collaborate not to help me boss you around all right cool so let's see i think it's just because i didn't save this it should reload okay nice yeah i like i tend to like find pet by id too just because it's super clear there's that old ux book old not that old ux book don't make me think i think that axiom applies to i think that applies to designing a schema as well get pet but i don't like it i like that seems resty i agree with that too so sometimes we prefer like pet by a d it does feel a little and yeah it could return an optional pet or you could add some error handling inside of your [Music] error handling inside of your resolver to make that work yeah chris i like that too leaving that office um is probably a good idea since we don't have find pets or find customers etc yeah and david as uh as mentioned here depends if you want it to fail if it's not found yeah i like it so let's see why id id like this instead of input input type also a possibility i think input type just would typically an input type is used for more than one field but up to you yeah joey likes just pet i like that too i think in general um yeah exactly i love everyone's opinions on this i think we could talk about the naming of this one field all day but i think that's an important thing starting with a conversation about what should be in the schema it's not something you can rush through and it will change but as we know it's hard it's harder to change fields in a schema later sometimes so okay cool so other ways that we can get fields are to um the input type you say uh makes it easy to involve evolve the mutation yeah i could see that so input at fields yeah i think so brian isn't it nice to take some time to do some bike shedding of names yeah this is what we're gonna do for the rest of the classes just decide what to call this field so i'm just kidding i would never do that but it is important to talk about it okay uh do you use different verbs for fetching querying loading from a data store versus third party api could be useful to understand where the data is coming from interesting yeah that's a that's a good question [Music] yeah and if anybody has any thoughts on that go for it chris i i like to order queries alphabetically too i love it i feel good about that so yeah once you are comfortable with the queries that you have or you can start to alphabetize these um yeah i think it's super useful to do this so no shade on keeping it alphabetical all right cool i messed that all up did i not i did okay cool so a couple other thoughts that have come up in our chat um at my company we usually have three types of queries for everything resource by id resource by ids and search resource and we found that this is all we ever need okay yeah i would say that alphabetizing these organizing these is really based on how you how you approach your schema at your own company however naming things in a consistent way in a way that makes it easier for consumers to access that data is really useful so hook yourself up later make yourself happy and not confused later whenever possible okay so because i wasn't getting my server to restart i thought i forgot to um i thought i forgot how to mock data in graphql but i didn't um we we know how to do that so let's take a little look at some of these actually can you show us how we can validate some custom rules for our schema design maybe point to a link yes absolutely so i will share a good schema design link and add it to your student files as well another comment here normally i split the files for each category by instance type query pet related custom related etc etc and then um on that note i would say that some people really like to break down their schema into let me go back into different files by type so maybe all of our customer queries are together all of our customer information is together sometimes it's people will struggle to um to have things in different files and break things down but i would say probably just start by creating a single file and then break it down when you need to i think that's a good rule of thumb in general for all programming but that's just me okay cool so other things we want to talk about are you'd asked javier about how much field level documentation comments you consider enough but not too much good question so once we've created our schema the next step is to think about how to document this schema so schema documentation is a really important conversation so a lot of folks will call dot we'll call graphql api self-documenting and that's a little bit of a misconception we do obviously have the awesome schema documentation panel two screens do i know how to do it i do there we are so in our documentation panel here this is showing us all of the queries that are available so right off the bat we can use this to build our query adding fields whenever we need them boom but we don't have any descriptions so it says no description if you haven't added these before i would highly recommend adding them so the way that i typically document the schema is with for each type or interface or top level type whatever you want to call it you can open you can use three double quotes to open the comment and then three double quotes to close it again don't shoot the messenger on that one i didn't invent that syntax i will then use this space to write some documentation what i usually like to think about when writing this documentation for the real world or more real world projects that i'm working on is what do i expect a consumer of my api to know what do i want them to know so that they can be the fastest most efficient version of themselves that they can be so here in this space we can just say a pet is a uh is the main type at the pet library this interface is implemented by several subtypes cat dog rabbit and s and stingray i don't have any hard rules for how long this should be but it should be descriptive enough so that if someone wanders into a computer sometime and they know nothing about your api it should be enough to communicate what you're trying to trying to say let's see yeah so cool so let's take a look at this sorry i was reading comments and at this point we should be able to check out our pet type and we're not seeing our description yet so number one all of this is being added to this space we have all of our different implementations let me try restarting to see that this is popping over there we can also add these to individual fields so for example let's add a couple comments to our customer type so we'll say this is a unique field for a user's name i don't know how good that is we'll stick with it so let's get our customer back so something we also have access to is the schema search so if you like i am are scrolling around like an inefficient person you can always search for customer and this will pull this up the interface documentation should be in the introspection panel yes it should okay so backing up a step this is how we would add those comments or documentation to our types and then for each individual line i typically just use the single line quote for that i'm struggling with why this isn't showing up yeah exactly um double quote is valid for a single line description as well absolutely so if you prefer that syntax for maybe the entire type go for it certainly um the other thing we wanted to look at was our customer so the customer we had a username there we go so finally that popped up for us how sweet is that um similarly we want to we probably want to take the step of adding this documentation when our schema is in pretty good shape so what do i mean by that i mean like once we are as a team feeling like the schema is in a shape that's ready for production or at least ready for robust testing taking the step to write some documentation is usually a really nice idea so highly recommend that okay let me show you a couple other things about our our mocs here so because i wasn't getting this to reload before the break i wasn't doing a particularly good job explaining what these mocks were doing so i'm going to try that again we're going to pass these mocks into our apollo server as an object so for each one of these types int string and date i'm going to say instead of using the mocks that are part of the default library use these values instead so here in our apollo studio explorer we're gonna look for say uh i made that query and that's a that's a weird query so let's say all pets and then we'll look for our name so for name here this says cool pet which is kind of silly so cool pet is what i'm returning as a string we're just basically saying anytime there's a function for uh this field go ahead and call that so we're replacing the defaults with the mox object now a lot of people have asked the question why is it that when i send a request for a list i'm only getting back two values that's kind of frustrating what we can do with this is we can import from apollo server this value called mock list so the default is always that if we're returning a list it's going to return two objects if i incorporate the mock list constructor or the mock list class rather we can inside of here we can say query and then an m is not a comma um we'll say query and then we'll say all cats there's something that's really important to note about this is if you're nesting different objects in here if you're nesting different fields in here everything you need every field that you add needs to be mapped to a function so check it out i'll say new mock list and then let's pass in five okay so the other thing i'm doing wrong here is because this query is returning an object i need to do the thing that i always see bugs in code about which is we want to point our arrow here at a set of parentheses that's wrapped around an object we're actually returning an object filled with custom functions here so this is what that line 14 looks like and i'm going to copy and paste this into the chat just so that we have it that looks really good right not really but we'll try that again and let's see why our mock list is abandoning us interesting hmm oh haha all pets everyone is like hey mock list is not a constructor okay fair enough yeah sometimes you want just the cats only right that's what that felt like to me as well all right so maybe something has changed since i last saw this hmm interesting so i think mock list is only working with um let's see if that works no it totally doesn't so it may not be part of oh it does we're learning a lot today about the mock list okay that's good i feel good about that if it's not working for you so i think the newer way of handling this actually and this is good for us to explore together yeah deprecated used plane arrays instead fair enough we can do that i feel good about that so what we can do instead they burned us they deprecated us but we won't panic all we need to do is this we'll just use javascript that's actually better because we're not importing something that we don't really need because javascript is our friend and we can do this so we'll say new array will pass in maybe three or let's say 10 not 310 and let's give that a try so we will refresh excuse me we will run it and i feel good about this we got our pets how cool so let's live in the now we'll live in the modern future where we don't have the mock list anymore but instead we create a new array and this will create that list for us pretty cool all right something else i want to show you is if we want to add on to our mocking capabilities a little bit yeah so if you wanted to pass in a different value here you could it's just whatever number you want to create yes rest in peace mock list we'll miss you but but we won't miss you that much we'll be okay um cool anyway so our next thing that we want to take a look at just laughing at my own jokes as is my custom is we're going to stop this server for a second and let's incorporate a library that generates some fake data for us so you could use faker for this you could use something called casual for this and what we'll do is we'll say npm install casual and once that is installed and let me type that into the chat this opens up some even more cool possibilities for us npm install casual sorry yeah exactly javier if you're using apollo server version 2 you can uh you can still get away with mock lists deprecated in version 3. we are at 3.5 so this is why we had to send mock list off on the ice flow javascript question why do we need the spread you just get all nulls with new array n so let's take a look um if we get rid of the interesting failed to fetch because i stopped it so value to set and query we get this strange um strange error basically what we're doing here is we're pushing some new items into that array we're creating new and the square brackets he meant um yeah let's take a look so you want to go this route without the like that take a look we get a bunch of nulls right so basically what this is saying is we need to put this into some sort of new array this error that we're getting is not pushing in all of those values so yeah it's we're pushing all of these values in here so the new array 10 gives you an empty array with a size of 10 exactly and then what we're saying is create some mocks inside of there yeah not with 10 empty items so that'll give us access to all of those fields that are part of each one of those pets so i too think that syntax is a little kooky but but we're going for it so um basically it's just saying make an array containing a certain number of copies of that item uh cool so i promised to talk about casual and then we started to talk about the [Music] spread operator a bunch so we're back to where we were chris is coming clutch with good explanations i like it we're going to patrick even typed it out ooh brian array from i like that too yeah that's a cool thing about programming and also the worst thing about programming is there's more than one way to do something anyway let's incorporate casual this is our last thing that we'll talk about here for um for mocking unless there are other questions which there are already so maybe not um we want to incorporate this casual library so we'll say cons casual equals require casual should i have deleted this i should not have okay what i'd like to do next is we're going to scroll down a little bit and for our let's say for our okay for our ins this will generate some sort of a random number between those numbers we need to also restart our server and not delete read file sync um so no that's really bad what has an int one of those things could we could just incorporate that there um the final thing i wanted to say is you could also pop this in here so you could say casual dot integer and generate some sort of a random number so that's a possibility as well lots of different paths toward the same results folks are getting ready to move on so that feels like it may be time to do so um but i just wanted to reiterate that what we were really here to talk about even though a lot of questions popped up about mocking was that iterating on a schema as a group is probably one of if not the most important conversation about working on a graphql project i think that our interface is a great way of setting that up we can create different union types as well so union types will allow us to query different things um we've talked a little bit about the different types of pagination specs and the final thing that i want to talk about is this so let's go ahead and add to our customer we're going to add to our customer a location and let's say that this location was already in our schema so the next thing i'll do is i'll type or i'll create a type called location and instead of making this a string like it would return tao city california we want to update this to be an object a custom object with a city and with a state a u.s centric example but we get the idea now the next thing that we can do here is we can say that the location itself is a string but this is a field that's been deprecated and the reason for this we'll say use location details city state instead so with our deprecation we have a reason that will pop up in our apollo studio or in our playground or graphical or whatever that is from here what i can say is location details should be set to location so i should make that not required so anytime we're trying to iterate on these values it's harder to remove things from a schema than it is to add them so this is what we're doing here we're saying hey this field doesn't exist anymore it's deprecated and then the location details should return that object so the backticks that we're using here are actually going to be used for this um check it out okay let's go back to our api here we're going to look at the username and in the context of the sandbox here it doesn't highlight this name but if we were using like graphql playground it gives it a nice highlight so maybe that's a future thing we could talk about for studio that's a good idea david asked does anyone have a good naming strategy when you need to change an output type but you already took the most sensible name good question so in this case we have just given it a different name even though location might be a better it might be a better name for that field you could say something sort of related but does anyone have anything better that you might want to use instead totally so um what we can also do here in our response let's take a look at that and other folks are mentioning other questions so feel free to participate in that so what i want to show is a quick example of a custom object so the location itself is returning an object throughout our schema we can define custom objects that will represent different types and these custom objects can be used as responses to queries and to mutations so what's really nice about this and i'm sorry that i'm taking forever to find this i have a point okay is a nice thing that we could add here let's say we wanted to say create account right and create account should return a union that is a an account payload and this should return either an error or a customer and then the type for error is a message that's just a string remember just like in the case of our family pets a family pet in this array will return either a cat or a dog for our union type of account payload we can for the mutation or for any of our queries we could return this instead and what this is going to return is it's going to return either an error or a customer this is based on a pattern that has gotten pretty popular in the world of graphql i will share with you a great talk it's like one of the more popular ever sasha solomon gave this awesome talk she works at twitter and there's a blog about it and this is one way of approaching this and there are of course other ways of handling graphql errors as well but this is just one of them as it relates to the schema so i wanted to take a second to talk about it all right so we've talked about schema design when we return from our next break we are going to talk some more about how we work with some of these apollo tools for checking in and checking out our schema so we're going to take a look at the rover cli we're going to do some configuration we're going to set up accounts we're going to set up dev graphs we're going to attach our clis to live sites and use this to do a lot of cool stuff so let's come back here in 10 minutes i know folks have questions but i will answer those as soon as we get back from the break thank you all so much for being part of this class i've had so much fun so far but there is more to come so more to come in 10 minutes have a great break all right welcome back everybody i put on the coat because i got cold um how we feeling out there how are we feeling about graphql about apollo about life in general hopefully good um in the final section of our course together this morning we are going to talk a little bit more about kind of some of the developer tooling that we have access to with apollo studio and with rover and things like this this afternoon we are also doing another um we're doing another course on apollo federation so we'll dig deep on that this afternoon we'll build our own federated graphql api so don't forget about that a couple questions that have come up uh there's a question about the apollo server with mox versus the apollo mock provider so most of my experience with mocking is on the server but the mock provider is used to mock data for the client so a really good use case for using a mock provider is when you don't have access to your server and you want to just mock things on the client side it's also really useful if you're iterating on a client project that you're working on so that will be part of the picture as well so mocks on the server are what we demonstrated here the mock provider is how you can basically test your react components so yeah exactly so as you said the mocked provider is a react component i'm going to share a link to your or two i guess it's your docs to all of our docs america what am i talking about so anyway this is what we're doing here this is kind of the front-end version of this that you can use for react so if you have access to the front end this is what that's all about daniel asked if we're gonna use federation version two yes we are definitely using federation v2 federation version 2 came out last week but it doesn't mean that we shouldn't learn it today so it's very exciting there's a lot of cool new features that we can take advantage of so of course we will be using the latest all right so if we use stored procedures to get data from a database how will we leverage the graphql advantage of getting only specific field since the stored procedure might return a lot of data but graphql will return part a lot of that comes down to your front-end caching a lot of benefits that you get and get from that where you cache the results of maybe a restricted list of fields where you're not making round trips to your server so that's a good way of handling that okay so a lot of great questions popping up there was a question about subscriptions as well um we're not going to go into subscriptions too much but i do have some good resources for that the whole idea of a graphql subscription is that in short they work over web sockets and allow us to listen for data changes in real time a good example of a graphql subscription for a simple example of a graphql subscription is this vote activity so this will be fun data loader from facebook is a pretty great tool yeah definitely check that out check out apollo data sources as well as a way of handling the responses from a rest api i know that's not what you're talking about with the databases but yeah excellent idea um just a quick look at a graphql subscription in practice and i will encourage you all to play along with this here's a quick example of a small voting application that has results for alex and eve back when a lot of the conferences were live at a live conference i was hosting with my coworker husband alex and we put it up to the audience to vote on who should be the emcee of the conference for the rest of the day so jenny you would ask are those data changes only to the graphql server or can it detect if there was a change made from another source um team alex i love it yes i'm team alex too uh talk to my therapist about that but we'll go ahead and we'll look at this query this returns a an uh sorry an object of results for alex and eve then when we send a mutation for voting see eric team alex we're gonna vote for this person a couple different times this is going to change the data of the application so if you want to send your own mutations if you want to follow along with that you can oh sorry get back gets back to where we were so with our vote mutation we are going to execute these mutations for any time we want to issue another vote now queries get data mutations change data subscriptions listen for data changes in real time so if i issue a subscription for a result right it's going to set up this listener i'm listening for any of these data changes and because you are all a great audience you're voting and you're making it look like the app works so that's very exciting so has these new events come in as these mutations come in it's going to change the data so think about a query and a mutation as working over the http protocol for the most part we're sending a request and we're getting a response with a subscription we're listening over a websocket so i think about a subscription as being like i i'm making a call right i'm calling conrad and i'm saying hey can you tell me the most recent changes to the vote tally whenever you have it and i'm just gonna hang out on the phone here versus being like hey conrad what are the results and then i hang up the phone and he calls me back and tells me what those answers are so subscriptions are really a powerful construct in graphql they were first used we should be looking at the election they were first used in uh production at facebook for those for those live likes that you see on posts so every time someone likes a post you see that thumbs up graphic changing in real time similarly when you have those floating emoji heads going all over the screen that's powered by in those live videos that's powered by graphql subscriptions as well and then there's a great question here there's also a live directive for using that versus a subscription so typically our subscriptions will um yeah exactly so subscriptions function independently of people calling the mutation it's up to you how you activate a new send of data based on an on change so yeah typically this will respond to a mutation but it doesn't necessarily have to you just need to trigger some sort of change okay so that's a an aside about subscriptions i do take requests um i'm gonna close this in five four three two i was hoping alex would win uh one all right thanks for voting that was fun we had fun all right so who is alex and why is this election so close so alex is my my co-worker slash husband and he and i were hosting a conference and we built that very silly app so has anyone here ever set up a system with subscriptions integrated with kafka um i assume that someone has because that is a very powerful thing i've used redis a lot for subscriptions and creating kind of a store for that live data there was a question about the live directive and using that versus a subscription so remember the graphql bleeding edge playground that we looked at before i'm going to pull up a link to that now that's the place where you can test out those live queries so those work a little bit differently than subscriptions because they're just going to populate the most recent data but if you want to play around with the live directive check out that playground for more and let's see there's also this live query there's also this live query repo that digs into a little bit more detail for that um which is pretty cool so if i had a rest api that was referencing from graphql and another sir and another service was updating via that api and not graphql the subscription would listen for those changes as well yes so long as you add to your um to your on your subscription rather as long as you add that to your um your function uh that will work what i'm going to do is share with you the code for that voting api and i'm going to try to remember what it's called first times a charm so this is an older app i'll be honest that this is kind of a little old so we have apollo client in server 2 hooked up here but the vibes are the same for the modern version three of both of those so if you check out the api folder in this project i'll share with you the whole repo in one second the api folder has an index file where we're using pub sub via apollo server express to make this work all we need to do to make the subscriptions work is first add it as a type to our schema we then add it as a resolver and as you mentioned before i think it was david who said um we have a subscribe method that's part of our resolvers and these are going to use this async iterator function to iterate through the different uh different listeners so you can use this as a possible example there's also a front end which probably uses those older subscription components but this thing still works and what's cool about this is even though we were using one instance hosted on a free heroku dyno someone basically wrote a program to ddos this this election and voted like tens of thousands of times and it never crashed so there you go very exciting so that's that on subscriptions i can totally send you some more resources on that jenny if you're interested i have more samples and things like that um i'll make a little note to do that if you send me an email that will help me remember to do that faster but that is on my list of to-do's okay and trevor said almost had the auto cannon set up i know you should have never too late to get that going all right cool so that is a lot of conversation about a lot of things inside of our rover and studio folder i have a folder for the pet library that's basically just using some [Music] some basics we have some mocking setup and things like that fyi voting is still going on awesome so yeah we'll shut down voting when uh when we feel like it i guess that's so funny oh another thing i wanted to share the voting never stops all right so something i wanted to share was a resource in the chat from before the break this graphql rules website this is one i've never seen so thanks to whoever shared this i'm sorry that i don't remember i'm scrolling up trying to remember it's happening okay reading is hard but this is a great resource for some different schema tips and tricks so check that out if you're interested so i can't take credit for that but i'm passing it along in case folks missed that in the chat a little bit earlier okay so we've talked about schemas we've talked about defer and stream we've talked about some examples of subscriptions and some other tooling tips along the way the final thing that i want to discuss today in a little bit more detail is how to work with apollo studio and rover for graph monitoring if you haven't set up your all right if you haven't set up your um studio account yet i would encourage you to do so we can do that by going over to and let's get our toolbar back we're going to go to studio.graphqapolographql.com you can log in with your github account and you will probably be taken to a screen that looks something like this so let me share that link with everybody it's also in your student files and if folks are joining late there are there is a list of resources in this repo here so let me just share that also so in our list of example graphs we have a ton of deployed graphs that you can check out which i think is a useful exercise always to see how other folks are setting up their own projects and then the whole idea of apollo studio is not only does it give you this awesome interface for sending queries with the explorer so we saw this already i'm just going to my example here and you can use one of those sample graphs if you'd like to we're going to open up the pet library here and this will show us all of the different features of studio number one it's a schema documentation portal essentially where we can see all of the different queries mutations etc for our application we also have this nice explorer that we saw already but this is integrated into studio as well it doesn't just run alongside apollo server it also runs here moving down a little bit further we have fields so fields are showing us like how many times are people hitting this particular field this is really nice for also um checking out like a history of that schema so earlier this morning i pushed an update to this schema and it's showing me like everything that's changed descriptions have changed we removed a field the category field we've added fields and this will keep track of all of these different changes so this gives us insights into our graph the conversation used to be and i have a ton of these apis out here in the world because if someone hacks my pet library api i care but don't care that much because there's no personal data here or anything but in the earlier days of graphql the common idea was that oh we should just make our api public and everyone can consume it and then everyone's like no we don't want to do that that's that seems really scary so more often than not you'll find that introspection or the ability to um make all of our fields in our schema visible will be turned off but we can manage our schema using apollo studio instead so in addition to this nice user interface for dealing with our schema we also have access to a really awesome tool called rover that's going to allow us to continually push new changes to our schema in order to collaborate on it as a team so let me show you what i mean by that we're going to open up i'm going to share with you this documentation for installing because if you haven't installed rover before it will be a good idea to do so so i'm going to put this up on the screen for a moment i'm going to share this link with everybody in the chat and rover is a tool that is a replacement for an older tool called apollo cli so rover has a lot of cool features it has a lot of exciting uh kind of integrations with federated services as well which i'll talk about more this afternoon if you are interested in coming to that session but for the moment i'd like you to ensure that you have this downloaded so what i'd like everybody to do is to you can run this with curl if you'd like to you can also install this with npm so you could install this to your dev dependencies of your project you could install it globally there's a lot of different options for installing it but let's just i'll shut up for a minute um and you can take a second to make sure that that's downloaded so emanuel you had ask the question about being on excuse me being able to only see a couple of those features so let's see so a couple different things here if you can only see a few of these features it's likely that you haven't been able to it's likely that you haven't been able to set up your server to interact yet with this api so i'm about to show you some cool ways of being able to push your schema to studio so that you can do more monitoring another question that's great here for the monitoring feature does the data go through apollo servers i would guess so i'm working with health data and due to hipaa constraints i'm not sure if it's used to use for monitoring purposes that's a really good question if um yeah i'm what i would assume is the same thing as jenny which is that studio doesn't get the actual response data just the metrics so we would have access as we see to these fields but not to the actual data that's being returned if there are some apollo folks on the chat who know a little bit more about the hipaa and gdpr considerations um i'm gonna shout you out because you might know more than me but i would say that for the most part we're dealing with the fields themselves versus storing the data the metrics are really to tell you how long does it take to fulfill these queries how long does it take to ask for certain fields am i asking for a field let's say i'm asking for a biography field and it's really called bio that's gonna be different so thank you one for that awesome question and i'll make a note to follow up with you on that because that's a great question other things um unsupported engine let's see i think that could have to do kristoff with your version of node you may need to roll back to a you may need to roll back to a previous version i think i saw recently that we may need 12 or 14. so what you can do is you can use nvm to change that version and see if that works and if that doesn't work try installing it in the project itself let's see um because i don't want to works for me on version 12 if anybody else is getting those errors what i'd recommend you do is i'm going to navigate to the pet library folder zoom cd drag it over there because i type make typos a lot and then we'll run npm install and then you can just try to configure rover in your folder here so you could run npm install save dev at apollo slash rover yeah steve i i saw that too i was trying to find it on my side screen but it wasn't coming to me but it works for version 12 and 14. so if you do type node v and c 16 or higher check that out uh what else let's see so folks who are interested in more on that hipaa data thing because i don't have your email address and because i don't want to ask you to type it into a public chat i will type my own into a public chat because that's not very uh that's not very secret um cool so yeah if you're running that's what i thought kristoff about you running 16 i think that's interesting yeah lots to try um try to install that in the folder itself versus the um versus the global install i love that folks are suggesting other versions of nvm that's great i wish you well on your journey with whatever tools you choose but i'm here to show you a few so what we're going to do next is we'll talk about how we can set up our environment using uh using rover so we have rover installed in some capacity ideally it's in our pet library folder or we've installed it in our on our system so we also i installed it via curl earlier today and that worked pretty well another thing to do once you have installed that is to close and reopen your terminal i've run into a bug with that before not a bug but it doesn't have it in context it isn't added to the path until we reopen the terminal so just a quick note on that so once we've installed this our next step is to configure rover to work with apollo studio i'm going to head back over to apollo studio and oh nice brian hooking it up data privacy very cool so that will be something i'll add to our list of student links as well so throwing it out there okay so the first the first way we want to get started with our project here is to go to our pet library folder we're going to run an npm start and this will run our server on local host 4000 so we should be able to and that popped open over here that should be able to open this up in our there we go should be able to open this up in our local sandbox now one way that we can utilize the functionality of the um of apollo studio and rover together is to set up what's called a dev graph so think of a dev graph as being a studio tool for local versions of our apps so the way that we set this up no matter what context you're in here you're going to click on new graph now new graph you can i have a few different organizations here uh because i'm disorganized more organ organizations means you're disorganized we're going to go ahead and give this graph a title and the title of the graph will be uh pet info this will create a custom graph id for you that you can set to be whatever you want there's two types of graphs so we have deployed and we have development so the development graph is going to just look for local host 4000 or whatever custom version you've used something to note is that if you are setting this up and let's try this again so i'm going to do the whole thing again to try to break it so if you are trying to create this graph and you don't have the server currently running you need to have it running so start your graph up again and then this should work for you all right cool so we're back we're going to create our graph and this should run our graph locally so we can run all of this locally with our server so that's obviously a quick first step for that but realistically we probably want to do a bit more monitoring of this so here's what i want to do i'm going to go back to our i'm going to go back to our terminal and we're going to make sure that we're in the correct directory as we know i can't navigate to a directory without using this tool i can but do i want to i don't does this even work it sure does what a life okay so we're navigated to the correct spot what we want to do next is we want to type rover let's just type rover first if it says command not found try two things thing one to try close and reopen your terminal thing two to try is to maybe install rover locally in your project you could also try typing npx rover and that may work as well and this will just as you know probably give you some sort of a list of all of the commands that rover will allow for you to use so check this out i'm going to type rover config off this is going to ask for my personal api key it's going to ask for an api key to get us started so what i can do is i'm going to kill this for a second i'm going to use this link i'm going to use the awesome developer experience that apollo is providing for us to create a new key so we're going to create a new key i'm going to call it uh awesome class key this is important don't delete this key or don't close this window because you won't be able to get it back as this says make sure to copy your api key now this is not a joke you're not going to be able to come back here and get it so you can always generate a new one it's not a huge deal however it's a nice thing to grab that everyone can see my api keys so that's terrifying to think of what you could do with that and we're going to go ahead and say rover config off i'm going to paste that link it's going to paste and it doesn't look like anything has pasted but it has we're going to hit enter and then this will say that i have successfully saved my api key okay how is that going for any everyone there's a little bit of a lag every time i ask a question so there's a lot of suspense for me i'm hoping that that is going well so we should have saved our api key in that way it's also possible to save your api key using an environment file so you could in your project add a dot end file for this you're going to say apollo underscore key and set that equal to whatever your key is now it's important to know that the apollo key in the environment file is going to override anything that you set up using the cli so that's really important to note this will take precedence over the one that you set with your configuration profile okay so there's another question here only copper and copying the latter part of the full string it should be the full string so you're going to have a user and then you're going to have uh the value over here as well so it's up to you where you want to put that if you're using a ci process which you probably will be at some point for your project it's probably a good idea to configure that in the environment file um but love it people are in they're wearing sunglasses i love it there's a question here about the student list of all the links that were shared yeah so not only will you have access to the links that are currently there i'm going to sweep through the chat after this and make sure that everything is posted as well yeah gh meaning github exactly okay cool so we have created our connection with studio at this point using rover sorry for touching the microphone very unprofessional what are what we're going to do next is we're going to inside of our type definitions let's make a couple changes so i'm going to change the just gonna delete some stuff this is scary right if someone came in and started doing this to your actual api this would be a full nightmare but that's what we're here to do cause chaos we're just deleting some stuff at random to feel alive the next thing we're gonna do if we go back to our terminal there we are is we're going to check in our schema so what's cool about this and we can run this and let me share the link for everybody there's a nice little list of common commands that you can take advantage of right here on the main rover documentation site this will if we look at our cli we're gonna do this so these are some of the common tasks the common commands that you can run using rover to publish your schema so the first one here is how we might publish our graph schema to apollo studio if we had our schema in a local file which we probably do but we're using the schema document itself to publish this so this is a really good option if you have a file that ends in the dot graphql or the dot gql extension right then use this one you also can fetch your server schema by introspecting it in other words you're going to send a version of the schema that you've gotten by having having rover look at whatever your schema is that's currently hosted here so yeah just me deleting a bunch of fields is not very production ready however me iterating on a schema or having a bunch of people iterate on a schema together and then pushing that to studio as a schema check-in that is super production ready because it means that studio becomes the source of truth for your source of truth in other words the graphql schema is this blueprint for your entire app but studio is the place where everybody can collaborate and work together and ensure that by me just deleting stuff and being a full animal and ruining my schema i'm not going to cause too many problems because in studio i'll be able to ensure that everything is working okay so a couple things we want to make sure that we're at studio so this is our this is our schema sandbox that's running locally but we want to take a look at the pet info dev graph here and if we look at this let's see if we look at this here this is showing us a change log of all of these different changes that i've made so let's make sure and i'm like totally not in the right thing so here i've created my personal settings uh for this project so we're in the moon highway graph here and we're also using this pet info project here now what we want to do inside of this is we want to publish our schema we want to publish all of these changes to the appropriate spot so what i'm going to type here is the thing i typed before we're going to type or the type the thing we saw before we're going to type rover graph publish and then we're going to make sure that we're publishing this to our pet info so sorry trying to find okay we're trying to find our little graph id here so we're going to publish this to the graph title and the graph id so let's go ahead and look at this all right cool so we'll say pet info at pet info all that stuff and then we'll say dash dash schema type defs dot graphql okay cool so now because i typed the wrong thing because i sometimes type the wrong thing what we're going to do is follow the instructions of this so check this out we're making sure that our graph name is correct if you don't know what that is i don't we're we're gonna ask so rover is helping us out in such an awesome way rover config who am i this is going to check the identity of that graph and we're gonna get it from here so let's check again this will show us our api key it'll show us our user id it'll show us our origin so let me pull up how we get that that graph again a dti agree but we need that let's see cool so let's go back we're gonna go to sorry and make this happen it's very exciting okay let's try this one more time so we're going to go to our we're going to go to our graph title i think this should work and i'll go over this again one more time i just want to make sure that i'm not messing up these instructions for you so let's try this ro we'll type we'll go up because we are busy so we'll say pets and we'll say at current h e y e i there it is awesome so let's try that all again it's happened and probably if you've created your graph from scratch the variant that you're on is called current so the way that you find this and it took me a it took me a minute um the way that you find this is you're going to click on your graph you're going to go to the settings and then you'll use the graph id and you'll use that with the at current symbol so let me share with you what i just typed so that we all have it we have so many screens happening but this is how we're going to be able to publish our local version of the schema so this is what that looks like for me the part that goes before at current is going to be a little bit different for you but that should work nicely so what's cool about this is if we take a look at our explorer here this should show us the changes that we've made so at 11 18 i went ballistic i caused a lot of problems i changed types i deleted stuff i've did a bunch of bad things and ben if you're seeing no changes let's see make sure that you make sure that you're pointing to the right file make sure you've sent that schema flag make sure you've saved your file and if all of those things don't work just let me know so this is the powerful conceit of working with studio the whole idea here is that we're using studio as a as a tool for collaboration and a tool for organization nothing is more important in a graphql project than a schema if we're breaking our schema then we're breaking our apps so this is going to give us a lot of insights into exactly what's going on here so rover is going to help us with checking in our schema this way we also have the ability to introspect our schema as we saw from a running project or from a local version so you could pass localhost graphql or you could pass a working api like this sometimes it's useful to check out how you might do a schema check with a url so you could always do that with this global version and then again if you're going to be part of this afternoon's class you could also use the you could also use the super graph compose feature and we'll we'll show you how to do that this afternoon to put together multiple sub graphs and check those in so a lot of awesome features that work really nicely with federation as well okay other things i can see my changes in the change log but can't see the changes in the sdl or reference so the change log itself is going to let you know what has changed the sdl will just give you a um a read of what is your current schema so there won't be any uh there won't be any notes here about things that have changed and then also the reference itself the same goes for that so i hope that answers your question andrew if not just let me know okay so we are dangerously close to the end of our time and i like to respect people's time especially if lunch is involved so i want to point out again that everything we've talked about thus far is here and i'm going to add to the bottom of this list a list of all of the links and resources that we talked about today so any extra notes cool resources that our other collaborative students have shared are going to live here there's also a demo of some client-side batching that you can take a look at too and i will add to our list of error handling as well so we saw how the error handling pattern works in the schema but we can talk more about or we can add more about other things too um i also want to pull up our slides remember all of this and i just want to say thank you to everybody i know that there will be some more questions and i'm happy to hang out and answer those but i want to thank everybody so much for being part of this class today it was a lot of fun to go through some schema design stuff and some introductions to new spec features as well as how do we start to think about how to manage our schema as a team always feel free to send me emails or questions you can send those over at eve at moonhighway.com or find me at eve porcello at most places and that's about it for today i want to thank you all so much for being here join us this afternoon when we'll go deep on apollo federation and we will be using federation two not federation one that is so last week federation one is today so thank you all so much i really really really appreciate uh everything that you helped with if you have localhost running your schema is being restored by studio gotcha so yeah we can use this the localhost 4000 option versus the static schema good call awesome and if there was a question that you had um that i didn't get to feel free to ask it now i'll do my best to answer those if you want to send those over to me oh yeah we should check who won the voting if you want to send those over to me via email though that's fine too um thank you so much everybody the apollo community continues to be the best so i appreciate you all um what am i looking up vote.moonhighway.com is what i'm looking at application air it's hilarious we crashed that sucker yep we crashed the service isn't that cool oh what a treat i'm just gonna close that that may be restarting awesome what's the story behind the name moon highway that's a good question it came from the valley of the moon in sonoma that's where that first came from and uh who used a cannon to vote great question too much voting i'll have to look at what that is if you're coming this afternoon i'll try to figure out what that is crashed for check those logs uh some error handling we talked about the way that we could handle errors with the union types [Music] yeah the unions are one of those ways there's also um error handling it really is a full stack conversation there's error handling on the server which we handle with a lot of usually conditionals to make that work there's also error handling on the client where apollo client gives us a lot of error handling particularly with the error link so i'm going to share with you some client ways and some server ways of handling that apollo server errors and i'd be happy to share some more resources on that i'll add these to our student files as well um i think a good way of thinking about this is captured in this error handling doc from apollo and that's to think about that's to think about kind of what are the different types of errors and how do you want to categorize them do you want an error to completely uh stop your components from rendering or not do you want to capture those in different ways oh interesting you're coding a graph with prisma and apollo and the prisma errors get in the way yeah um that's really interesting why don't i do a little more research on best practices for that stack i think that's a good thing to look at if you want to send me an email i can respond directly to you i don't want to pressure anybody to drop their email in the chat because that's unkind but i will follow up with a little bit more on that topic yeah i think categorizing errors is super important and thinking through like what kind of error does what and it's it's an evolving story i think i look forward to seeing you in a future session if i answered a question in a way that was insufficient always feel free to get in touch but i thank you all for being such a great class and i look forward to seeing you again hopefully this afternoon have a great rest of the day everybody you

Channel: Apollo GraphQL

Views: 1,114

Keywords:

Id: DkEx2KfmI6c

Length: 157min 47sec (9467 seconds)

Published: Fri Nov 19 2021