راه اندازی سرور GraphQL با ExpressJS

راه اندازی سرور GraphQL با ExpressJS

راه اندازی سرور GraphQL با ExpressJS

در جلسه ی قبل با شیوه ی ساخت یک سرور ساده با nodeJS آشنا شدیم. در این جلسه قصد داریم تا یک سرور  GraphQL را با فریمورک محبوب ExpressJS ایجاد کنیم. برای درک بهتر مطالب پیشنهاد می شود تا با ExpressJS کمی آشنایی داشته باشید. بیایید بدون اتلاف وقت و مقدمه چینی پروژه ی خود را ایجاد کنیم!

ساخت پروژه:

برای ساخت پروژه دستور زیر را در ترمینال اجرا کنید:

npm init

برای ایجاد سرور GraphQL با ExpressJS، باید چند پکیج را به پروژه اضافه کنیم. برای اضافه کردن این پکیج ها دستور زیر را اجرا کنید:

npm i express express-graphql graphql 

همچنین برای تجربه ی بهتر در زمان توسعه ی پروژه پیشنهاد می شود از nodemon به عنوان devDependency استفاده کنید. nodemon یک ابزار زمان توسعه برای راه اندازی مجدد برنامه پس از تغییر فایل های پروژه است. برای این کار دستور زیر را اجرا کنید:

npm i -D nodemon

حال فایل package.json پروژه ی خود را باز کنید و script های start و dev را به آن اضافه کنید:

{
  "name": "gql-course",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "author": "SokanAcademy",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "express-graphql": "^0.12.0",
    "graphql": "^15.4.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.6"
  }
}

ایجاد سرور:

برای این پروژه از ساختار پیشنهادی زیر استفاده می کنیم:

در این ساختار پوشه ای به نام graphql وجود دارد که در این پوشه تمامی فایل های مربوط به graphql را قرار می دهیم. این کار باعث ایجاد یک ماژول کاملا مجزا از اپلیکیشن ما خواهد شد و به تمیز بودن کد ما کمک خواهد کرد. دیگر فایل ها و پوشه های موجود در پوشه graphql در ادامه، تشریح خواهند شد.

برای شروع کار فایل server.js را ایجاد و باز کنید. سپس کدهای زیر را در آن قرار دهید:

const express = require('express');
const graphqlHTTPHandler = require('./graphql');

const app = express();

app.use('/graphql', graphqlHTTPHandler);

app.listen(3000, () => {
  console.log('App Started on Port 3000');
});

 با این کار یک سرور ExpressJS روی پورت 3000 اجرا می شود. اگر به کد دقت کرده باشید در قسمتی از کد روی endpoint به نام /graphql ، یک middleware برای GraphQL استفاده شده است. این middleware در فایل index.js در پوشه ی graphql تعریف می شود. برای تعریف آن فایل index.js در پوشه ی graphql را ایجاد و باز کنید. سپس کدهای زیر را در آن قرار دهید:

const { graphqlHTTP } = require('express-graphql');
const Schema = require('../graphql/schema');

module.exports = graphqlHTTP({
  schema: Schema,
  graphiql: true,
});

در قطعه کد بالا، از پکیج express-graphql و تابع graphqlHTTP برای ساخت یک سرور graphql استفاده شده است. این تابع یک object به عنوان options می پذیرد که در آن بایستی schema تعریف شود. برای مرتب بودن کد، schema را در فایل schema.js تعریف می کنیم. همچنین برای ایجاد کلاینت graphiql از property به نام graphiql می توان استفاده کرد. با این کار با باز کردن مسیر /graphql این کلاینت اجرا می شود.

حال فایل schema.js را ساخته و باز کنید. سپس کدهای زیر را در آن قرار دهید:

const { GraphQLSchema, GraphQLObjectType } = require('graphql');
const HelloQuery = require('./queries/Hello');

const Schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'RootQuery',
    fields: {
      hello: HelloQuery,
      // more queries
    },
  }),
});

module.exports = Schema;

در قطعه کد بالا، به کمک پکیج graphql و تابع GraphQLSchema، یک schema برای سرویس خود ایجاد کردیم. این schema شامل تنها یک کوئری به نام hello است. این کوئری را در پوشه ی queries و در فایل hello تعریف می کنیم.

فایل hello.js را در پوشه ی queries ایجاد کرده و سپس کدهای زیر را در آن قرار دهید:

const { GraphQLString } = require('graphql');
const HelloQuery = {
  type: GraphQLString,
  resolve() {
    return 'hello world';
  },
};

module.exports = HelloQuery;

در این قطعه کد، کوئری hello تعریف شده است. هر کوئری یک object است که باید دارای مقدار type و متد resolve باشد. type تعریف شده می تواند یکی از type های scalar یا یک type شخصی سازی شده باشد. متد resolve نیز مقداری که در نتیجه کوئری ارسال می شود را بر می گرداند.

اجرای پروژه:

حال برای اجرای پروژه کافیست دستور زیر را اجرا کنید:

npm start

قابل بیان است که برای اجرا در حالت توسعه (development)، می توانید از دستور زیر به جای دستور بالا استفاده کنید:

npm run dev

اگر مرورگر خود را باز کرده و وارد مسیر localhost:3000/graphql شوید، باید کلاینت graphiql را مشاهده کنید. در قسمت کوئری، کوئری زیر را اجرا کنید و نتیجه آن را مشاهده نمایید:

query GetData {
  hello
}

باید نتیجه به صورت زیر نمایش داده شود:

بسیار عالی! در این جلسه سعی کردیم تا با شیوه ی ایجاد یک سرور graphql با کمک ExpressJS آشنایی پیدا کنیم. در جلسه ی بعد با شیوه ی پیاده سازی کوئری های پیچیده تر در این سرور آشنا خواهیم شد. 

با ما همراه باشید.

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: