DEV Community: The Javascript Ninja

The Ultimate Beginner’s Guide to GraphQL: Part 2 – Organization, Parameters, more Queries, and Mutations

The Javascript Ninja — Sun, 20 Dec 2020 01:49:03 +0000

Hi everyone! Welcome back to part 2 of The Ultimate Beginner’s Guide to GraphQL tutorial series. Before we start, if you haven’t seen part 1, you might want to check it out here. This tutorial will build off the concepts learned in part 1.

With all that said, I wanted to go more in-depth about something I only briefly mentioned in part 1: the GraphQL infrastructure. This is an important part of learning how GraphQL works, and what makes it so awesome.

The GraphQL Infrastructure

To get a better understanding of the advantages and disadvantages of GraphQL, I created this handy little infographic:

Alright! Hopefully that gives you a little insight into the inner workings of GraphQL, and helps you understand some of the operations at a deeper level.

Organizing the Code

Unfortunately, before we get to the fun stuff in this tutorial, we do have to work through the boring stuff. This means working on organizing our code.

If you don’t remember, we used our standard server code and made some significant changes to the index.js file in part 1 of the tutorial. I’d recommend reading that part first so you’ll be up-to-date on what we’re doing. After completing part 1, the code in our index.js file should look like this:

const port = process.env.port || 3000;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
]

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

For a full explanation, read part 1. Otherwise, note that the code above will create a GraphQL server alongside our express server, and define a simple query to execute. Don’t leave yet – read on. We’ll be expanding this database model later in the tutorial.

Since we’ll be greatly expanding the code in our index.js file, it might do us some good to split it up between other files. This will reduce the amount of clutter in our main file, and keep our project file organized.

To organize our code, we can move our schema and resolvers objects to separate files. This may seem a little overkill at first, but after we expand them, it will be totally necessary.

To do this, first, create a models folder at the root level of your project. We will still want everything in our project to correspond with MVC formatting.

Then, in our new models folder, we’ll create the files schema.js and resolvers.js.

Next, in schema.js, cut and paste the schema object from index.js:

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

Then, in resolvers.js, cut and paste the resolvers object and users array from index.js:

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: _ => users;
  }
}

Then, modify index.js so it looks like this:

const port = process.env.port || 3000;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const schema = require('./models/schema.js');
const resolvers = require('./models/resolvers.js');

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

Awesome! Now our code is all nice and organized. All that we’ve done above is just sort our resolvers and schema objects into modules so they don’t all clutter up the same file.

Writing More Advanced Queries With Parameters

Alright, now it’s time to work on the meat of GraphQL: querying. Querying is arguably the biggest and most important part of GraphQL (partly because the QL stands for Query Language). But, with all that said, it’s time to focus on writing more advanced query functions. The queries we wrote in part 1 were great, but they couldn’t do much and left a lot to be desired.

In a realistic situation, your GraphQL query is probably going to return a lot of data. There are multiple reasons why this could be bad:

• It’s hard to comprehend
• It will drastically slow down the site
• It’s impossible to filter through or perform operations on

As you can see, none of these options are good in the slightest. That’s why it’s important to write better queries by filtering through data to return only what we need, not the entire database. We can do this by adding query parameters.

Adding In Some Parameters

To add some parameters to our query, navigate to your schema.js file.

Then, let’s add some parameters to the getUsers query in the Query type.

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers(id:Int, username:String, email:String, password:String): User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

As you can see, we added all the arguments we wanted available to the getUsers query. The reason I’ve added these arguments is so I’ll be able to filter through different users by these specific fields. There are no exclamation points after the object types in the parameters because I want all parameters to be optional.

However, before we can successfully execute our query with these parameters, we need to make some edits to our resolvers.

Go to resolvers.js. Let’s update our getUsers resolver. Right now, it looks like this:

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

Pretty lame, huh? Right now, this lame resolver can only return our pre-set array of objects. And even at that, we can’t even filter the results in our query.

Well, it’s time for things to change. Update resolvers.js so it looks like the following:

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
];

const resolvers = {
  Query: {
    getUsers: (parent, args) => {
      if (args.id) {
        return users.filter(user => user.id === args.id);
      } else if (args.username) {
        return users.filter(user => user.username === args.username);
      } else if (args.email) {
        return users.filter(user => user.email === args.email);
      } else if (args.password) {
        return users.filter(user => user.password === args.password);
      } else {
        return users;
      }
    }
  }
}

