Placeholder Image

字幕列表 影片播放

  • in today's video, I'm going to be teaching you what graft oil is, why you should be using graphic you.

  • Oh, and by the end of the video, we're going to create this application that you see here, which is a fully functional graphic you'll server.

  • Let's get started.

  • Now let's get started by talking about what graphic you'll is.

  • You may be thinking that graphic you'll is this brand new, really big, complex thing.

  • But in actuality, all graphic ul is is a specific way to use tools that we already have.

  • Graphic.

  • You'll is just a specifications in built around Http, for how you get and received.

  • Resource is from a server.

  • Normally, you'll be using something like rest when you interact with a server and you're using rest ful end points and the http post get delete, update all that fun stuff for http requests using rest.

  • But Grafico gets rid of the whole idea of rest and all those different endpoints and gives you one single endpoint and the way you determine what data you get back from that end point is based on the query that you send to that end point instead of based on which end point you send the data to.

  • So let's look at an example of how a graph que el Khoury works versus arrest query to get a better idea of the difference between the two.

  • Imagine that you have the application that has books and authors as your to resource is in.

  • Each of these resources has maybe 15 fields in each one, so book could have name description, page count, I ESPN book cover et cetera, and same thing with author, and you're building a front and application where you want to access just the author name and all of the books and their name for that particular author.

  • So you want to get all the authors and their names and all of the books by all the authors and just get the name of those books, and you want to display that on your application as quickly as possible for your users.

  • Using a typical rest a p i n point as our first choice, we have to end points we can use, which is the authors, and point to get all the authors and then a separate and point to get all of the books for a particular author.

  • So the first thing that we need to do is we need to access that authors and point to get back a list of all authors and with that list of authors were going to be getting back the idea of authors and the name, which is what we want for application.

  • We're also going to be getting back a bunch of extra information, such as where that author lives and how old that author is, which we don't really want for this page that were displaying.

  • Then, once we have that list of authors, we can take the idea of each author.

  • So for each author we get back, we can call our server again to get the books for that particular author and then so if we have five authors, we get back, we're going to be having to call the AP I five more times to get the books for those authors, and each time we call that we're going to be getting all the information back for the books, not just the name, even though all we really want is the name.

  • So by using rest a p I in order to access our data like we're used to.

  • We have to call her a P I many more times than we really want to on.

  • We also have to get a bunch of extra information back from our server, which we don't actually need.

  • Now let's look at how graphic you'll will handle this situation with grafico.

  • Where you do is you compose a query of exactly the data that you want.

  • So you telegraph Cool that you want to get a list of all the authors.

  • You want their name and you want to get all the books for each of the authors and the books names you telegraphed fuel.

  • That single query, which is going to be very small.

  • You send it to the server and the server, which is your graph.

  • You'll server is going to parse that query and send you back exactly that information.

  • So with just one query to the server, you were going to be getting back a list of all the authors and their names and a list of all of their books and their names and no extra information.

  • You get only the information that you asked for it, and you can get as much information as you need or as little information as you need.

  • This is incredibly powerful and is the real reason that graphic you'll is so important and picking up so much speed.

  • The ability to be able to not only query specific information but also weary, nested information such as books inside those authors without having to call your server more than one time is absolutely amazing.

  • And this is really just the beginning of the power that graphic you'll has, since it's built just on the normal http protocol that we already used.

  • We don't have to use anything new or fancy in order to get started with graphical, which is amazing.

  • There's also plenty of different libraries out there for tons of different languages that implement all of the graphic you'll features for you in an easy to use way in our example.

  • Later, we're going to take a look at building a graphic you'll server using know Js and express another thing.

  • That graphic you'll does that's incredibly powerful is it allows you to mutate data on your server so it allows you to create, update and delete data just like you could do an arrest, a p I.

  • And the same thing applies to these.

  • Create deleting updates as with your actual get queries.

  • You can specify exactly what you want to be returned from those queries.

  • Let's say that you're going to be adding a book to a server.

  • You can say that you want to add a book, you give it the name you give it the author, you give it all the other information you need to.

  • But let's say all you really want back is the name of the book.

  • So you tell it.

  • I want you to add a book with all this information and then just returned back the name for me.

  • So then it will return you the name of that new book.

  • And maybe you want the ideas Well, sort of return you the name and the idea of that new the created book.

  • This is incredibly powerful.

  • It also has support for Ares, so you could do air handle inside a graph.

  • Cool.

  • And really it does everything that arrest a P I can do, except for it makes it so much easier for the front end of work with and it makes it so much lighter weight, since you only have to access the server one time each time you need something instead of multiple times to get all the information you need.

  • So now that we have a basic understanding of what Grafico is and why it's so powerful, let's get started by building out and no Js express application using graphic you Oh, where we're going to take that book and author example and fully implement the server side of it to get started.

  • The very first thing that we need to do is actually set up our express server, which is just going to be a very basic express service.

  • The first thing that we need to do is to run in P m in it.

  • In order to create our different package, Jason Files and we just hit enter a bunch of times here to get all of the default values.

  • And as you can see, we now have a package Jason file with all of our information inside of it.

  • Then in here, I'm just going to change our main file to be called server dot Js.

  • Because I prefer the name server over index for this instance next we need to install the dependencies that we're going to be using.

  • Just type in N.

  • P M.

  • I.

  • And then we need to put the different names of our dependencies.

  • In our case, we're going to be using express.

  • We're gonna be using express graphic you Well, which just let's issues Graff kill one express easily.

  • And we're also going to install dependency called grafico, which is going to give us all the different functionality that we need in order to use graphic You Well, And if we had enter what that run, it's going to install all these different dependencies and Adam to our package Dodge a sound file.

  • And now that we have all those installed, there's one last dependency that we're going to stall to make working locally easier.

  • And that's called no demon.

  • So npm install.

  • And we want to just do this as a deaf dependency.

  • So we just say, Save Dev and we can put in here nude Mon, which will allow us to reload our server whenever we save our files, instead of having to reload our server manually by stopping it and starting it.

  • And at once that all finishes installing.

  • We're going to create a single script here in order to run our node.

  • Been server.

  • So if we could just type in here, Dev, Start says this is what we're going to use when we do development.

  • We could just say death start and we just want to run Node mom server dot Js Now that we have that set up, we can create our server dot Jason file over here.

  • Now we have our servant I jazz file.

  • We could set up just the most basic express application.

  • So we're going to get expressed here from our packages and then we're going to get the app part of express.

  • So we just call that express function to get a wrap, and we just need to tell our app that we wanted to listen on Port 5000 and just so that we know that this is actually running.

  • Let's just put a simple function here.

  • It just says that the server is running and now if we save that and run the command that we created by coin npm run Deb start Since we called the death start and we hit enter, you should see that it says that our servers running and if we go to a local host 5000 you'll see this as cannot get index because we don't actually have any routes created.

  • But we do know that our server is now running.

  • So let's actually work on adding graft well into our server.

  • In order to do that, we need to require grafico.

  • So we need to require our express graphic you Oh, which we imported earlier with our package.

  • Jason.

  • So we just take that inn express craft.

  • You'll just like that And we can actually added root for application so we could just say after use.

  • And we want this to be at graphic you'll So when we go to slash graphic UL local host 5000 slash craft will, it's going to run the code in here.

  • We could just say express graphic you well, and in here we just leave empty object for now, since we don't have anything actually pass to it Other than the fact that we want to say graphic you'll graphical we want to pass true to this, which is going to give us an actual user interface toe access.

  • Our graph kill server without having to manually call it through something like postmen.

  • Now, if we save that and go to that euro graphic you Oh, you'll see that we get an air saying that we need a schema for our graphic you will and the way that graphic you'll knows which data access based on the query that you send it is you have to define a schema of how all of your data interacts together and that Seema is what we need to pass into our express graphic ul function so that our express craft Cole knows what are actual Graff kill data looks like.

  • So let's just create a dummy query here to see how this works.

  • So in order to create a query, we actually need to import a few things into our application.

  • So if we go up here, we can say that we want to import a few different things from the library of graphic you'll that we mentioned earlier, and we want to import our scheme of First of all.

  • So there's an object called graph que o schema, and we also want to import the object type because in graphic, you'll everything is actually strongly type.

  • So an object type just allows you to create a dynamic object full of a duffer and other different other types.

  • So in here we could just say graphic you Oh, object type.

  • And that will be an actual object type that we can import.

  • And now we need to create a new scheme of So we'll just call our scheme that here equal to a new graphic ul schema.

  • And here is where we define our actual schema.

  • So, like I said, we're just going to be creating a dummy scheme it here.

  • So the first thing we want to do is to find the query section, which is essentially the getting up data so well defined the query perimeter here.

  • And we want to set this query here equal to a new graphic.

  • You'll object type and inside of this object type, what is going to give it a name of hello world And in here we need to do spine.

  • The fields that held the world returns so we can save fields and we just set this to a function here.

  • So it is create a function and inside a dysfunction, we actually returned the different fields that we want to return.

  • So in our case, we're just going to be returning object, and this just going to have a message here, and this message is actually going to be an object which is going to define the type of our message.

  • So we just put an object in here and we know that we want the type of this to be a string.

  • So we need to actually import the graf cool string, object.

  • So here we could just say graphic you Oh, string, import that.

  • And then we can use that as our type down here for a message.

  • So now graphical knows that our hello world object has a message field and that message field is going to return a string.

  • And then lastly, we needed to telegraph cool.

  • Where to get this message from so anarchist.

  • We just want to give it a static message of hello world, And this is going to use the results section of this object, which is just going to be a function that tells graphic you'll where to get the information from.

  • So we just have a simple function here, and this function is just going to return.

  • Hello world.

  • Now if we actually pass that scheming into our function down here by saying schema and we call that object schema.

  • So now if we save that and refresh over here, you'll see that we get this graphical interface over here, and you notice immediately that we get in there saying that the name for a hello world does not actually work because it contains a space which is not valid.

  • So we'll just remove this space here and re save it.

  • And if we refresh this, you'll see that we no longer get any errors in our graphic you'll server.

  • And we can actually query our graphical server and we can look at the docks over here.

  • As you can see, it says that we have a single query called Hello World, which returns a message that's a strength.

  • So let's call that query.

  • We just have to say query inside of our brackets here we want to put what we wanted query.

  • In our case, we just want to query the message, and if we hit run, you'll see we get message Hello, world back.

  • And we can actually remove quarry here because by default.

  • Graf cool will use the query keyword instead of actually adding data.

  • So if we run this again, you'll see that we get our message back.

  • Even though we didn't specify, that's a query that is just the default.

  • And from this very simple example, we can already kind of dissect how this graphic you'll library works and how we can use it to build larger applications.

  • So the first thing that you see here is that we have our schema, which defines our query section and this query section to find all of the different use cases that we can use for Queen.

  • In our case, this will be authors and books in our real application, but for now it is just a single hello world object next, inside of each of our different objects, we have what are called fields, which are all of the different sections of that object that we can actually query to return data from, in our case, just a single field of message.

  • But for a book, this could be the name of the book I ESPN the cover art of the book and so on.

  • And then we have a resolve function down here, which is going to be, what actual information are we returning for this field?

  • How do we actually get the information for this field and return?

  • It was resolved.

  • Function also comes with a few arguments judges, the parent that it's being called from and different arguments that you passed here.

  • Query.

  • But in our case, we don't really need to worry about those for this simple example.

  • But as we've already see from just this really simple example, we can build out pretty much any type of obvious that we want just by passing at the different fields, telling that what types those different fields are, and then resolving those fields to a specific type if need be.

  • If, for example, are graphic, you'll object.

  • Is returning an object a Jason object?

  • The resolve will automatically default to that value on the object.

  • So if we have an object with a property of message on it, we don't actually need to put resolve here because resolve.

  • We already called the message attributes of that object.

  • We'll see that later on.

  • As we dive into this book and author example.

  • So now that we have this finished up with our early example.

  • Let's dive directly into creating these author and books.

  • Example.

  • The first thing that I'm going to do is just paste in some place holder data that we're going to be using in our application.

  • This is just data for three different authors and eight different books associate with those three different authors and where there's going to be using this in place of something like a database.

  • Because we don't actually want to worry about hooking up a database for this simple application and these two collections of data, this author is variable in his books.

  • Variable will just be our database for this application.

  • Next, we're gonna want to create what's called a route query scope.

  • Essentially, this is just going to be the root query that everything is going to pull down from right now.

  • Are Burt Query is just this single hello world object, but as you can see, we can only query from this hello world object the messages field, and we want to build a query book's authors, single books, single authors and so much more from this route.

  • Cree object.

  • So we want just one place where we can define all of the different objects that we can query from our graphic you'll server here.

  • So let's remove what we have right now and create that recruit type so we could just say created Variable will call route Cleary type and this is just going to be an object so we can just set it to a new graphic.

  • You owe object type, and this works just like the object type we just created.

  • But instead of using hello, world is the name I was going to give it a name of query since is just our query.

  • We could give it a description which will show up in our documentation over here right now says no description.

  • So we could just give this a description here of root query.

  • So we know this is the top level, and then our route Crary is where we confined our actual fields.

  • So what has passed this a function and the reason I'm wrapping this function in parentheses that's return here is that I don't actually need to add a return statement, since this will just return everything inside of the premises, which is just the single object.

  • So it's just saving us a little bit of writing there, and what we want to do is we're not actually return books from this query.

  • So we can say we want to return a list of books, which is going to be this book's keyword here.

  • And we just need to supply a different object for this, and we need to give it a type.

  • And in our case books is just going to be a cuffs accustomed graphic.

  • You'll object type.

  • So we want to create that graphical object type.

  • We'll just call it a book type, but we haven't created yet.

  • But this is just a placeholder for that type will be creating.

  • Well, then, give it a description here.

  • We just wanted to give this the description of a list of books, and then we need to do resolve for this.

  • So in our case, this result is going to be extremely straightforward.

  • It's just going to return that book object that we had if you had, for example, a database here, he would carry the database for your books, but in our case, where does she returning that single object?

  • And instead of actually returning a single book type we're returning was called a list of book types, so we need to actually import the graphic.

  • You'll list object.

  • But we have graphical list here, and then we can use that Graff kill list.

  • Wrap our book type inside of it.

  • So we just say new graphic you A list and we've passed it the actual type for that list.

  • So this is a list of book types.

  • So now that we have our books query to find here but actually to find the book type that will be using for this query.

  • So as we know, this book type is just going to be a custom object so we can call creative variable called book type.

  • Said it equal to that new graphic you'll object type.

  • Since this is a custom object and in here, we need to do the same thing.

  • We need to give it a name, which, in our case, just going to be called a book.

  • Give it a description.

  • This is just going to say this represents a book written by an author, and we need to specify the fields for the book so again passes a function wrapping it in those parentheses so we could just return that object.

  • And in here we needed to find our fields.

  • As you can see, we have our i d field.

  • Our name field as walls are author Field.

  • So what Specified those Now we have i d This is going to be the type of graft you will in which we haven't actually imported yet.

  • And this is just saying that this is going to be an imager.

  • So let's important this type up here and one other thing we need to import is what's called the graph que o non knoll.

  • And essentially, this means that you can never return a no value for this type.

  • An imager is always gonna be supplied.

  • It's never gonna be no.

  • So we can actually just wrap this in a new graphic.

  • You will not know.

  • Actually, you don't even need the new here, so we just a graphic io non no graphic.

  • You'll end, and that's the type of our I D.

  • And we don't actually need to supply a resolve for I D.

  • Because, as I said earlier, since we have an object here that already has an I.

  • D property, it'll pull that I d property directly from that object.

  • So the next thing we want to do is add the name in here.

  • We're going to be very similar to the i D.

  • But the type in here instead is gonna be a graphic.

  • You'll string and again, it's going to be non knowable.

  • So we got the non No, and that's all we need to do.

  • We don't need to add a result again for this.

  • And lastly, we have our author I d What is going to be exactly the same as our int for idea?

  • Pierce, We can just copy and paste that down.

  • And there we go.

  • We have our full book type already to find.

  • So now that we have a root query type which is using our book type, we just need to create a schema and then use that schema.

  • So just creative variable here called schema.

  • We're going to set it to a new graphic.

  • You'll schema and this scheme.

  • As I said, it's going to take a query object and this is just gonna be our route query type.

  • Now if you say that you see that we get no errors And if we come over here and refresh our page, remove all this code that we have switched.

  • Have a blank start.

  • You can see our documentation.

  • Explore.

  • We have this query object and inside of here we have books which will allow us to get a list of books and we can go through and see what a book is.

  • Imager, Name off the I d and so on so much actually use this.

  • So as we know, we need to put these inside of curly braces on.

  • All we do is say books, and then we specify the fields for the books we want.

  • So let's say we just want to get the name of every book we run that you see over here, we get the name of every single book that's in our list right up here.

  • And, as you can see is the same exact list we can also get.

  • I d, for example, and we just let go and you see, now we get the i d and the name.

  • And if we didn't want name, just remove that it run.

  • And there you go.

  • Now we're just getting an I.

  • D.

  • S and the syntax over here for searching graphic.

  • You'll is very similar to Jason like syntax, but you're only specifying the keys.

  • You're not really specifying the values of it.

  • So you see here were saying that we want to get books and in the books we want to get all the different I D.

  • S.

  • And we want to get off their idea.

  • For example, we could run that in here, and then we go Now we're getting the author, I d for all different books, and it's really powerful.

  • But what if we wanted to get the author and we wanted to get the name of the author, for example, just like this?

  • Right now, our server can't actually handle this because we don't have an author field on the books.

  • So let's work on adding that into our application.

  • So all we need to do is add another field here that's going to be author, and we need to give it a type, and this type is going to be a new type.

  • This is going to be an author type, just like we have our book type.

  • This is going to be an author type.

  • And since our actual array of data appears you can see for books doesn't have an author field.

  • We need to specify a custom resolve for how we get this author.

  • So what's at our resolve?

  • Make it a function here and this function?

  • We just want to return here.

  • We want to return.

  • We want to search the authors.

  • We want to find the author, and we want to find the author with the i.

  • D.

  • From the book.

  • But how do we get the book that this is being called?

  • As I mentioned earlier, this resolve takes apparent property here, which in our case, is just going to be a book.

  • So this author is inside of this book type.

  • So this is going to get the book passed in here that is being queried for this field so we could just check when this author I d.

  • Is equal for the book off the idea.

  • Then we know that this is the author for the book.

  • And now what we need to do is create this author type so that we can actually return it, and we're just gonna do that exactly like we created a book type here I'm actually going to copy this because a lot of it is going to be exactly the same.

  • So we know that our author has an I.

  • D.

  • It has a name.

  • It's not going to have an authority, and it's not going to have an author so we could remove those sections.

  • For now, we just need to change the type here.

  • Author changed the name of the variable to be author type, and we just want to change the description because it's going to be represented an author of the book.

  • And now if we save that, you'll see that everything runs fine over here.

  • And if we refresh over here, you know, see that we're getting the author's inside of our books array, and this is where the power of graphic you'll really comes into play.

  • All we had to do was defined this author type, define his book type and tell the book type how to get the actual author from the book.

  • And there we go.

  • Our authors are being populated, and if we don't want authors, we just remove that from our query on.

  • We're no longer getting the author data and it no longer has to call this function.

  • You really start to build to think of your data in graph form because, as you can see, when we look at our docks over here, the start of our graph is this query object.

  • And then we have a new node for books, and this book returns books and in here are book has an author, and, as you can see it challenges Graf's down through all of our different objects and weaken slowly query down to more and more specific sections of our application.

  • But as you can see, we don't have a query for authorship.

  • So let's add that authors querian and it's going to be incredibly simple.

  • We just go to our work weary, and right now we have a book's query.

  • Let's just copy that, and we'll just added inquiry here forgetting the authors, and we want the type here to be off their type instead of book type.

  • I'm going to get a list of all authors, and instead of returning books, we just returned authors.

  • Now, if we come in here, we can clear our authors instead of her books.

  • If I spell it right.

  • Korea Authors and we want to get the name.

  • For example, if you run that, you see that works and the reason is showing an error is actually to refresh our page so that it actually knows what the syntax is.

  • This is just a problem with graphical.

  • So now you can see we're able to query the authors and their names.

  • We can put an i d.

  • Here, for example.

  • But let's go back to our earlier example where we said that we wanted to get a list of all the authors and a list of all the books for each author.

  • Right now we can't do that because if we try to clear the books, for example, and get the name of all the books and we run that, you see that there's no books field for author.

  • So let's add that in now.

  • We just need to go up to our author type here at a new field, which is going to be called books, and this field is going to be a list type.

  • So again we can use that graphic you'll list that we talked about earlier.

  • Give it the book type since we wanna have a list of books, and then we just need to pass it a resolve function.

  • So past resolve.

  • Give it a function definition here, and this is just going to return all the books for the author.

  • So again we have that parent method it here, which is just the author, since we're inside of that author type and wanna return.

  • So we search our books list.

  • Filter that books list.

  • We just want to get it where the books I D for the author is equal to the author that I D.

  • This is just going to get us a list of all the books for the author.

  • And now, if we save that refresh over here, you now say that we get a list of all the books for each author, and that's perfect.

  • This is one single query that we're running here and in a normal rest a p I.

  • This would require us to run one career for the author's Another query for the books for author, one author to and often three Flow before queries total, and it would return us a bunch of information that we don't actually want, such as the idea of the book and the author idea of the book.

  • But what if we want to just get one single author instead of getting a list of all the authors every time?

  • Well, that's also incredibly easy to do with Grafico because we can actually pass arguments to our graph que o methods here.

  • So let's look at doing that.

  • If we go down to our route query here, we can just define a new query.

  • So instead, Aquarian Books.

  • Let's say we just want a query, a single book, and this is going to work very someone only two books here.

  • So I'm just gonna copy this, paste it down here, and we aren't returning a list this time were just returning a single book type so we can change description here as well to just say a single book.

  • And instead of returning books here, we don't really turn just a single book based on the argument we pass in.

  • So in our case, this result is going to take our parents, which in our case, we don't actually want but the second parameter here his arguments and we're going to pass in our arguments from graphical over here.

  • So we wanted to find which arguments are valid for our query.

  • And we do that using the ark's parameter and this again just takes him object.

  • And the object defines our arguments.

  • So we want to pass in the i d of the book we want to query, and we just need to give it a type here So we could just say the type here is a graphic you'll int and that we've actually find that this book query right here for a single book takes one single argument of I D.

  • And in here we can actually use that i d argument to query our books so we could just said books not find We want to get the book with that idea.

  • So our idea is going to be that I d argument we did find right here.

  • And this is just going to get a single book based on the I d.

  • Again, If you had a database, you would do database queries in order to get this.

  • And now if we go over here and a graphical refresh it so that we get our syntax highlighting Weaken Query book and we just pass and I D in here of what Say we want to get the very 1st 1 I d.

  • One and we want to get the name of that book.

  • We run it, we see that we get Harry Potter and the Chamber of Secrets.

  • And if you look up here, that is the book with an I.

  • D of number one and we can't even get the author of that book.

  • So we can just say author, and we won't get the name of that author and it gets the name the author force perfectly fine.

  • As you can see, we didn't have to touch these graphic you'll object types.

  • Here we go find our types of once and then we actually use those types in various different ways with our different queries.

  • And that is something that makes graphic you already powerful.

  • It makes creating endpoints really simple.

  • Since you don't have to spin up new routes and everything to create en pointe, you just create a single query field, which we're going to query for that actual object.

  • And once that objects to find, you don't actually need to do any hard work to redefine how that objects used for the new query.

  • You just use that object that's already defined.

  • And we could do this exact same thing for authors for getting a single author.

  • So let's copy this author's down and change it for getting a single author.

  • As we know we no longer need a list.

  • We could just get a single author type, change our description here to be a single author, and we wanted to find our arguments.

  • So in our case, our arguments here are just going to be an I d.

  • Which is going to have the type of gradual and lastly, inside of a resolve function here.

  • We just want to find the author with that i d.

  • So we say authored I d is equal to arms dot i d And there we go.

  • We've created our Syntex or our function here for queen and author.

  • So let's do that.

  • Let's just go author, we want I d to, for example, and we want to get their name now if we run that, you said that we get in there and that's because in a result, function here, we actually need to specify that we're using the arguments.

  • And now, if we say that and rerun it, you'll see that we're actually getting the author.

  • And if we look, that is the author with the idea of two here, which is exactly perfect.

  • And now, before we jump into actually modifying data on the Surfer, I want to mention one thing about how Fields is returning a function instead of an actual object.

  • Because, as you can see, all it's doing is returning a function that returns an object.

  • And the reason we can't return Justin object here instead of a function that returns an object is that this book type references, author type.

  • So we need book type to be defined before author type.

  • But author type defines book type, so we need author type to be defined before book type.

  • So if we don't have this inside of a function here, we try to run it.

  • You'll see that we get an air saying that it can't actually find author type because author type is after book type, so you may think okay will move off the type to be above book type.

  • So now book type, our author type confined book type.

  • But if we save that, you see that we get a new air and that air saying book types not defined.

  • And that's because book type is inside of author type and they reference each other.

  • So that's why we use a function so that everything can get defined before they actually start getting called.

  • So what's just undo all that back to where we were with using functions?

  • And now if we save that, we should get no more errors, and this should still work.

  • Perfect.

  • Now we can jump into actually modifying our data, which is what we use Mutations for mutations are graphic.

  • You ls version of using post put and delete on arrest a p I server.

  • So we actually want to create a new object type, which is going to be just like our route query type.

  • But this is going to be our route mutation type because our schema actually down here takes what's called the mutation.

  • So we're gonna pass it our route mutation type, which we're going to create so right below our quarry type.

  • Here, let's create a new type hold mutation type, and this again is just going to be a graphic.

  • You'll object type lots of things.

  • In graphic.

  • You'll are just custom objects full of different parameters, such as imager, string and so on.

  • So, really, it's just typing out you're different objects is what graf cool.

  • It was all about so in here again, we want to put a name was called Mutation.

  • Since it's our view of our meditations description is going to be rude mutation, and then we can define the different fields.

  • And these are essentially the different operations that we want to do for our different mutations.

  • And again, we're going to pass it a function, as I mentioned earlier and here.

  • First, let's work on adding a book to our database so we can use that as the name of our field, which is just going to be the name that we pass in over here.

  • So instead of author, this would say at book, and we define Miss just like any other field.

  • So we give it a type in our case is adding, a book is going to return a book type for us, give it a description, just say at a book, and then if we want to pass arts because we actually need data to pass to the server for us toe add a book.

  • In our case, we only need two parameters.

  • We need a name.

  • First of all for the what the book is going to be called and this is going to be a type which is going to be a string type.

  • But again, we don't want people to pass in.

  • A no value for name name needs to be required.

  • So we need to say that it does not know and we need to wrap that inside of that.

  • Not know we want to do the exact same thing for the author.

  • I d.

  • So instead of using name here, we use Author I D.

  • Instead of string an author, I d is going to be an imager and then our resolve function instead of actually queen to return data.

  • It's going toe add data to our list so we can say resolve.

  • We're going to use parent and Argus here again because we want to build access that artist parameter And then the first thing we want to do is we want to create book so we'll create a book object.

  • It's going to have an I.

  • D which is just going to be the length of our books are a plus one.

  • If you had a database, this this would be automatically generated.

  • So you really don't need to worry about this too much.

  • Our name is going to be our guest dot name and our author I d is going to be hard dock author idea.

  • I can spell that properly.

  • There we go.

  • So now we have our book created, and now we need to add that book to our array so we could say books push book.

  • This is just going to add that book to our array of books.

  • Ready have.

  • And then we can return that look, since this is actually returning a book object.

  • And if we say that refresh graphic you'll over here and we try to use that function of ad book call add book.

  • You can see it's not actually here.

  • It's not actually highlighting at book.

  • That's because by default, graphical uses a query and we want to use a mutation.

  • Now we have our ad book showing up here.

  • We just passing are different parameters will pass in their name, for example, what is call it a new name.

  • And one thing to note here is you need to use double quotes for specifying strings because graphic you'll uses syntax.

  • Bury some more to Jason, so single quotes will not actually work.

  • So we pass it the name, we gotta pass it.

  • The author i d which would issues as one for now.

  • And then what primary?

  • We want to be returned in our case will just return the name and the i d for a book.

  • Now, if we run that, you should get an idea of nine and a name of new name which, if we look up at our Ray over here, we see that the idea of nine is the next in the list, which is perfect.

  • So now if we go to query all of our different books and if we just want to get the I d and the name and we run that you see that we now get our ninth book down here with that new name that we specified.

  • Now, as soon as we restart our server, this is going to be disappeared because we're not actually persisting to a database.

  • But you can see how this works for.

  • If you wanted to use it in a real application with the database, you wouldn't have to worry about that problem of it disappearing.

  • So now we can do the exact same thing with author, and it's going to be very similar to how we used for books.

  • So it shows copy everything we have for ad book.

  • But instead of coin at a book, we're going to call it at author, and it's going to be an author type.

  • It's going to add an author.

  • We have our name, which is what we're going to add, and we don't actually have anything else that we need to add for an author, and I resolved down here is going to look very similar.

  • But instead of being a book, we're going to be created a new author.

  • It's going to be authors dot length for the I D, and we don't actually have an author.

  • I d for our author and we want to add this to our authors ready instead of to our book array and then return that author and every guilt we've created for, added an author.

  • We save it, we get no errors and we can go in here from the mutation for adding an author.

  • And if we just refresh your we'll actually get our syntax highlighting.

  • We want to add it with the name and we'll just say new author is going to be our name and we want to return the name and the idea of that author.

  • And if we run it, you see that we get that author, its I.

  • D and the name of the author.

  • And now we can actually query over authors and we can get the I.

  • D and name run that and every go.

  • We have our fourth author that we just added, and this even still works if we want him to get the books, for example, except for this new author just doesn't have any books.

  • So it returns empty array and everything works perfectly fine.

  • And this works just like a rest t A p.

  • I would have.

  • We have the ability to create things.

  • We have ability to everything, and we can even add the ability to update things which is going to work exactly the same as the abs except for you.

  • It changes to update you passing an I d.

  • And then you would do an actual update of the instance in the database.

  • The really great thing, though, about this graphic you'll instance, is that it's incredibly small.

  • This entire thing, our server, including our models, is 135 lines.

  • And a lot of that has taken up up here with the actual data that were imported into our application.

  • So essentially in about 100 lines, real benefit our entire application code for creating a simple author and book, a p I, which is incredibly powerful.

  • You couldn't do this in arrest.

  • A P I in such a short amount of space also on the server were on the client side.

  • You're able to quarry exactly the data that you want to.

  • In our case, we can query just the authors I D name and all their books and their name in one single query.

  • So the information being sent to the client is so much smaller and so much more specific, and it's easier to work with.

  • Since you don't have to create a bunch of custom and points every time you want to get a different set of data back, you just tell the server you want different data and it gives it to you.

  • It just is smart enough to know that.

  • And that's all the basics of what you could do with a graphical server.

  • Using these tools in this video, you can create an infinitely large graphic you'll server that can do everything from updating to deleting, to creating, to getting data in a much more efficient and faster way than arrest.

  • Baby, I ever could.

  • If you guys did enjoy this video, please make sure to check out my other JavaScript related videos over here and subscribe to my channel for more videos just like this.

  • Thank you guys very much for watching and have a good day.

in today's video, I'm going to be teaching you what graft oil is, why you should be using graphic you.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

40分鐘學會GraphQL (Learn GraphQL In 40 Minutes)

  • 5 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字