Learn GraphQL - Skill Preparation and Environment Setup

#Introduction

Welcome to the Learn GraphQL series! This series will guide you to mastering GraphQL — the query language for APIs created by Facebook, now maintained by the GraphQL Foundation — from the fundamental concepts all the way to production-ready deployment. There are 51 episodes in total organized into ten phases, from prerequisites to real-world projects.

Before writing your first schema or resolver, there are a few essential skills and software tools you need to have. Why does this matter? GraphQL is not a replacement for HTTP or a database; it's a layer that sits on top of both. If you don't yet understand how an HTTP request works, how JavaScript handles promises, or how data is stored in a database, tracing the flow of data when an error occurs will be very difficult.

Episode 0 is your roadmap. We'll make sure your core skills are in place, install Node.js and supporting tools, initialize a project with TypeScript, and then configure ESLint, Prettier, and the GraphQL extension. Once this episode is done, the rest of the series will be comfortable to follow.

#Essential Skills You Must Master

#HTTP Protocol

GraphQL almost always runs on top of HTTP (except for the WebSocket transport used for subscriptions in episode 16). You must understand HTTP methods such as GET and POST, the structure of requests and responses, and popular status codes like 200, 400, and 500. With GraphQL, nearly every operation is sent as a POST to a single endpoint.

curl -X POST http://localhost:4000/ -H "Content-Type: application/json" \
  -d "{\"query\":\"{ hello }\"}"

Notice that every request is sent as JSON with a query field. You'll also frequently use curl for quick debugging without opening a browser.

#JavaScript or TypeScript ES6+

GraphQL has the most mature ecosystem in JavaScript. Master at minimum the ES6+ syntax: arrow functions, destructuring, spread operator, template literals, and module import-export. For this series we use TypeScript because it gives end-to-end type safety. Also learn asynchronous programming with Promise, async, and await, because every resolver that touches the database will be async.

#REST API, JSON, and Databases

Experience with REST helps you understand the fundamental differences we'll cover in episode 1: over-fetching, under-fetching, and endpoint proliferation. Also understand the JSON format as the data exchange medium, plus the concepts of relational and NoSQL databases. In episode 8 we'll connect GraphQL to PostgreSQL and MongoDB.

#Software and Tools You Need to Prepare

#Node.js and Package Manager

GraphQL in the JavaScript ecosystem requires Node.js version 18 LTS or newer. Check the installed version:

node --version
npm --version

If it's not installed, install Node.js from the official website or via nvm. The package manager can be npm, yarn, or pnpm; this series uses npm because it's the most common. Also make sure Git is installed for version control:

git --version

#Code Editor and API Testing

Use VS Code and install the GraphQL extension (official, from the GraphQL Foundation) for syntax highlighting, autocomplete, and schema validation. For API testing, prepare Apollo Sandbox, which ships with Apollo Server 4, GraphQL Playground, or tools like Postman and Insomnia that support GraphQL. Docker is optional, but we'll use it in episodes 12 and 33 to run databases and additional servers.

#Development Environment Setup

#Project Initialization

Create the project directory and initialize package.json:

mkdir belajar-graphql
cd belajar-graphql
npm init -y

#TypeScript Configuration

Install TypeScript along with the dependencies needed to run code directly in Node:

npm install -D typescript tsx @types/node

Create tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src"
  }
}

The strict: true option enforces type-safe code — a habit that will pay off when we type our resolvers and context in episode 6.

#ESLint, Prettier, and the GraphQL Extension

Install linting and formatting:

npm install -D eslint prettier eslint-config-prettier

Then, inside VS Code, install the GraphQL extension and enable format-on-save. To validate schemas directly from the editor, add graphql-eslint as a linter plugin. We'll use the full configuration starting in episode 3, when the first schema is created.

#Environment Verification

Run the following commands to make sure everything is ready:

node --version
npm --version
git --version
npx tsc --version

All of the commands above must output a version without any error. Once node --version and its friends run normally, your environment is ready for episodes 1 through 50.

#Conclusion

Key takeaways:

• Master HTTP, JavaScript or TypeScript ES6+, JSON, and the basics of asynchronous programming.
• Prepare Node.js 18 LTS or newer along with npm.
• Install the GraphQL extension in VS Code and an API testing tool like Postman or Insomnia.
• Initialize a project with TypeScript, ESLint, and Prettier.
• Verify your environment by checking the Node, npm, Git, and tsc versions.

In the next episode, episode 1, you'll learn about the history, background, and reasons for using GraphQL — from GraphQL's birth at Facebook in 2012, to the REST problems that drove its creation, and a comparison of GraphQL with REST and gRPC. Make sure your environment is ready, because the Learn GraphQL journey has only just begun!