Wow – Big improvement. However, there’s a lot going on; let me explain it for you:

1. First, the getUsers method takes in two parameters: parent, and args. It is important that args be the second parameter, otherwise you will get an error.

2. Second, we make a long if statement. First, we check if the arguments id, username, email, or password were provided to filter through the data. If no parameters were provided, we return all the data in the users array.

3. If parameters were provided with the query, we filter through the data in the users array with the array.filter() method. Then, we return matching data – if there is any.

Now, let’s test our new-and-improved query. Run your server and navigate to localhost:3000/graphql.

Then, enter the following query into the box on the left:

query {
  getUsers(id:1) {
    id
    username
    email
    password
  }
}

This should retrieve all data for the user with an id equal to 1.

GraphQL Mutations

The next big part of GraphQL is modifying data in the database. This includes adding and deleting users, in our scenario. Fortunately, GraphQL provides an easy way for us to do this: mutations.

In a brief summary, mutations are just like GraphQL queries, except they modify data. In order to make a mutation, we can define a mutation type just like we did a Query type in our schema.

Modify your schema in schema.js to look like the following:

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers(id:Int, username:String, email:String, password:String): User
  }
  type Mutation {
    createUser(username:String, email:String, password:String): User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

As you can see, mutations don’t look very different from queries. Of course, you can always get more advanced; these mutations are on a very basic level.

In the Mutation type above, we define a createUser mutation. This mutation takes in 3 parameters: username, email, and password. The reason we’re not going to provide the id property is because we want the id to be defined by the computer, whether randomly or in order, not manually.

In order to put our mutation into effect, we’ll need to make some edits to our resolvers. Look at the new resolvers below:

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
];
const resolvers = {
  Query: {
    getUsers: (parent, args) => {
      if (args.id) {
        return users.filter(user => user.id === args.id);
      } else if (args.username) {
        return users.filter(user => user.username === args.username);
      } else if (args.email) {
        return users.filter(user => user.email === args.email);
      } else if (args.password) {
        return users.filter(user => user.password === args.password);
      } else {
        return users;
      }
    }
  },
  Mutation: {
    createUser: (parent, args) => {
      let newUser = {
        id: users.length + 1,
        username: args.username,
        email: args.email,
        password: args.password
      };
      users.push(newUser);
      return newUser;
    }
  }
}

As you can see, in our resolver, we have a new property after the Query property! This is the Mutation property. In the Mutation property, we have the createUser method. This is so far our first mutation. In the createUser method we do 3 things:

1. Create a newUser object. In this object, we set the id, username, email, and password of our new user.

Add the newUser object to the database. In reality, we would add the newUser to the database. However, since we’re just using a dummy database model, we just use array.push() to add the newUser to our users array.
Return the newUser. This is pretty straightforward. We just return the newUser object as a result of the mutation.

Running our First Mutation

Now that we’ve got our mutation all done, it’s time to run. (Yes, that rhymes 😀). In order to run our mutation, start your server and navigate to localhost:3000/graphql.

To make sure everything is working right, let’s first run our query. Enter this query into the box on the left:

query {
  getUsers {
    id
    username
    email
    password
  }
}

You should see the following result:

Now that we’ve ensured everything works and we aren’t getting any errors, it’s time to test our mutation. Let’s enter the mutation we wrote earlier:

mutation myMutation {
  createUser(username:"Subscriber to TJN", email:"contact@thejavascriptninja.com", password:"secret") {
    id
    username
    email
    password
  }
}

As you can see, we call createUser, and give it the specified params. It should return the following result:

{
  "data": {
    "createUser": {
      "id": 3,
      "username": "Subscriber to TJN",
      "email": "contact@thejavascriptninja.com",
      "password": "secret"
    }
  }
}

Then, if we run our query again, we can see our mutation has taken effect.

Run:

query {
  getUsers {
    id
    username
    email
    password
  }
}

You should see the following:

{
  "data": {
    "getUsers": [
      {
        "id": 1,
        "username": "The Javascript Ninja",
        "email": "contact@thejavascriptninja.com",
        "password": "its-a-secret"
      },
      {
        "id": 2,
        "username": "The Javascript Ninjas Best Friend",
        "email": "contact@thejavascriptninja.com",
        "password": "its-a-secret"
      },
      {
        "id": 3,
        "username": "Subscriber to TJN",
        "email": "contact@thejavascriptninja.com",
        "password": "secret"
      }
    ]
  }
}

Hooray! Our mutation worked!

To Conclude…

