As web applications become increasingly complex, traditional RESTful APIs struggle to keep pace. This is where GraphQL comes into play—a query language for APIs that provides a flexible and powerful alternative. In this guide, we will explore how to boost API development using GraphQL, Node.js, Express, and TypeScript. We will cover everything from setting up a basic project.
Why is this stack so popular?
The GraphQL with Node.js, Express, and TypeScript stack is popular because:
GraphQL: Offers a flexible and efficient way to query and manipulate data, reducing over-fetching and under-fetching issues.
Node.js: Provides a non-blocking, event-driven architecture that scales well for handling concurrent requests.
Express: A minimal and flexible Node.js web application framework that simplifies API development.
TypeScript: Adds static typing to JavaScript, catching errors during development and improving code maintainability, making it suitable for larger codebases.
Let’s get started with implementation !!!
Step:- 1. Initialize the project
# Open terminal and Create a new directory for your project
mkdir graphql-api
cd graphql-api
# Initialize a new Node.js project
npm init -y
Step:- 2. Install Dependencies
# Install TypeScript and related dependencies
npm install typescript ts-node @types/node --save-dev
# Initialize TypeScript configuration
npx tsc --init
# Install GraphQL dependencies
npm install graphql express express-graphql --save
# Install nodemon for development
npm install nodemon --save-dev
Step:- 3. Configuration for Strict Typing
In the TypeScript configuration file (`tsconfig.json`), enabling strict typing is crucial for catching potential issues during development and reducing the chances of runtime errors. By setting `”strict”: true`, we ensure that our GraphQL schema, queries, and resolvers adhere to a strict typing discipline.
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
Step:-4. Create the structure for the project
Create a src directory and after create an index.ts file.
mkdir src
touch src/index.ts
Step:-5. Setting Up a GraphQL Schema
Create a schema.graphql in src folder.
We start by defining a simple GraphQL schema in the `src/schema.graphql` file. This example includes a basic query.
type Query {
hello: String
}
Step:-6. Implement Resolver
Create a file resolvers.ts in the src folder.
A resolver is the key architectural component of that connects GraphQL fields, queries, mutations, and subscripts to their respective data sources and micro-services.
const resolvers = {
Query: {
hello: () => "Hello, GraphQL with TypeScript",
},
};
export default resolvers;
Step:-7. Setup Express Server
Create a index.ts file in src folder, and write this code in that file to setup the server with express-graphql.
import express from 'express';
import { graphqlHTTP } from 'express-graphql';
import { buildSchema } from 'graphql';
import resolvers from './resolvers';
const app = express();
const PORT = 3000;
const schema = buildSchema(`
${require('fs').readFileSync(require('path').join(__dirname, 'schema.graphql'), 'utf8')}
`);
app.use('/graphql', graphqlHTTP({
schema,
rootValue: resolvers,
graphiql: true,
}));
app.listen(PORT, () => {
console.log(`Server is running at http://localhost:${PORT}/graphql`);
});
Step:-8. Update package.json scripts
Update the “scripts” section in package.json:
{
"name": "blog",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node dist/server.js",
"dev": "nodemon src/server.ts"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/node": "^20.10.5",
"ts-node": "^10.9.2",
"typescript": "^5.3.3"
},
"dependencies": {
"express": "^4.18.2",
"express-graphql": "^0.12.0",
"graphql": "^16.8.1"
}
}
Step:-9. Run the application
The application is running in development mode on port 3000.
# Run in development mode
npm run dev
:- Visit http://localhost:3000/graphql in your browser to access the GraphQL playground.
Congratulations! You’ve set up a basic GraphQL API using Node.js, Express, TypeScript, and GraphQL. You can now expand and enhance your API by adding more types, queries, and mutations as needed.
Use Cases and Expanding Functionality
To showcase the power of GraphQL, expand the example by introducing more complex queries, mutations, and resolvers. Demonstrate how GraphQL excels in handling nested data and relationships, promoting a more efficient and organized API design.
Conclusion
To summarise, using GraphQL, TypeScript, Node.js, and Express together has many benefits for creating effective and reliable GraphQL APIs. These technologies help improve developer experiences by providing type safety, increased usability, and better performance. The GraphQL, Node.js, Express, and TypeScript stack combines the efficiency of GraphQL for data querying, the scalability of Node.js, the simplicity of Express for API development, and the benefits of TypeScript’s static typing. This modern and versatile stack allows developers to create high-performance and maintainable APIs with ease.
