• نویسنده
• آگوست 04, 2019

آموزش مقدماتی GraphQL: راهنمای جامع از صفر تا صد برای مبتدیان

آیا تا به حال با APIهایی کار کرده‌اید که داده‌های بسیار زیاد یا بسیار کمی به شما می‌دهند؟ آیا از مدیریت ده‌ها Endpoint مختلف در یک پروژه خسته شده‌اید؟ اگر پاسخ شما مثبت است، زمان آن رسیده که با GraphQL آشنا شوید. این تکنولوژی انقلابی که توسط فیسبوک توسعه یافته، پاسخی مدرن به محدودیت‌های REST API است. در این آموزش مقدماتی GraphQL، ما شما را از صفر با مفاهیم اصلی آشنا می‌کنیم و نشان می‌دههیم چرا این تکنولوژی به سرعت در حال تبدیل شدن به استاندارد جدیدی برای توسعه API است. 💡

GraphQL چیست؟ نگاهی ساده به یک تکنولوژی قدرتمند

تصور کنید به یک رستوران سلف‌سرویس رفته‌اید. شما دقیقاً همان غذاهایی را که دوست دارید در بشقاب خود می‌گذارید؛ نه بیشتر و نه کمتر. GraphQL دقیقاً همین کار را با داده‌ها انجام می‌دهد. GraphQL یک زبان کوئری (Query Language) برای APIها و یک محیط اجرایی سمت سرور است.

به عبارت ساده‌تر، GraphQL به کلاینت (مثلاً اپلیکیشن موبایل شما) اجازه می‌دهد تا ساختار دقیق داده‌های مورد نیاز خود را درخواست کند. در نتیجه، سرور دقیقاً همان داده‌ها را در یک پاسخ واحد برمی‌گرداند. این رویکرد، مشکلات رایج در معماری REST مانند واکشی بیش از حد (Over-fetching) یا واکشی کمتر از حد (Under-fetching) را به طور کامل حل می‌کند.

چرا REST دیگر کافی نبود؟ مشکلات رویکرد سنتی

برای سال‌ها، REST معماری غالب برای طراحی API بود. اما با پیچیده‌تر شدن اپلیکیشن‌ها، محدودیت‌های آن نیز آشکارتر شد. مهم‌ترین این مشکلات عبارتند از:

• واکشی بیش از حد (Over-fetching): فرض کنید فقط به نام کاربران نیاز دارید، اما Endpoint مربوط به کاربران، تمام اطلاعات آن‌ها (مانند آدرس، سن، ایمیل و…) را برمی‌گرداند. این یعنی شما پهنای باند و منابع را برای داده‌هایی که نیاز ندارید هدر داده‌اید.
• واکشی کمتر از حد (Under-fetching): گاهی برای دریافت تمام اطلاعات مورد نیاز، باید چندین درخواست به Endpointهای مختلف ارسال کنید. مثلاً یک درخواست برای اطلاعات کاربر و یک درخواست دیگر برای لیست پست‌های او. این کار باعث افزایش تأخیر و پیچیدگی در سمت کلاینت می‌شود.
• تعدد Endpointها: در REST، برای هر منبع (Resource) معمولاً یک Endpoint جدید ایجاد می‌شود (مثلاً /users, /posts, /comments). با بزرگ شدن پروژه، مدیریت این تعداد Endpoint بسیار دشوار می‌شود.

GraphQL با ارائه یک Endpoint واحد، تمام این مشکلات را حل می‌کند و کنترل کامل داده‌ها را به دست کلاینت می‌دهد.

مزیت‌های کلیدی GraphQL که آن را متمایز می‌کند 🚀

استفاده از GraphQL مزایای فوق‌العاده‌ای برای تیم‌های توسعه به همراه دارد. در ادامه به مهم‌ترین آن‌ها اشاره می‌کنیم. این مزایا دلیل اصلی محبوبیت روزافزون آن هستند.

