Coding

#3 Schemas & Resolvers | Build a Complete App with GraphQL, Node.js, MongoDB and React.js

  • 00:00:01 hi everyone welcome back to this series
  • 00:00:04 in the last part of this series we
  • 00:00:06 created our basic node Express server
  • 00:00:08 now I want to start implementing the
  • 00:00:11 graph QL API on that server because
  • 00:00:13 right now our server is not really doing
  • 00:00:15 a lot so let's dive right into that and
  • 00:00:17 let's make sure that by the end of the
  • 00:00:19 video we have our first graph QL API
  • 00:00:21 implementation up and running
  • 00:00:26 so I'm back in my project here with my
  • 00:00:28 running development server started with
  • 00:00:30 NPM start and I will quit it now because
  • 00:00:33 I now want to install extra packages to
  • 00:00:36 make my graph QL API run because as you
  • 00:00:40 learned in the first video of this
  • 00:00:41 serious graph QL is basically a
  • 00:00:44 specification that defines a query
  • 00:00:46 language which clients can send in the
  • 00:00:49 body of a post request to the back-end
  • 00:00:52 so the job of the backend will be to
  • 00:00:54 parse these incoming queries to
  • 00:00:57 understand these commands sent by the
  • 00:00:59 front-end and deliver the writes data
  • 00:01:01 back to the front-end or do whatever the
  • 00:01:04 query instructs us to do there also are
  • 00:01:06 mutations which want the server to save
  • 00:01:09 or delete or update something so parsing
  • 00:01:12 these queries will be important and to
  • 00:01:15 parse a query we essentially need two
  • 00:01:17 parts you could say first of all we need
  • 00:01:20 a package or a tool that is capable of
  • 00:01:23 understanding graph QL queries now these
  • 00:01:27 queries are standardized the keywords
  • 00:01:29 you can use there are standardized
  • 00:01:31 because there is a specification so such
  • 00:01:33 parsing packages exist the other part is
  • 00:01:37 that we need to define the capabilities
  • 00:01:39 of our API we need to define which kind
  • 00:01:43 of queries can we handle which kind of
  • 00:01:46 mutations can we take care of because if
  • 00:01:49 a front-end application wants to get all
  • 00:01:52 users this is only possible if we
  • 00:01:55 defined a so called schema on the back
  • 00:01:58 end in our graph QL API that knows what
  • 00:02:01 to do when such users are requested so
  • 00:02:04 we'll have to take care about both now
  • 00:02:06 for the parsing and for registering our
  • 00:02:08 schema and so on and for matching our
  • 00:02:10 schema to the resolvers which is the
  • 00:02:13 code that actually takes care about what
  • 00:02:15 needs to be done for all of that we can
  • 00:02:17 use packages for writing the schemas and
  • 00:02:21 defining the schema of our API we are
  • 00:02:23 the only one who can do that so let's
  • 00:02:25 first of all install the packages we
  • 00:02:27 need I'll do that with npm install' – –
  • 00:02:30 save and i need two packages here
  • 00:02:33 the first one is Express graph QL this
  • 00:02:36 is a graph QL
  • 00:02:39 package that can be used as a middleware
  • 00:02:42 in express note reyes applications and
  • 00:02:44 that allows us to point at a schema at
  • 00:02:47 resolvers and automatically connect all
  • 00:02:50 of that for us and route requests to a
  • 00:02:53 parser and then handle them according to
  • 00:02:56 our schema and forward them to the right
  • 00:02:58 resolvers so a lot of magic work that
  • 00:03:01 will be done behind the scenes by that
  • 00:03:02 package the other package I will install
  • 00:03:05 is called just graph QL the graph QL
  • 00:03:10 package in the end will allow us to
  • 00:03:12 define the schema and set up a schema
  • 00:03:16 that follows the official graph QL
  • 00:03:18 specification and definitions and that
  • 00:03:21 will give us a valid schema it will not
  • 00:03:23 just check it it will also basically
  • 00:03:26 convert it to JavaScript code to
  • 00:03:28 JavaScript objects you could say so it
  • 00:03:30 will parse our schema and converted and
  • 00:03:32 we can then use this parsed and
  • 00:03:35 converted schema together with Express
  • 00:03:37 graph QL you could say so these are the
  • 00:03:39 two packages we need and I will just hit
  • 00:03:41 enter and how we use them will become
  • 00:03:43 clearer in a second with both installed
  • 00:03:46 I'll run NPM start again to bring up
  • 00:03:48 that development server again and now
  • 00:03:50 let's start setting up our graph QL
  • 00:03:53 environment and schema here for that
  • 00:03:55 I'll go to the App J's file and here at
  • 00:03:57 one a m– word something from that
  • 00:03:59 Express graphical package I'll name it
  • 00:04:01 graph QL HTTP the name is up to you
  • 00:04:05 though and I will simply import that by
  • 00:04:08 requiring the Express graphical package
  • 00:04:10 this package essentially exports one
  • 00:04:13 thing and that thing that graph QL HTTP
  • 00:04:17 here happens to be a function that we
  • 00:04:19 can use in the place where express
  • 00:04:22 expects a middleware function so it
  • 00:04:24 basically exports a valid middleware
  • 00:04:26 function and what this middleware
  • 00:04:28 function will do is it will take
  • 00:04:30 incoming requests and funnel them
  • 00:04:32 through the graph QL query parser and
  • 00:04:34 automatically forward them to the right
  • 00:04:36 resolvers and then will be our duty to
  • 00:04:39 set the resolver schemas up so how do we
  • 00:04:42 use this middleware well instead of
  • 00:04:44 having this get request here I will now
  • 00:04:46 add a normal app use statement and here
  • 00:04:50 I want to handle requests that
  • 00:04:53 our graph QL endpoint now remember the
  • 00:04:57 first video in this series there I
  • 00:05:00 mentioned that with graph QL you have
  • 00:05:03 only one endpoint to which all requests
  • 00:05:05 are sent typically this is reached under
  • 00:05:09 the graph QL path of your domain so
  • 00:05:13 yourdomain.com slash graph ul you can
  • 00:05:16 name this however you want though you
  • 00:05:17 could always use slash API or whatever
  • 00:05:20 you want I'll go with graph QL the
  • 00:05:23 second argument here is our middleware
  • 00:05:24 function then that is normal Express J's
  • 00:05:27 code and the middleware function here is
  • 00:05:29 our graph QL HTTP function we imported
  • 00:05:32 from the Express graph QL package now in
  • 00:05:35 there we pass a JavaScript object where
  • 00:05:38 we configure our graph QL API because
  • 00:05:41 this Express graphical package basically
  • 00:05:43 needs some information pieces from us
  • 00:05:46 where do I find your schema which
  • 00:05:49 defines the does the endpoints so to say
  • 00:05:52 the real endpoints you can handle so
  • 00:05:55 which defines the queries you can handle
  • 00:05:57 where do I find the resolvers to which
  • 00:06:00 my request should be forwarded once I
  • 00:06:03 identified the query this request wants
  • 00:06:06 to execute these are the questions we
  • 00:06:09 need to answer here and we do this by
  • 00:06:11 passing two keys here in this object to
  • 00:06:15 properties the first one is the schema
  • 00:06:18 property and this should point at a
  • 00:06:20 valid graph QL schema now we will be
  • 00:06:24 able to generate this graph called
  • 00:06:25 schema with help of that other package
  • 00:06:28 we install data graph QL package so for
  • 00:06:30 now let's just pointed at null the other
  • 00:06:33 key we have here is our root value key
  • 00:06:38 and that will in the end point at an
  • 00:06:40 object a javascript object which has all
  • 00:06:43 the resolver functions in it and
  • 00:06:46 resolver functions need to match our
  • 00:06:49 schema and points by name and this will
  • 00:06:52 become clearer once we add our first
  • 00:06:54 schema and our first resolver so now
  • 00:06:58 that we add these two keys we are almost
  • 00:07:00 ready to make our graph QL API work of
  • 00:07:03 course it's not doing much though so
  • 00:07:06 let's add
  • 00:07:07 schema and for adding a schema I will
  • 00:07:10 import something from that require from
  • 00:07:14 that graph QL package so I will require
  • 00:07:16 it from there now that something is an
  • 00:07:20 object and I could name it graph QL like
  • 00:07:22 this but I will use a modern JavaScript
  • 00:07:24 syntax which is called object D
  • 00:07:26 structuring which looks like this you
  • 00:07:29 have curly braces on the left side of
  • 00:07:31 the equal sign and now I can pull out
  • 00:07:33 properties of that out of that object
  • 00:07:36 which this package happens to export and
  • 00:07:38 I can store the values of these
  • 00:07:40 properties in equally named variables
  • 00:07:43 that are then available in this app.js
  • 00:07:45 file and here I need to build schema
  • 00:07:47 property which happens to be a function
  • 00:07:51 that takes a JavaScript template literal
  • 00:07:54 string which we can then use to define
  • 00:07:56 our schema so this built schema function
  • 00:08:00 takes a string and that string should
  • 00:08:02 define our schema at the advantage of
  • 00:08:05 this approaches that we can build our
  • 00:08:06 schema as a string so in a convenient
  • 00:08:10 written form and the heavy-lifting of
  • 00:08:13 converting this to JavaScript objects
  • 00:08:15 and so on is taken care of by this graph
  • 00:08:17 QL package so this graphical package
  • 00:08:20 will generate a graph QL schema object
  • 00:08:22 in the end based on our written schema
  • 00:08:24 we used it down here where we need to
  • 00:08:27 pass such a graph QL schema there I call
  • 00:08:30 build schema and here I will pass a
  • 00:08:32 template literal so that we can write a
  • 00:08:35 multi-line string in here this is a
  • 00:08:37 normal JavaScript string I'm just using
  • 00:08:39 back text here because backticks allow
  • 00:08:41 me to write a multi-line string here in
  • 00:08:44 JavaScript
  • 00:08:45 now queue define that schema we need to
  • 00:08:49 add a schema key here so this schema
  • 00:08:53 keyword needs to be present then we add
  • 00:08:55 curly braces and now here we have to
  • 00:08:58 define Q special keys one is named query
  • 00:09:02 and one is named mutation now incoming
  • 00:09:06 graphical requests no queries which
  • 00:09:08 means we want to fetch data and
  • 00:09:10 mutations which means we want to change
  • 00:09:12 data well there also are subscriptions
  • 00:09:15 but we'll ignore them for now so we have
  • 00:09:17 queries for fetching data and mutations
  • 00:09:19 for changing data
  • 00:09:20 changing data includes creating it
  • 00:09:22 updating it or deleting it so we need to
  • 00:09:26 have these two route commands so to say
  • 00:09:30 in this schema object and this also has
  • 00:09:33 to be named schema this is all required
  • 00:09:35 because always remember graph QL has a
  • 00:09:38 specification which defines all these
  • 00:09:40 things so by adhering to this standard
  • 00:09:43 packages like graph QL can do their job
  • 00:09:46 and can actually parse our string here
  • 00:09:48 into a valid graph fill schema object
  • 00:09:51 because they are looking for certain
  • 00:09:52 keywords this build schema method here
  • 00:09:55 where this function is looking for a
  • 00:09:57 specific keywords so we have these two
  • 00:10:00 route keywords in this schema object you
  • 00:10:04 can basically say we have two properties
  • 00:10:06 in this schema object here now how does
  • 00:10:09 a query look like what is a query here
  • 00:10:11 and what is a mutation well obviously we
  • 00:10:14 have more than one query we want to
  • 00:10:16 support maybe we want to be able to
  • 00:10:18 fetch a list of events in a list of
  • 00:10:20 users and data for a single event and we
  • 00:10:23 want to be able to mutate different
  • 00:10:25 things create an event create a user
  • 00:10:27 update an event so we can't just map
  • 00:10:30 this property to exactly one action
  • 00:10:32 instead what we use here is we use
  • 00:10:35 another feature of the graph QL
  • 00:10:37 specification and that is types that
  • 00:10:41 graph QL language is a typed language it
  • 00:10:44 works with types to define what a
  • 00:10:48 certain end point returns and so on and
  • 00:10:51 for that or therefore we can create a
  • 00:10:54 new type with the type keyword again a
  • 00:10:57 keyword you have to use and there you
  • 00:11:00 can name this now however you want I'll
  • 00:11:03 name it route query but this could be
  • 00:11:05 named differently and this now also is
  • 00:11:07 an object and in this object we'll
  • 00:11:09 define different real endpoints we
  • 00:11:12 support for incoming queries and I'll do
  • 00:11:15 the same for a mutation here I have my
  • 00:11:18 route mutation this could also be named
  • 00:11:19 differently and there I will define my
  • 00:11:22 different mutations in this query so in
  • 00:11:25 the schema object on there
  • 00:11:26 I will now point at route query which
  • 00:11:28 will basically bundle all my supported
  • 00:11:30 queries and for the mutation I will
  • 00:11:33 point at route
  • 00:11:34 which bundles all my support mutations
  • 00:11:37 and now we can add as many queries and
  • 00:11:39 as many mutations here as we want now if
  • 00:11:43 you're coming from a rest api world this
  • 00:11:45 looks super strange at the beginning and
  • 00:11:47 I'm totally aware of this writing this
  • 00:11:50 code here writing this string
  • 00:11:52 essentially that's not very intuitive if
  • 00:11:55 you previously defined routes and had
  • 00:11:57 your middleware functions or your
  • 00:11:59 controllers doing something when a
  • 00:12:01 request hits that route but you always
  • 00:12:03 have to remember that graph QL simply
  • 00:12:05 works differently graph QL still gives
  • 00:12:08 you an API but this API is not
  • 00:12:11 controlled by different routes or
  • 00:12:13 endpoints but it exposes a full query
  • 00:12:16 language to the fronted and therefore we
  • 00:12:18 need to define our own interpretation
  • 00:12:20 for this query language behind the
  • 00:12:23 scenes on the back end or we basically
  • 00:12:25 need to well define what commands we
  • 00:12:29 want to support what data you can fetch
  • 00:12:32 and that is also a reason why graph QL
  • 00:12:34 uses types because this makes it easy
  • 00:12:37 for us to talk about one at the same
  • 00:12:39 thing we are very clear about which data
  • 00:12:42 a certain endpoint returns and which
  • 00:12:44 data a certain field holds but step by
  • 00:12:47 step we are not returning anything at
  • 00:12:49 this point we have our route Korea and
  • 00:12:51 region route mutation object but both do
  • 00:12:54 not hold any data now let's say here in
  • 00:12:57 the route query we want to be able to
  • 00:12:59 return a list of events so we might
  • 00:13:01 support a command which is called events
  • 00:13:03 you could also think that you use get
  • 00:13:05 events and you could absolutely name it
  • 00:13:07 like this but it's pretty common in
  • 00:13:09 graph QL to basically treat this
  • 00:13:12 regarding its naming as if it were a
  • 00:13:15 property of an object and in an object
  • 00:13:17 you would have an events property that
  • 00:13:19 holds a list of all events right and
  • 00:13:21 therefore we named this events here too
  • 00:13:23 because we basically think of it as
  • 00:13:25 being accessed like a property on an
  • 00:13:27 object that magically holds a list of
  • 00:13:29 all that data this should return in this
  • 00:13:32 case a list of events so here we have a
  • 00:13:35 list of events and this query also
  • 00:13:37 returns some data of course we signal
  • 00:13:41 the return type by adding a colon and
  • 00:13:43 then on the rights of the colon we have
  • 00:13:44 the data that is returned here let's
  • 00:13:47 keep it simple and let's say
  • 00:13:48 this is a list of strings an array of
  • 00:13:51 strings in graph QL world or in the
  • 00:13:54 graph QL specification you define a list
  • 00:13:57 of something so you basically say hey
  • 00:14:00 this will return a list of something by
  • 00:14:02 adding square brackets on the right side
  • 00:14:04 of the colon and then inside of these
  • 00:14:07 square brackets you add the type of data
  • 00:14:09 that is inside of the list so here if we
  • 00:14:11 have a list of strings being returned
  • 00:14:13 then I add string here graph QL supports
  • 00:14:16 a couple of types strings integers
  • 00:14:18 floats boolean and you can learn all
  • 00:14:21 about that in the original graph killed
  • 00:14:23 ox of course and there are more types
  • 00:14:25 than the ones I just mentioned we will
  • 00:14:27 also see a lot of types throughout this
  • 00:14:29 serious dough string is one of the
  • 00:14:31 built-in types make sure it has a
  • 00:14:32 capital S and I want to make clear that
  • 00:14:35 this will always return a list of
  • 00:14:37 strings and I can do this by adding an
  • 00:14:40 exclamation mark after string so it
  • 00:14:42 can't be a list of null of values
  • 00:14:44 basically this means it's not nullable
  • 00:14:46 it will always return a list of strings
  • 00:14:47 and it will always return a list and not
  • 00:14:50 just null it might be an empty list that
  • 00:14:52 would be valid but not a list of
  • 00:14:54 multiple null objects and also not null
  • 00:14:56 as a response so this is our query now
  • 00:14:59 let's also add a mutation here we would
  • 00:15:02 probably create an event and just as
  • 00:15:05 when we work with normal JavaScript
  • 00:15:07 objects creating or updating and so on
  • 00:15:10 so basically not getting data there we
  • 00:15:12 would typically call a function or a
  • 00:15:14 method on an object and hence we will
  • 00:15:16 name this mutation just as we would name
  • 00:15:18 a function we would not name it event we
  • 00:15:22 would name it create event typically
  • 00:15:25 create event is what we create and there
  • 00:15:28 let's say we expect one value the name
  • 00:15:31 we can name this however we want and
  • 00:15:33 then the type of this signal by adding a
  • 00:15:36 colon after it also will be a string and
  • 00:15:38 this then might return let's say a
  • 00:15:42 string again so maybe it just echoes
  • 00:15:44 back the name of the event we wanted to
  • 00:15:46 create now we have to find these two
  • 00:15:50 commands or these two properties of our
  • 00:15:53 root query and of the root mutation our
  • 00:15:55 graph QL API should support now this is
  • 00:15:59 the first step this can now be parsed
  • 00:16:02 and this is now what we exposed to the
  • 00:16:04 front end however when we send requests
  • 00:16:07 nothing will happen right now because
  • 00:16:09 whilst we do have our schema in place we
  • 00:16:12 got no logic to act on incoming requests
  • 00:16:16 that request a list of data or that want
  • 00:16:18 to add an event with the creative event
  • 00:16:20 mutation and we add this logic in the
  • 00:16:25 root value in the resolver here so this
  • 00:16:28 is simply called resolver in the graph
  • 00:16:30 QL world and this root value is a bundle
  • 00:16:33 of all the resolvers we have now here is
  • 00:16:36 one important thing that resolvers for
  • 00:16:39 your commands like events and create
  • 00:16:41 event needs to have the exact same names
  • 00:16:44 so if you have an events query here then
  • 00:16:48 you need to have an events resolver here
  • 00:16:51 so events key in that resolver object
  • 00:16:54 and it's the same for this mutation
  • 00:16:57 important of course you should name your
  • 00:16:59 queries and mutations such that they
  • 00:17:02 don't clash graph QL has no namespaces
  • 00:17:05 and so on so each name here really is
  • 00:17:07 unique events here matches events here
  • 00:17:11 now with that how does a resolver look
  • 00:17:14 like well a resolver is really just a
  • 00:17:17 function so events here is a function in
  • 00:17:20 this resolver object and I'm just
  • 00:17:22 assigning an anonymous arrow function
  • 00:17:24 here this is how a resolver looks like
  • 00:17:27 this function will be called for you by
  • 00:17:30 the Express graph QL package in the end
  • 00:17:32 when an incoming request looks for this
  • 00:17:35 events properties when an incoming
  • 00:17:37 requests requests this events property
  • 00:17:40 so here we just want to return our list
  • 00:17:43 of events then and of course here
  • 00:17:45 without a databases on we can't just
  • 00:17:47 return what we promised to return a list
  • 00:17:50 of strings so I will return an array
  • 00:17:53 here with a list of events like romantic
  • 00:18:00 cooking sailing and all night
  • 00:18:07 coding this is now my events resolver
  • 00:18:12 which will trigger for queries currying
  • 00:18:14 for if
  • 00:18:15 now let's also add a resolver for create
  • 00:18:18 event for Dettol add a second property
  • 00:18:20 in this route value so in our merged
  • 00:18:22 resolver and this has to be named create
  • 00:18:25 event because it's named creative end up
  • 00:18:27 there
  • 00:18:28 this also is a function and this
  • 00:18:31 function now also receives an argument
  • 00:18:33 to be precise and our X object this is
  • 00:18:36 an object holding all the arguments this
  • 00:18:39 might have gotten I didn't talk much
  • 00:18:41 about it but this actually obviously is
  • 00:18:45 a query a property that accepts a list
  • 00:18:48 of arguments now you could also accept
  • 00:18:51 arguments on queries that return data
  • 00:18:53 only and that don't mutate anything here
  • 00:18:56 we could also for example filter events
  • 00:18:58 that are booked so that could be a
  • 00:19:00 boolean this is also something we'll add
  • 00:19:03 later
  • 00:19:03 so argument lists can be added to any
  • 00:19:05 query not just mutations for mutations
  • 00:19:07 that often is the case though because
  • 00:19:09 often we need data to make a mutation we
  • 00:19:11 need to know which data to store we need
  • 00:19:13 to know which ID or which event with
  • 00:19:16 which ID to delete so here we have an
  • 00:19:18 argument list on this create event query
  • 00:19:22 or on this create event operation and
  • 00:19:24 therefore here we get this args object
  • 00:19:28 we would get it here too by the way here
  • 00:19:30 it will just be an empty object because
  • 00:19:31 we have no arguments here we will have
  • 00:19:33 arguments so we can now access our event
  • 00:19:38 name with the name here on this args
  • 00:19:41 object so event name can be retrieved
  • 00:19:43 from our X dot name dot name because I
  • 00:19:48 named it name up here if you named it
  • 00:19:50 differently you have to name it
  • 00:19:51 differently down there and then here I
  • 00:19:54 will just return back dead event name as
  • 00:19:57 we have no database I can't really store
  • 00:20:00 it somewhere so for now this is my
  • 00:20:02 simple graph QL API now to see it in
  • 00:20:06 action we got a couple of options option
  • 00:20:09 number one is that we simply send a post
  • 00:20:12 request to slash graph QL and we try to
  • 00:20:15 write a valid graph QL statement in that
  • 00:20:17 post request and that valid graph QL
  • 00:20:20 statement would be a post request with a
  • 00:20:22 request body where you have a string as
  • 00:20:24 a request body with your graph fuel data
  • 00:20:27 in it now
  • 00:20:28 we will take care of this later because
  • 00:20:31 it's a little more complex and you can
  • 00:20:33 pass extra data for now we will use a
  • 00:20:36 built-in debugging and development tool
  • 00:20:38 which Express graph QL ships with and we
  • 00:20:41 can unlock this tool by adding a third
  • 00:20:43 property after schema and root value
  • 00:20:47 which we passed to that object we pass
  • 00:20:49 to graph QL HTTP and that is the
  • 00:20:52 graphical property and by setting this
  • 00:20:55 to true we get a special URL we can
  • 00:20:58 visit where we get this nice user
  • 00:21:00 interface you saw in the first video of
  • 00:21:02 this series where we can simply play
  • 00:21:04 around with our API and test it so I
  • 00:21:07 will now save this with all these
  • 00:21:08 changes made and now let's go back to
  • 00:21:11 the browser and on our page let's visit
  • 00:21:14 slash graph QL and you will get this
  • 00:21:17 nice graphical user interface here where
  • 00:21:20 you can play around with your API and
  • 00:21:21 the nice thing is that you even get auto
  • 00:21:23 completion here how is auto completion
  • 00:21:25 achieved well it fetches metadata about
  • 00:21:28 your API behind the scenes and since
  • 00:21:30 graphical is a typed language it knows
  • 00:21:33 perfectly well which type of data for
  • 00:21:35 example the create event query expects
  • 00:21:38 so here how do we write a query now well
  • 00:21:42 first of all you have to define which
  • 00:21:44 kind of career you want to create a
  • 00:21:45 normal query which fetches data or a
  • 00:21:48 mutation which mutates something these
  • 00:21:50 are the two keywords we have here we
  • 00:21:52 also have subscription and fragment will
  • 00:21:55 not take care about these two these are
  • 00:21:56 the two main types of operations we have
  • 00:21:59 now query is what I want to do here I
  • 00:22:02 want to get data let's say so after this
  • 00:22:05 we could give this a name get events but
  • 00:22:09 this is optional for now so I will just
  • 00:22:11 add curly braces and again since this is
  • 00:22:13 optional you can also omit the name and
  • 00:22:15 then here you define your own action you
  • 00:22:19 defined now we have only one query we
  • 00:22:21 only have events because that create
  • 00:22:23 event thing is a mutation right we map
  • 00:22:25 it to mutation down there in our root
  • 00:22:29 query which is mapped to the query
  • 00:22:30 object we only or to the query property
  • 00:22:33 we only have that events action so
  • 00:22:36 therefore if we press ctrl white space
  • 00:22:40 or a control blank here
  • 00:22:42 we only see events in the
  • 00:22:45 auto-completion
  • 00:22:46 we can't hit events here and then add
  • 00:22:49 another pair of curly braces and now we
  • 00:22:52 can't define more because we have no
  • 00:22:54 nested object that will be something we
  • 00:22:56 can do later then we can pick the
  • 00:22:57 properties of the events we want to get
  • 00:22:59 here we can just request events like
  • 00:23:02 this hit enter and indeed we get back
  • 00:23:05 this object with the data key which
  • 00:23:07 holds an object with DD key of our
  • 00:23:09 action of our query events and then this
  • 00:23:12 has the return value and if this return
  • 00:23:14 value would be a nested object then we
  • 00:23:17 could even dive into this with another
  • 00:23:19 pair of curly braces here and pick the
  • 00:23:21 fields we want to have and that is
  • 00:23:24 something we'll do later for now let's
  • 00:23:25 stick with the simple example which
  • 00:23:27 proves that the API works now let's also
  • 00:23:30 see a mutation action so mutation we
  • 00:23:33 could give this a name to but I will
  • 00:23:35 make it an anonymous mutation here hit
  • 00:23:38 control space here again for auto
  • 00:23:40 completion we only have to create event
  • 00:23:42 mutations so this is filled in
  • 00:23:44 automatically and this node takes
  • 00:23:46 arguments so we should add a pair of
  • 00:23:49 parentheses here and we have one
  • 00:23:52 argument here which is of type string
  • 00:23:54 it's the name argument because I named
  • 00:23:56 it name here and now if I hit enter
  • 00:23:59 after a colon we define the value since
  • 00:24:03 it's a string it should go between
  • 00:24:04 quotation marks and important these have
  • 00:24:06 to be double quotation marks you'll get
  • 00:24:08 an error otherwise and all named is
  • 00:24:11 sports and hit enter and did you see
  • 00:24:17 this worked we'd get no error here we
  • 00:24:20 get sports as a result here because in
  • 00:24:23 our resolver for a create event we
  • 00:24:25 basically return the day that we passed
  • 00:24:26 in so this is the first basic graph QL
  • 00:24:30 API it's not doing much but I hope that
  • 00:24:33 I could at least help a little bit
  • 00:24:34 understand how it works behind the
  • 00:24:37 scenes and what the core idea is now
  • 00:24:39 obviously will enhance this and make
  • 00:24:41 this more useful over the next videos in
  • 00:24:44 this series but this already is a nice
  • 00:24:46 start that hopefully is interesting to
  • 00:24:49 YouTube so I hope to see you back in the
  • 00:24:51 next videos of the series have a great
  • 00:24:53 day bye