Adding Resolvers and Executing Queries in GraphQL Playground (Optional)

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.3 instructor rating • 21 courses • 38,710 students

Learn more from the full course

Full-Stack Vue with GraphQL - The Ultimate Guide

Build a complete Pinterest-inspired full-stack app from scratch with Vue, GraphQL, Apollo 2, Vuex, and Vuetify

09:55:53 of on-demand video • Updated December 2019

  • Learn in-depth how to use Apollo Server 2 and Apollo Boost to create powerful full-stack apps
  • Learn how to handle errors on the client and server with Apollo / GraphQL
  • Be able to implement session-based JWT authentication to GraphQL applications
  • Integrate Apollo with Vuex for more reliable and scalable state management
  • Implement infinite scrolling functionality using Vue-Apollo
  • Deploy full-stack JavaScript / GraphQL applications using Heroku and Netlify
  • Learn how to write queries and mutations in the GraphQL language on both the client and server
  • Utilize many useful MongoDB methods and features
  • Create attractive, sophisticated UIs using the Vuetify component framework
  • Use the best in ES6 - ESNext features like async / await, destructuring, spread operators, arrow functions, etc
English [Auto] So in the last section we took a look at type definitions. So we learned how to describe to graph Well what data that we're working with was good or terminal and let's copy this Euro this port that we're listening on a local host 4000 and let's open a new browser tab and go to this euro. See what happens. You can see that we get this application and this is called the grackle playground is a really neat developer tool for working with graphical must do a lot of interesting stuff. And previously this was called graphical but we'll be working with this extensively in creating our project to head back to our code editor. And so yeah now we're describing this type of. To do that we created but let's do something more interesting. Let's say get data. How do we get data in Grackle. Well we're type definitions there are some built in type so we don't have to provide a name for it. We have this type called query which allows us to query for data or to get data that we request and then we can provide functions to the query type such as get to do it so we can create a function called get to do which will for example get all the news that we have and type definitions for query functions can include parameters. That's something we include in the future whenever we create certain functions we can include different arguments or we can pass to that in this case. It won't have any arguments and we just want to specify a return value. In this case we want to return the type to do because those are what are part of our to user and we can see that since it's an all right we need to telegraph that it is. And we can do that by giving it a return value that's wrapped in brackets. That's how we specify that we want to have returned to us an array of a certain type but to actually create the functionality for this query function going to create an object which will call resolvers. And this will contain a property called query and this corresponds to that type. We have to have it in order to be able to run our queries and within the query object we have a property of the exact the name gets Dewes and then its value for the property name gets dues we want to specify the logic how to get those to do so just like we would in javascript Normally we create a function and just create a nameless function declaration and we want to return our to do. So just say in the body of return to dues and then since we need to tell Appollo server about this we pass in resolvers. Once again this is a property which has the same name as its value. So we can just include resolvers. And now if we refresh we don't get the air anymore. We had previously and you can click on this green schema tab and you can see we have this list of queries and included as our get to do query type definition just like we specified in the type of query. And we can see when we click on it some type details we can see specifically the type that are returning. So in this case they're the type to do that that we have the only type that we have. So now what we can do using the graph or playground is we can actually execute this query we can get all of our to do. So we'll first include the key word query. Our case Q and A set of curly braces. And then within these curly braces we're going to want to type name of our function witchcraft Cuil the playground already knows about. It's called get to do's so include some Intellisense but looks like we're getting an air field get to choose what type to do must have a selection of subfields. And so what it's wanting us to do is it wants us to specify which values that we want return from this type of. To do so or open a set of curly braces and then we can specify which properties exactly we want to do type. And so we only have to we have tasking completed. Once again we have some Intellisense that knows that we have those two fields so include retasking completed. So now we're going to run you get to do query and we should get for each of to do both the task and complete properties. So we run it by hitting the play button and we can see you get our array of get to do. It's nested within this data object and we get both of our to do's which include the task and completed properties. Now the great thing about graft is that we can decide exactly what data that we want. So for even certain function we can just decide hey we only want one property being returned to us. For example the task property in this case we can just write it again and get exactly what we ask for. Is the great thing about graph kyats very declarative. And another thing is that we don't necessarily have to write this query keyword in order to execute the query we can remove that if we want. For queries at least something to keep in mind one last thing is that when it comes to us writing our resolvers are creating these functions we're generally going to be using an arrow arrow function syntax. So it's going to look something like this. Look very simple. And since Arab functions have an implicit return we don't need to specify that we want the dues to be returned seven empty set of parentheses. Returning our dues. And if we run get to do it again after saving Cervidae -- and then hitting the play button again we should see exactly what we asked for.