The Quick Starter Guide to GraphQL

What is an API?

REST Vs. GraphQL APIs

What is GraphQL?

Getting Started: How GraphQL Works

mkdir graphql-server
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

Types: Learning How to Use GraphQL

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

Queries & Mutations

Queries

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

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

--

--

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