• 🎯 دریافت دقیق داده‌ها: شما دقیقاً همان چیزی را که درخواست می‌کنید، دریافت می‌کنید. این ویژگی باعث کاهش حجم داده‌های منتقل‌شده و افزایش چشمگیر سرعت اپلیکیشن‌ها، به‌خصوص در شبکه‌های ضعیف موبایل، می‌شود.
• 🔗 یک Endpoint برای همه چیز: به جای ده‌ها URL مختلف، شما تنها با یک Endpoint واحد (مثلاً /graphql) سروکار دارید. این سادگی، مدیریت و نگهداری API را فوق‌العاده آسان می‌کند.
• نوع‌بندی قوی (Strongly Typed): هر فیلد در API شما توسط یک سیستم نوع‌بندی قوی تعریف می‌شود. این ویژگی از بروز بسیاری از خطاها در زمان اجرا جلوگیری کرده و توسعه را برای برنامه‌نویسان قابل پیش‌بینی‌تر می‌کند.
• ⚡ توسعه سریع‌تر در فرانت‌اند: تیم‌های فرانت‌اند دیگر منتظر آماده شدن Endpointهای جدید توسط تیم بک‌اند نمی‌مانند. آن‌ها می‌توانند کوئری‌های جدید را برای دریافت داده‌های مورد نیاز خود بنویسند و به سرعت قابلیت‌های جدید را پیاده‌سازی کنند.
• 📝 خودمستندسازی (Self-documenting): ساختار GraphQL به گونه‌ای است که API به صورت خودکار مستند می‌شود. توسعه‌دهندگان می‌توانند با ابزارهای موجود، به راحتی ساختار داده‌ها و کوئری‌های ممکن را مشاهده کنند.

شروع کار: آموزش مقدماتی GraphQL در ۵ گام ساده

حالا که با مفاهیم تئوری آشنا شدیم، بیایید یک سرور GraphQL ساده راه‌اندازی کنیم. ما از Graphpack استفاده می‌کنیم که یک ابزار عالی برای شروع بدون نیاز به هیچ‌گونه پیکربندی است. ✅

گام ۱: آماده‌سازی محیط توسعه

ابتدا یک پوشه جدید برای پروژه خود بسازید و با استفاده از ترمینال وارد آن شوید. سپس با دستور زیر یک فایل package.json ایجاد کنید.

mkdir graphql-server
cd graphql-server
npm init -y

گام ۲: نصب Graphpack برای راه‌اندازی سریع

حالا تنها وابستگی مورد نیاز، یعنی Graphpack را نصب می‌کنیم. این پکیج تمام پیچیدگی‌های راه‌اندازی سرور را از ما پنهان می‌کند.

npm install --save-dev graphpack

سپس فایل package.json را باز کرده و بخش scripts را به شکل زیر ویرایش کنید:

"scripts": {
  "dev": "graphpack"
}

گام ۳: تعریف ساختار داده (Schema)

یک پوشه به نام src بسازید. درون آن، فایلی به نام schema.graphql ایجاد کنید. این فایل ساختار API شما را تعریف می‌کند.

# src/schema.graphql
type Query {
  hello: String
}

گام ۴: پیاده‌سازی منطق (Resolvers)

اکنون باید به GraphQL بگوییم که چگونه به کوئری hello پاسخ دهد. فایلی به نام resolvers.js در پوشه src ایجاد کنید. این فایل‌ها منطق دریافت داده‌ها را مشخص می‌کنند.

// src/resolvers.js
const resolvers = {
  Query: {
    hello: () => "Hello World! Welcome to GraphQL!"
  }
};

export default resolvers;

گام ۵: اجرای سرور

کار تمام است! حالا در ترمینال خود دستور زیر را اجرا کنید:

npm run dev

با اجرای این دستور، سرور شما روی آدرس http://localhost:4000 اجرا می‌شود. با باز کردن این آدرس در مرورگر، می‌توانید اولین کوئری خود را ارسال کنید!

ثبت‌نام و استفاده از سرویس‌های API

بسیاری از سرویس‌های مدرن از GraphQL برای ارائه API به کاربران استفاده می‌کنند. برای مثال، اگر بخواهید از یک پنل API مانند api.ir استفاده کنید، مراحل معمولاً به شرح زیر است:

1. وارد لینک p.api.ir شوید.
2. یک حساب کاربری جدید ایجاد کنید.
3. از داشبورد خود، کلید API (API Key) منحصربه‌فردتان را دریافت کنید.
4. این کلید را در هدر درخواست‌های خود قرار دهید تا هویت شما تایید شود.

آینده API ها با GraphQL روشن است

در این آموزش مقدماتی GraphQL، دیدیم که این تکنولوژی چگونه مشکلات اساسی معماری REST را حل می‌کند. با ارائه کنترل کامل به کلاینت، کاهش ترافیک شبکه و ساده‌سازی فرآیند توسعه، GraphQL به یک ابزار ضروری برای ساخت اپلیکیشن‌های مدرن و کارآمد تبدیل شده است. اگر به دنبال بهینه‌سازی عملکرد و افزایش سرعت توسعه پروژه‌های خود هستید، یادگیری GraphQL یک سرمایه‌گذاری هوشمندانه برای آینده شماست.

نظر شما چیست؟ آیا تجربه کار با GraphQL را داشته‌اید یا قصد دارید یادگیری آن را شروع کنید؟ دیدگاه‌ها و سوالات خود را در بخش نظرات با ما در میان بگذارید! 👇

• برچسب ها:
• GraphQl
• آموزش مقدماتی GraphQL