A’ight folks!

Today we’ve talked about organizing our code, writing more advanced queries (using parameters and variables), and GraphQL mutations.

Pretty awesome stuff.

I am going to end the tutorial here so it doesn’t get too long, but make sure to subscribe so you don’t miss out on any great content!

Stay tuned and talk soon!

Connecting a Project to GitHub From the Command Line

The Javascript Ninja — Mon, 14 Dec 2020 16:18:41 +0000

GitHub is a great tool to be used when programming, as it helps store your code over the internet. It makes your project more organized, easier to develop, and allows you to collaborate with friends or other developers. In addition, GitHub works smashingly with Visual Studio Code.

If you’re still not recognizing a need for GitHub, do not worry – you will soon.

In this short tutorial, I’m going to show you how to connect your project with GitHub from the command line.

Connecting to GitHub

First, navigate to your project in your computer’s terminal and run:

git init

That will initialize your project with Git. Next, run:

git add .

That command will add all of your files to the git repository that we initialized in step 1. After, run:

git commit -m "Initial Commit"

This commits all your files to your repository. Next, we need to set up a GitHub repository. To do this, go to (github.com)[github.com] and either sign in or create an account. After that, create a new repository by clicking the “new” button on the sidebar on the left side of the screen.

Next, give your repository a name, select if you want it to be public or private, and then click create at the bottom of the screen.

Now, copy the repository link from the top of the page.

Then, go back to your terminal. After, run the following command:

git branch -M master

This creates a master branch for your repository. Finally, run:

git remote origin add <repository link>

Make sure to replace <repository link> with your GitHub repository link from above. The last thing we to do is to push all our files to GitHub! Do that with the following snippet:

git push -u origin main

Congrats! Now we’ve pushed our project to GitHub, and you should be able to see it if you reload your GitHub repository’s page.

Making Changes

However, let’s say you continue to edit your code. How can we update your GitHub repository? It can be updated with this series of commands:

git add .
git commit -m "Your Commit Message Here"
git push -u origin main

If you're interested make sure to follow me or check out my Github profile!

Getting Started With Electron – Building a 1-Page App

The Javascript Ninja — Mon, 14 Dec 2020 00:05:10 +0000

If you’re an intermediate or advanced javascript programmer, or even if you’re a beginner, chances are, you might have heard of Electron. Electron is an open-source Javascript framework that is being used to develop many applications all over the world.

What Is Electron?

Like I said earlier, Electron is an open-source Javascript framework that is used to develop apps and desktop GUI applications in Javascript and Node.js. Originally developed by GitHub in 2013, Electron has been used to develop many apps and IDE’s, including my personal favorite, Visual Studio Code. Electron was also used to develop Slack and the Atom editor. By combining the Node.js runtime and the Chromium rendering engine, Electron is easy to use and can develop cross-platform apps very easily without too much of a hassle.

Electron Features

• Reusability

With Electron, since the code is web based, the code is completely reusable. This means that we can code once and still be able to convert our website easily into an app.

• Time and Cost

Electron can save a lot of time and money for the fact that you can use the same code for a website and an app. This makes it easier without having to learn multiple new programming languages or hire multiple people.

• Performance

Electron can have excellent performance if developed appropriately, deploying only what you need. Electron can save copious amounts of time in deployment, however it does take up some memory.

These are 3 main features of Electron that make Electron so popular and convenient. Overall, this makes Electron a fantastic development option.

How To Start Using Electron

Electron is relatively easy to understand and is quick to get up and running with. All you need to do is a little bit of Node.js and you can get a 1 page app set up in no time!

First, create a new project folder and call it anything you like. Then, navigate to that directory in your computer’s terminal.

Next, initialize your project with NPM and complete the prompt. If you can’t fill out some fields or don’t know what they mean, accept the defaults.

npm init

After completing the prompt, install Electron as a development dependency.

npm i electron --save-dev

Now that Electron is installed appropriately, it’s time to code the application. Let’s start by adding a start script to run the app.

In your app’s package.json file, add a start script to the scripts object. Remember to include a comma after the test script.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
 },

Now, whenever you’re ready to run your electron application, you can run electron . or npm start to run your project.

Next, create a file called index.js at the root level of your project’s directory. In index.js, we need to require the app and BrowserWindow variables from electron.

const {app, BrowserWindow} = require('electron');

Next, we’ll need to write the main function that will open our application’s window. We can do this by declaring a function to create a window. Then, we can declare some properties of the window, like the width and height, and tell it to render an HTML page.

