Deploy a GraphQL dev playground with graphql-up

[00:00] We can install Graphql-Up using Node package manager, running npm install graphql-up. Tack g if you want to install that globally. Our next step is to create a schema file in GraphQL IDL notation. I'm going to go ahead and create the file. We'll open that in our editor.

[00:19] The schema is made up of types. I'm going to create a type of person. It's going to be an object. I'm going to create a type of task, also going to be an object. Inside of those objects, we create our fields. I'm going to create a field called ID that has a type of ID with an exclamation point added.

[00:38] This is a field that'll be automatically generated for us. Then I'm going to have a name. That's going to be a type of string where the exclamation point implies that it is required. In our task, we're also going to have an ID, and we'll have a description, also a type of string.

[00:57] Now, I want to create a relationship between these two types. I want a person to have tasks, which are going to be a list or collection of task objects. I can create that by using brackets and then say what type it's going to be.

[01:14] I follow that with a directive called relation, where I simply need to pass in a name for the relationship. I'm going to call this person, task. Now, in the task, we're going to need to create the relationship back to the person.

[01:32] I'm going to call this one person. It's going to have a type of person. Again, I need to identify the relation by passing in the exact same relation name. I'm going to save that. I'm going to run Graphql-Up, tasks.schema.

[01:50] It says it's creating our GraphQL API. Once that's ready, we're going to get two URLs, one for a simple API, which is good for libraries like LOCA and Apollo. Then we get a Relay API, which is good for Relay.

[02:10] I'm going to drop that URL here into our browser. We get GraphQL's custom graphical. Let's go ahead and run a query here. I'm going to run all persons. You can see that was automatically generated for us, a person pluralized. We could have run all tasks as well.

[02:31] From that, I'm going to say I want to get the ID, the name, and also the tasks. From tasks, I want to get the ID and the description. You can see we're getting full autocompletion here. I'm going to go ahead and run that.

[02:44] We get no data back, because we haven't created any. Let's go ahead and create some data using mutations. Here's our first mutation. We're just going to call createPerson, again, automatically created for us.

[03:00] Say name is Joe. Then from that, we'll just get the ID. Cool, we got that. Let's try running our all persons query again. We can see that we do, in fact, have a person by the name of Joe. Let's do another mutation and give Joe some tasks.

[03:22] Let's say createTask. We're going to have a description. Say task for Joe. Then we're going to need our person ID, which I copied from our previous query. Then from that, we'll just get the ID. Let's run that. It says it created something. We'll jump back to our all persons.

[03:44] We see that we have a person named Joe who has a task, task for Joe. Jump back to our createPerson. We're going to create another person, but this time, we're also going to create some tasks. Right here in the createPerson method, I'm going to have tasks.

[03:56] It's going to be an array. Our first object will have a description. We'll say task one for Jim. Now, copy that, and we'll say task two for Jim. We'll run that. It says it created it. Let's check our all persons. We'd see we have one task for Joe and two tasks for Jim.

[04:25] If we want to connect to this service with our own code, I'm going to go ahead and click on this generate code button right here. I'm going to copy this NPM install of LOCA and LOCA Transport HTTP. I'm going to run that here in my terminal.

[04:41] I'm going to create an index.js file. I'm going to set our environment to Node, and I'm going to grab this generated code right here, which is going to be the exact same query that was in the window where we clicked on generate code.

[04:58] I'm just going to copy that, drop it in here. We've got LOCA. We've got Transport. All this stuff after our API, we really don't need, and we don't need the authorization bit. It's got this method called getItems that runs the exact same query we were running in the playground.

[05:20] Down here, I'm just going to run getItems. This is using fetch, so it's going to be a promise. I'll just call the result of that, D. I'll console.log, JSON.stringify the data that we get back.

[05:36] Here in our terminal, I clear that out. Say Node index, which I didn't save. Node index. You can see we get our data back from our live GraphQL endpoint.