The Quick Starter Guide to GraphQL

What is an API?

API stands for Application Programming Interface. As the name implies, it is an interface via which developers, users, and consumers can interact with data.

REST Vs. GraphQL APIs

For a long time, REST has been used to create APIs.

  1. Too many endpoints
  2. Information repeatedly being over and under-fetched
  3. Increased difficulty for developers to learn and understand your API

What is GraphQL?

GraphQL, or “Graph Query Language,” is a query language for APIs, as the name implies. It allows the client (frontend) to request data from an API.

Getting Started: How GraphQL Works

Our first goal with this GraphQL starter guide is not to teach you how to set up a GraphQL server but to learn how GraphQL works in practice.

  1. To begin our project, we’ll make a new folder, which you can name whatever you wish. For the sake of this guide, let’s name it “Graphql-server”.
mkdir graphql-server
  1. Next, type the following command within your newly created folder:
npm init -y
yarn init
npm install --save-dev graphpack
"scripts": {
"start:dev": "graphpack",
"start:build": "graphpack build"
}
type Query {
hello: String
}
import { users } from "./db";const resolvers = {
Query: {
hello: () => "Hello World!"
}
};
export default resolvers;
export let users = [
{ id: 1, name: "Adil Sikandar", email: "adil@gmail.com", age: 28 },
{ id: 2, name: "Shahid ullah khan", email: "shahid@gmail.com", age: 29 }
];
src
|--db.js
|--resolvers.js
|--schema.graphql

GraphQL Schema

GraphQL has its own set of languages for writing schemas. The Schema Definition Language is a human-readable schema syntax (SDL). No matter what technology you use, the SDL will remain the same, and you can use it with whatever language or framework you wish.

Types: Learning How to Use GraphQL

One of the most vital characteristics of GraphQL is types.

type User {
id: ID!
name: String!
email: String!
age: Int
}

Queries & Mutations

The way you acquire data from the server is through queries.

Queries

To put it another way, queries in GraphQL are the means through which you can obtain data.

type Query {
users: [User!]!
}
user(id: ID!): User!type Query {
users: [User!]!
user(id: ID!): User!
}
import { users } from "./db";const resolvers = {
Query: {
hello: () => "Hello World!"
}
};
export default resolvers;
import { users } from "./db";const resolvers = {
Query: {
user: (parent, { id }, context, info) => {
return users.find(user => user.id === id);
},
users: (parent, args, context, info) => {
return users;
}
}
};
export default resolvers;
query {
users {
id
name
email
age
}
}
query {
user(id: 1) {
id
name
email
age
}
}

Mutations

Once you’ve got a good understanding of GraphQL queries, mutations come as the next step.

type Mutation {
createUser(id: ID!, name: String!, email: String!, age: Int): User!
updateUser(id: ID!, name: String, email: String, age: Int): User!
deleteUser(id: ID!): User!
}
Mutation: {
createUser: (parent, { id, name, email, age }, context, info) => {
const newUser = { id, name, email, age };
users.push(newUser); return newUser;
},
updateUser: (parent, { id, name, email, age }, context, info) => {
let newUser = users.find(user => user.id === id);
newUser.name = name;
newUser.email = email;
newUser.age = age;
return newUser;
},
deleteUser: (parent, { id }, context, info) => {
const userIndex = users.findIndex(user => user.id === id);
if (userIndex === -1) throw new Error("User not found."); const deletedUsers = users.splice(userIndex, 1); return deletedUsers[0];
}
}
import { users } from "./db";const resolvers = {
Query: {
user: (parent, { id }, context, info) => {
return users.find(user => user.id === id);
},
users: (parent, args, context, info) => {
return users;
}
},
Mutation: {
createUser: (parent, { id, name, email, age }, context, info) => {
const newUser = { id, name, email, age };
users.push(newUser); return newUser;
},
updateUser: (parent, { id, name, email, age }, context, info) => {
let newUser = users.find(user => user.id === id);
newUser.name = name;
newUser.email = email;
newUser.age = age;
return newUser;
},
deleteUser: (parent, { id }, context, info) => {
const userIndex = users.findIndex(user => user.id === id);
if (userIndex === -1) throw new Error("User not found."); const deletedUsers = users.splice(userIndex, 1); return deletedUsers[0];
}
}
};
export default resolvers;
mutation {
createUser(id: 3, name: "Adil", email: "adil.sikandar@mobilelive.ca", age: 28) {
id
name
email
age
}
}

Takeaway

As you’ve probably learned by now, GraphQL is a relatively new yet extremely powerful technology.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
mobileLIVE

mobileLIVE

One of Canada’s fastest-growing technology companies, helping brands accelerate their #DigitalTransformation.