var createWindow = () => {
    var window = new BrowserWindow({
        width:800,
        height:600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    window.loadFile('index.html');
}

Now, we need just a couple more functions to activate our app. Here are functions that will draw the window when the app is opened, quit when the application has been quit, and draw a new window if the app is activated.

app.whenReady().then(() => {
    createWindow();
});

app.on('window-all-closed', () => {
    if(process.platform !== 'darwin') {
      app.quit()
    }
})

app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
});

Our app is now officially ready. All that’s left to do is to create an HTML page called index.html, and give it whatever content you would like to be in your app. You can also create CSS and Javascript pages to link to your HTML page.

Here is the final code for the boilerplate Electron app that I built.

https://github.com/the-javascript-ninja/Electron_Boilerplate.git

The Ultimate Beginner's Guide to GraphQL

The Javascript Ninja — Sat, 12 Dec 2020 22:26:25 +0000

Let’s talk about one of the biggest pains in web development: connecting your app to a database. While you might not share the same opinions, this is one of my least favorite parts of server-side development, so this tutorial will show you my tried-and-true tricks for making this go smoothly.

Firstly, when you’re just starting with databases, it can be very overwhelming as there are TONS of different options to choose from. Should you choose plain-old MySQL, MongoDB, PostgreSQL, or maybe GraphQL? If you’re thinking, “What’s the big difference?” Then don’t worry, you’re not alone; I originally thought that as well, but I can assure you that you’ll soon be on your way to database nirvana.

Using This Guide

I’m well aware that there are hundreds of other guides on the internet about this very same topic, and I can confidently say that I’ve looked at most of them. When I first started with databases and GraphQL, I was very confused. The large number of resources and various methods might leave you questioning, “Should I do it this way or that way?” Coming from somebody who’s actually tried most of the different methods, I’ll cover the easiest, simplest, and most effective ways to go about starting with a database (in my opinion).

Setting Up

As usual, I’m going to use a basic express server with EJS as my templating engine. I’m also going to arrange my project folder in the MVC format. I’m not going to show how to set up the whole project for sake of brevity, but if you’re unclear on any of these concepts, make sure to check out my articles on:

How to Add Express to a Node.js Web App
What is the MVC?
Templating With EJS and Node.js

In addition, if you just want to jump right in, you can download my boilerplate server code here on GitHub. This is the code I will be using for my server.

After we’ve gotten the basic server up and running, there is one more dependency that we need to install.

apollo-server-express

This package is responsible for setting up our GraphQL server. If you’re already familiar with GraphQL, you might realize that there is also a package called apollo-server which would work just as well. The reason I’m using apollo-server-express is so that we can run the GraphQL server alongside our Express server.

You can install this package by running:

npm i apollo-server-express -S

Later on in this series, we will probably need to install some more dependencies but this is the only other one we’ll be needing for this part.

Writing A Schema

For the next couple of following sections, I’m going to teach you some of the basic GraphQL necessities that we will need to write our GraphQL server. We won’t be able to write the server until we get through this part, so bear with me while we go over this necessary material.

One of the most important parts of GraphQL (or any query language) are parts called schemas. In short, schemas are data representations in the form of a model. For example, if we had a chat app and were storing messages in the database, we might add a message type to our schema. It might look like this:

type Message {
  id: Int
  text: String
  from: String
}

As you can see, each message we store would have the id, text, and from properties. This is like an outline that will apply to each message that we send.

To actually write our schema, we will use have to use the gql property of the apollo-server-express module. Check out the example below:

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

In the example, we require gql from apollo-server-express. Then, let’s pretend we’re building the user authentication for our chat app. First, we’d define a User model. Then, we define a Query type. In our Query type, we have a getUsers method. We set this to return data of type User. In the User type, each user will have the following properties of id, username, email, and password. The exclamation point after the property type means that the property is non-nullable.

Writing Resolvers

The next thing we’ll need in order to get GraphQL working is to write some resolvers. Briefly, resolvers are groups of functions that act upon a GraphQL query. This means that whenever you execute a query from your schema, such as the getUsers query we wrote above, you will need a resolver to handle the information and send back a response.

Writing resolvers is actually fairly simple. Take a look at the example below:

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

Alright – this is a fairly simple object. First, we have our resolvers object; this is where we will put all of our resolvers. Then, inside the resolvers object, we have the Query object. This is where we will put all our resolvers of type Query. You can see that we defined getUsers in the Query type when we wrote our schema. Finally, we add our getUsers resolver to the Query object and set it to return the string 'Hello World'.

