آموزش (2025) GraphQL با Angular برای مبتدیان - آخرین آپدیت

سرفصل ها و درس ها

Introduction of GraphQL

• GraphQL چیست؟ What is GraphQL?

• مقایسه GraphQL و REST GraphQL vs REST

راه‌اندازی Setup

• نصب Node.js Installing Node.js

• رفع خطای "File ... cannot be loaded..." در Node.js Node.js "File ... cannot be loaded..." fix

• نصب Angular CLI Installing Angular CLI

• ایجاد یک پروژه جدید Angular Creating a new Angular project

• IDE / ویرایشگر کد IDE / code editor

• اولین اجرای پروژه First run of the project

• راه‌اندازی یک سرور GraphQL جعلی با json-graphql-server Setting up a fake GraphQL server with json-graphql-server

• مقدمه‌ای بر استفاده از json-graphql-server Intro to using json-graphql-server

• نصب primeng در پروژه Angular Installing primeng in Angular project

• افزودن فایل‌های محیط با URL به API Adding environment files with url to api

مبانی GraphQL GraphQL basics

• Schema (اسکیما) در GraphQL GraphQL schema

• توضیح انواع داده، کوئری‌ها و جهش‌ها (queries and mutations) Types, queries and mutations explained

ادغام GraphQL با Angular Integrating GraphQL with Angular

• اولین کوئری با استفاده از HttpClient در Angular First query using HttpClient in Agular

• نصب کلاینت Apollo Angular Installing Apollo Angular client

• توضیح فایل graphql.module.ts Explanation of graphql.module.ts

کوئری‌ها، صفحه‌بندی و قطعه‌ها (fragments) با apollo-angular Queries, pagination and fragments with apollo-angular

• اولین کوئری با apollo-angular (watchQuery) First query with apollo-angular (watchQuery)

• استفاده از p-table برای نمایش همه پست‌ها Using p-table to show all posts

• نکته‌ای سریع درباره وضعیت بارگذاری (loading state) Quick note about loading state

• مدیریت وضعیت بارگذاری کوئری Handling query loading state

• ویژگی loading با استفاده از useInitialLoading تنظیم شده روی true Loading property with useInitialLoading set to true

• متد query در مقابل watchQuery query method vs watchQuery

• استفاده از query به جای watchQuery Using query instead of watchQuery

• مدیریت QueryRef و subscription در watchQuery Managing watchQuery QueryRef and subscription

• Polling (اجرای دوره‌ای کوئری) Polling (periodically execution of query)

• شروع/توقف برنامه‌ریزی شده Polling Programmatically starting/stoping polling

• Refetching (دوباره فراخوانی) Refetching

• فراخوانی یک پست Fetching single post

• متغیرها در watchQuery/query Variables in watchQuery/query

• Type کردن کوئری Query typing

• Type کردن QueryRef QueryRef typing

• Refactoring (بازسازی) کوئری‌ها و انواع Refactoring queries and types

• توضیح قطعه‌ها (fragments) Fragments explanation

• ایجاد قطعه (fragment) در پروژه Creating fragment in project

• افزودن هدرها به درخواست Adding headers to request

• تنظیم withCredentials Setting withCredentials

• فراخوانی تعداد کل پست‌ها در پایگاه داده Fetching count of all posts in database

• صفحه‌بندی - روش اشتباه Pagination - wrong way

• صفحه‌بندی - راه‌حل بهتر Pagination - better solution

مدیریت خطا، کش (cache) Error handling, cache

• افزودن کامپوننت primeNG toast به پروژه Adding primeNG toast component to project

• Error policies (سیاست‌های خطا) Error policies

• مدیریت‌کننده خطای سراسری (Global error handler) به عنوان apollo link Global error handler as apollo link

• توضیح کش (cache) Cache explanation

• fetch-policy fetch-policy

جهش‌ها (Mutations) Mutations

• جهش‌ها (Mutations) با apollo-angular Mutations with apollo-angular

• حذف پست Deleting post

• حذف پست - تغییر دستی کش (cache) Deleting post - manually changing cache

• به‌روزرسانی و ایجاد پست - آماده‌سازی جهش‌ها (mutations) Updating and creating post - preparing mutations

• به‌روزرسانی پست Updating post

• ایجاد پست Creating post

• useMutationLoading useMutationLoading

اشتراک‌ها (Subscriptions) Subscriptions

• توضیح اشتراک‌ها (Subscriptions) Subscriptions explanation

• سرور mock Express Express mock server

• پیکربندی اشتراک‌ها (subscriptions) در Angular Configurating subscriptions in Agular

• ایجاد subscription Making subscripton