FULL-STACK MOCKING with Apollo and GraphQL

[Music] hi everyone my name is Eve Porcello I'm coming to you live on tape from my home office in Tahoe City California I am so excited to be here today to talk to you about graph QL talking about graph kills pretty much my favorite thing to do we're gonna get into mocking with Apollo server and how we can use mocking tools to make our work easier as developers and there are some really awesome tips that I want to share with you so before we get started my name is Eve Porcello again you can find me at Eve Porcello everywhere online and I work with moon highway we teach engineers how to write better code we teach JavaScript and node and graph QL and react courses we also create learning materials for LinkedIn learning used to be lynda.com and egghead IO and we've written a couple books this is an old book called learning react and we're working on a second edition of that so hold off on buying this one we also have learning graph QL there is only the Portuguese version in my office today so that's what I'll show you but you can find it in a bunch of different languages a common phrase you may have heard about graph QL is that it's a query language for your API but craft QL is also a type system for your API this allows everyone to understand what are the types that are part of our domain and allows people to work on the project in their own separate areas but as developers we may want to start building stuff right away we want to be able to prototype even if we don't have the data sources set up this is where Apollo server comes into play Apollo server has some built-in tools that we can use to build mocking into our applications so that we can start to build our products right away the place I want to get started with this project is here at this github repo github.com slash graph QL workshop slash mocking these are going to be the start files that we can use to build our Apollo server with some mocking set up you can totally follow along if you'd like to but I do want to point out that there is a complete where you can see all of the files complete now the next step is let's take a look at our code in vs code we should see a simple Apollo server running we have our server being imported then we're going to create our schema and our type definitions we'll create some resolvers and then we're gonna go ahead and construct and start our server so over here in the playground on localhost 4000 we should see that we can query hello alright so that's pretty good but I think we can do a little bit better I want to add on to our schema so let's go ahead and do that we're going to create a new type and let's go ahead and create a type called cat this is the internet after all then we're gonna go ahead and give it a name a non nullable string an age which is an int and we'll say whether or not the cat is nice and that's gonna be a nullable boolean then instead of our query here we're gonna say all cats and then we're going to return a list of these cat objects now again with mocking the whole point is maybe we don't have our data sources set up yet or maybe those are being maintained by another team and we don't have access to them yet so what we can do is instead of having to deal with resolvers let's just get rid of them we're going to add a key to our server constructor and we're just gonna say instead of resolvers we're gonna say mocks true let's give that a save and check it out in the browser and if I hit a refresh I should see our updated schema we see all cats now again I don't have any resolvers written I don't have any data sources connected but if I try to query for the ID the name the age and whether or not they're nice and I click Play we're gonna get some fake data back so how cool is that we've added mocking to our server simply by adding this mocks true key now if we investigate this a little bit closer we'll see that an ID here returns sort of a long ID string anything that's a string is going to return hello world anything that is an int will return a positive or negative integer and then the boolean will just be true or false and however many times I send that it's going to be the same result and by same result I just mean it'll return the same types so this is how the default mocking works with Apollo server it's going to give us back some standard values for those fields now of course we can customize these mocks so let's go ahead and take a look at how we might approach this the first thing I'll do is we're gonna create a new object called box and then this time we're going to define a function that's going to return some sort of value for an ID so anytime I query a field that returns an ID I want to return this value so for now let's just say 32 that's the ID for everything then let's go ahead and say int should return 6 a string should return my cat's name biscuit and then we'll return boolean and this time we'll just return true because biscuit is really good all right so now instead of saying mocks true which is how we would use the default mocks we're gonna take this true away and instead pass this entire object of functions that are gonna fire whenever we see this type so we'll give that another save we'll go back to localhost 4000 and we're gonna go ahead and click Play and yeah we should see that IDs now return 32 all of our strings return biscuit all of our interns six and then all of our boolean return true so this is our first look at how to set up some custom mocking we're mocking by type now of course we can take this even a step further to make this more customized so what I want to do is go to our terminal window if I can find it and we're going to stop our service from running and we're gonna install faker so faker is just a an NPM package that we can use to generate some fake data for certain fields you can use casual or any other package that you would like but faker is a really nice option now that I've installed faker we're going to import it at the top of our server file so we'll say Const faker equals require faker now faker has a bunch of functions that are available with it so functions to return anything from Aggie UID to a number to a name to a boolean so we can use this package to instead of just generating these flat values we can use it to generate dynamic data that aligns more closely with these types so let's go ahead and do that we're gonna replace 32 with faker dot random dot UUID and that's a function then we're gonna say faker dot random number now this time we're gonna provide a min so we'll say one and a max which will say 100 because all pets live to be a hundred and then we're gonna go ahead and use another pretty cool function from faker faker named that first name awesome and finally this is gonna do pretty much the same thing as the built-in mock but let's go ahead and generate a random boolean so either true or false at random okay so now that we've done that we can take a look at our server I think I need to restart it so let's say NPM start now in the browser I can send the same query and we see a couple new things going on the UUID is still generating this long UUID let me switch this to light mode I think it might be a little easier to read so this is going to be our UUID we have a random first name being generated so that's kind of cool to generate a first name we have our age a number between one and a hundred being generated and we also have a boolean true or false so our data is a little bit more dynamic now we're starting to see some data that will sort of mirror real life data when we eventually build our prototypes and now that I have this set up I can set out to really be a client-side developer I can build my client applications without having to set up my data sources all right let's take this another step further we're going to create a new type and this new type is going to be called horse so horses have ids as well they have names they have ages of course and then they have descriptions so now that I have my horse type I'm going to go ahead and make some adjustments to my mocks object a horse has an ID so I'm gonna use the UUID that I have already same goes for the int and the string now the field in question is the description so if I want to create a description I'm going to add a mock for a type so the syntax is a little tricky here make sure that you're returning an object this object will have a key for the field that you want to return a value for so we'll say a description and then we're gonna call that fakir function so fake our random dot array element and we're gonna pass in an array of descriptions so we'll save majestic and we'll say honorable see if I can type that honorable and then we'll go ahead and stay a street-smart so these are all the possible descriptions for our horse all right so now all of our fields should be covered we have an ID and int a string and then we have a description so if I ask for this field it should return one of these values the final step I want to take here is of course I need to add all horses and this should return a list of horse objects cool let's replace our cats query with all horses ID name description and age all right so now we see this random value being generated street-smart majestic all being pulled out because we have this fakir function that's going to find one of those items for an array that's going to find one of those items from an array and return it now what we've noticed so far we have a all cats query and we have an all horses query both of these are returning lists of objects now each time I am returning a list of objects we notice there's only two so you might be asking why in the world is it only returning - I don't have any data so this makes no sense the reason for this is just that's the default lists are always going to return two objects now if you want to return a certain number of objects or if you want to return a random number of objects we can go ahead and make this possible by incorporating the mock list all right so the mock list is going to for each one of these queries it's going to return a certain number of objects so let's go ahead and add our query to our mocks object again this is going to return a function we're gonna use that interesting syntax again where we return an object so we're gonna make sure to have the arrow point to a set of parentheses and then have a set of curly bright have a set of curly braces inside that now every time I query all cats I want to return a new mock list and this time for all of these I want to return five so if I go to my query again and I look for all cats this time I'm just going to return the name I should see five cats here one two three four and five you can also send this mock list constructor and array this means that it'll return between one and twenty cat objects so every time I send this request I see one two three four five six seven eight nine ten and it's always going to return a different number between one and twenty there we go so that's how that mock list works we're gonna require the mock list from Apollo server we're going to create a new mock list and then it's going to return between one and twenty and of course you could do this for our horses as well you just say all horses and this time for each one of these horses let's say I have a UI that just displays four different horses I can send a single value to that and then now I can say all horses and no matter how many times I click it it'll always be four very cool so far we've assumed that we don't have any data we just want to use mocks but sometimes we might have some resolvers to return some data for certain fields for a part of the schema so let me replace all cats I'm just gonna remove this and I'm going to create another object for resolvers this time our query will have a resolver for all cats and every time I queried the all cats field I want to return an object where there's an ID of one and a named meatball and prettier will save me and make that look a lot better now I'm going to collapse these mocks and I'm going to add resolvers to my server constructor so again I have some data for our resolvers that I want to return just one object every time I query the all cats field we created the name the ID and the age we're still seeing these mocks so I'm seeing the name field I'm seeing the number between 1 and 100 and I'm seeing the UUID so notice that the mocks are overriding the resolvers in this case so what we need to do is if you have some other data that you want to use you need to add another key here so we're gonna say mock entire schema false now if I try that again I'm gonna see one and meatball but then for any fields that don't exist like age or like nice it's going to provide me those dynamic values from the mocks so there are a lot of situations where yeah you might have all of your data for the cats you don't have anything for horses yet you can use this dual approach by saying McIntyre schema false so that some sort of value is provided even if you don't have everything but you have some things something that I absolutely love about graph QL is that it is a type system for your API so type systems lend themselves really nicely to mocking and this is just the tip of the iceberg for all of the cool things that you can do with mocks so if you want to use Apollo server they have some great documentation for how to get started with this stuff but mocking exists in any graph QL project all you need to do is return certain values that match your types for each one of those fields and you can get prototyping and get building without having to wait on data sources to be set up connected and so on and so forth I want to thank everyone for being here today again you can find me online at Yves Porcello I write a lot of articles and blogs on our website moon highway dot-com and you can also join our mailing list at bitly slash moon highway to stay on top of all of the latest developments and graph QL react and much more so thanks to everyone for being here thanks to the bike come for organizers this has been amazing always feel free to get in touch if I can ever help you in your graph QL journey thanks so much again

Channel: Bytesized

Views: 1,747

Rating: 5 out of 5

Keywords: byteconf, graphql, graphql tutorial, graph ql, graphql for beginners, graphql react, graphql tutorial for beginners, graph ql tutorial, web development, software development, frontend development 2019, front end development 2020, javascript 2020, javascript tutorial 2020, graphql tutorial reddit, graphql guide reddit, graphql tutorial stackoverflow, graphql mutation vs query, graphql query and mutation, what is a graphql query, what is a graphql mutation

Id: qnO2UjggMrg

Length: 19min 26sec (1166 seconds)

Published: Thu Feb 20 2020