It’s important to realize that the Hello World part is temporary. Since we haven’t yet set up a database model, we don’t have anything to return yet. That’s why I’m returning 'Hello World'. Don’t worry though; we will add a dummy database model later on in the tutorial. For now though, I’m going to leave the resolvers as-is so we can start writing the server and seeing some results.

Writing The Server

Up until now, we haven’t really seen any results of our coding. We’ve mostly just been writing the code without anything happening. Well, now it’s time to write the server. Once we’ve got the server down, we’ll be able to interact with the database.

Surprisingly enough, the server is very easy to code. Take a look at the following:

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

In the code above, we first require ApolloServer from the apollo-server-express package. Then, we set up a serve object. The typeDefs property is where we tell the server our schema, and the resolvers property is where we tell the server our resolvers. Then, we add the GraphQL server to our express server. The app variable is the variable we declare when we initialize our express server.

After all this coding, the code in your index.js file should look like the following:

const port = process.env.port || 3000;
const express = require('express');
const ejs = require('ejs');
const layouts = require('express-ejs-layouts');
const app = express();

app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(layouts);

const homeController = require('./controllers/homeController.js');
app.get('/', homeController.renderIndex);

const { gql } = require('apollo-server-express');
const schema = gql`
  type Query {
    getUsers: User
  }
  type User {
    id: Int!
    username: String!
    email: String!
    password: String!
  }
`;

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

const { ApolloServer } = require('apollo-server-express');
const serve = new ApolloServer({
  typeDefs: schema,
  resolvers: resolvers,
});
serve.applyMiddleware({ app });

const server = app.listen(port, () => {
  console.log(`🚀 Server listening on port ${port}`);
});

Now, to run the server, navigate to your project in your computer’s terminal/shell and run:

node index

Alright! The server is running! However, if you navigate to localhost:3000 in your web browser, you won’t see any indication that the GraphQL server is working. So, how do we know? Well, GraphQL comes with an awesome browser tool called GraphIQL. This is what we’ll use to interact with the database.

Database Interaction With GraphIQL

GraphQL wouldn’t be GraphQL without the QL part: the query language. We need to be able to retrieve, add, modify, and delete information from the database. For this, we’ll use an in-browser feature called GraphIQL.

In order to access GraphIQL, navigate to localhost:3000/graphql with your server running. You should see something like this:

This is the online, fully interactive, GraphQL UI. This is the space where we can run and execute queries. To execute our first query, enter the code below into the box on the left and click the run button.

query findUsers {
  getUsers
}

First, we define our query with the query keyword and the name of our query (the name can be anything you want). If we only have one query, however, we don’t actually need this. The code would also work just fine if we wrote it like this:

{
  getUsers
}

What this does is it executes the the getUsers resolver. Once we run the query, it should return the following result:

{
  "data": {
    getUsers: 'Hello World'
  }
}

It returns the string ‘Hello World’ because that is what we set it to return in our getUsers resolver.

Adding in a Database Model

In order to keep this post short, this will be the last section. This will, however, be a series. Make sure to keep an eye out for the parts that follow, or you can subscribe for email updates.

That said, our GraphQL program and query works pretty well, but it would be pretty neat if we could retrieve actually data, not just a short string. Fortunately for us, this is well within our capabilities. First, let’s create an array of users like the one shown below.

let users = [
  {
    id:1,
    username:'The Javascript Ninja',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
  {
    id:2,
    username:'The Javascript Ninjas Best Friend',
    email:'contact@thejavascriptninja.com',
    password:'its-a-secret'
  },
]

Above, we have two users in an array. Both users contain all the properties that we entail them to have in our schema. Next, let’s make a couple of changes to our resolvers.

From this:

const resolvers = {
  Query: {
    getUsers: _ => 'Hello World'
  }
}

To this:

const resolvers = {
  Query: {
    getUsers: _ => users
  }
}

Now, when we call the getUsers resolver, it will return the data in the users array.

Wrapping Up

I’m going to end this part of the tutorial here, but this certainly isn’t the end of the series! We have only just barely scratched the surface of GraphQL and databases, so make sure to watch out for other parts of my GraphQL for Beginners series. Feel free to subscribe so you don’t miss out on any updates (there’s a form on the home page or at the top of this page if you’re interested).

As always, leave a comment or like this post if you enjoyed it or want more content like this.

Hope to see you soon!