« Previous Tutorial Next Tutorial »

In the past couple of tutorials we've talked a bit about how to query data from a GraphQL server using, well … queries. That's super useful, but obviously there's more to data management than just receiving. We need to be able to send data to our back-end and update the database with it. To do that in GraphQL, we use what they call "mutations".

We're going to be building on the same Node.js application that we already created in the previous couple of tutorials, so make sure you have that available before moving forward. If you need to start at the beginning, just head for JS Quick Hits 48 - An Introduction to GraphQL and go from there! Also, remember that you can always check out working code for each tutorial at the JS Quick Hits Github Repo. For example, your index.js file to start with should look like this.

All set? Let's roll! The first thing we need to do is update our schema with two items. The first is an input type, which we'll use to describe the data we'll be sending in from the front-end. It goes up at the top of the schema, above the User type, and looks like this:

  input UserInput {
    age: Int
    name: String
  }

Note that there's no ID field there. This is because in the real world, you don't want to generate an ID on the front-end. Your database would do that for you. We're going to fake it in our back-end code. More on that in a second. First we need to add, at the bottom of the schema, our actual mutation. It looks like this:

  type Mutation {
    createUser(input: UserInput): User
  }

Pretty simple, right? We reference a createUser resolver that we'll create in a second, tell it to expect input from the front-end, tell it that the input will match the UserInput schema we just created, and then tell it that it should return a User object (which we defined in a previous tutorial).

Now let's create that resolver. Down in the root block, at the top add this code:

  createUser: (args) => {
    const { age, name } = args.input;
    const id = data.users.length + 1;
    data.users.push({ age, id, name });
    return data.users.find(user => user.id === id);
  },

OK, here's the situation. When we get stuff from the front-end, the data we define is going to come in as a sub-object called input from the top-level args object. We destructure the name and age from that. Then we generate our ID (remember, we're simulating adding to a DB here). The we push the data to our "database", AKA our array, and then we return the new user.

We're done here. Save the file, and let's head over to our handy GraphQL GUI at http://localhost:4000/graphql. To use our new mutation, we just need the following code:

mutation {
  createUser(input: {
    age: 41,
    name: "Bob Johnson"
  }) {
    id
    age
    name
  }
}

What we're doing here is saying "hey, we're using a mutation" and then which mutation we want to use, the input we want to give, and of course which parts of the User object we want to get back. Remember, that's one of the coolest things about GraphQL: the ability to pick and choose what data we receive. So in this case, we're getting all of the available bits of data (id, age, and name, in that order), but we could just as easily ask for the name back, or the ID, or whatever.

Go ahead and run that, and you should see that you've successfully added a user to the "database". You could keep changing the data and re-running the query, and as long as you don't refresh the page, you'll see the ID increase with each new user you add. You could also query all those users but, again, don't refresh or you'll lose everything that's not defined in the initial array. This problem is, of course, why we use databases in the real world!

That's it for basic GraphQL. There's obviously a ton more we could dive into, but the goal of this series isn't to get that in depth. If you'd like me to do a full GraphQL course, let me know and I'll add it to the list! Next week, we're going to take a look at the latest version of Express.js and Express-Generator. See you then!

As always, you can download example files for each of these tutorials from the JS Quick Hits github repo.

Enjoying these quick hits? You can get them five days early by subscribing to our weekly newsletter.

« Previous Tutorial Next Tutorial »