Skip to content

summary.fa.md

Latest commit

 

History

History
121 lines (87 loc) · 13.5 KB

summary.fa.md

File metadata and controls

121 lines (87 loc) · 13.5 KB

خلاصه دوره: GraphQL با Laravel و Vue

این مستند نکات مهم دوره را خلاصه می‌کند. اگر فرصت داری، دیدن خود دوره خیلی پیشنهاد می‌شود.

قبل از شروع

  • من نکات مهم دوره‌های مفید را خلاصه می‌کنم تا بتوانی سریع یاد بگیری و مرور کنی.
  • فقط کافی است روی لینک‌های Ask AI کلیک کنی تا هر مبحثی را که می‌خواهی عمیق‌تر بررسی کنی.

AI-Powered buttons

Teach Me: 5 Years Old | Beginner | Intermediate | Advanced | (reset auto redirect)

Learn Differently: Analogy | Storytelling | Cheatsheet | Mindmap | Flashcards | Practical Projects | Code Examples | Common Mistakes

Check Understanding: Generate Quiz | Interview Me | Refactor Challenge | Assessment Rubric | Next Steps

مبحث ۱: معرفی GraphQL

  • خلاصه: در قسمت اول، با مفهوم کلی GraphQL آشنا می‌شوی و این‌که چطور به‌عنوان یک جایگزین مدرن برای REST API در نظر گرفته می‌شود. این قسمت روی این تمرکز دارد که چطور با queryها دقیقا همان داده‌ای را که لازم داری بگیری؛ با مثال‌هایی از APIهای عمومی مثل GitHub، سرویس‌های آب‌وهوا و پایگاه‌های داده فیلم. همچنین می‌بینی که داشتن یک endpoint واحد و syntax ساده، کار با GraphQL را نسبت به چندین endpoint در REST راحت‌تر می‌کند.
  • مثال: نوشتن یک query برای GitHub تا repositoryهای یک کاربر را همراه با فیلدهایی مثل name و URL برگرداند، و بعد گسترش آن برای گرفتن followers یا bio — همه در یک درخواست؛ تا نشان بدهد GraphQL چطور مشکل over-fetching را حل می‌کند.
  • لینک برای جزئیات بیشتر: Ask AI: Introduction to GraphQL

مبحث ۲: queryهای Lighthouse برای Postها

  • خلاصه: در این قسمت، یک اپ Laravel راه‌اندازی می‌کنیم و از پکیج Lighthouse برای پیاده‌سازی GraphQL در backend استفاده می‌کنیم. ساختن modelها، تعریف relationshipها و نوشتن فایل schema برای typeهایی مثل User و Post توضیح داده می‌شود. با استفاده از directiveها می‌توانیم خیلی راحت داده‌ها را واکشی کنیم، و با GraphQL Playground queryها را (مثلا برای گرفتن postها با pagination و sort) تست می‌کنیم.
  • مثال: تعریف type مربوط به Post با فیلدهایی مثل title و body، اضافه کردن directive‏ ‎@belongsTo برای رابطه user، و نوشتن یک query برای گرفتن تمام postها مرتب‌شده بر اساس تاریخ ساخت، با کمک ‎@paginate و ‎@orderBy.
  • لینک برای جزئیات بیشتر: Ask AI: Lighthouse Queries for Posts

مبحث ۳: mutationهای Lighthouse برای Postها

  • خلاصه: در ادامه queryها، این بخش روی نوشتن mutationها برای ایجاد (create)، ویرایش (update) و حذف (delete) postها تمرکز می‌کند. با directiveهایی مثل ‎@create، ‎@update و ‎@delete کار می‌کنیم و ruleهای validation اضافه می‌کنیم تا ورودی‌هایی مثل title و body مطابق نیازها باشند.
  • مثال: یک mutation به نام createPost که title و body را به‌عنوان ورودی می‌گیرد، از ‎@create و ‎@rules برای validation (مثلا required و min:3) استفاده می‌کند و در نهایت id و جزئیات post جدید را برمی‌گرداند.
  • لینک برای جزئیات بیشتر: Ask AI: Lighthouse Mutations for Posts

مبحث ۴: Resolvers در Lighthouse

  • خلاصه: وقتی directiveهای آماده کافی نباشند، resolverها به ما اجازه می‌دهند منطق دلخواه خودمان را به queryها و mutationها اضافه کنیم. در این قسمت، نحوه ساخت resolver و استفاده از آن برای کارهایی مثل sort سفارشی یا انجام کارهای اضافه هنگام عملیات روی داده‌ها توضیح داده می‌شود.
  • مثال: ساخت یک resolver برای query مربوط به posts که آن‌ها را واکشی کند و بر اساس آخرین پست‌ها sort کند، یا یک resolver برای createPost که بعد از ذخیره پست، یک رویداد مثل ارسال email را لاگ یا اجرا کند.
  • لینک برای جزئیات بیشتر: Ask AI: Lighthouse Resolvers

مبحث ۵: درخواست‌های ساده AJAX به GraphQL

  • خلاصه: در این قسمت، می‌رویم سراغ سمت client و می‌بینیم که در نهایت، GraphQL فقط یک درخواست POST است. با Vue می‌توانی با fetch یا Axios به endpoint مربوط به GraphQL query و mutation بفرستی و JSON برگشتی را مدیریت کنی.
  • مثال: در یک component از Vue، با استفاده از fetch یک POST به /graphql می‌زنیم تا یک query برای گرفتن posts بفرستیم، response را parse می‌کنیم و titleها را در یک لیست نمایش می‌دهیم — مناسب برای جاهایی که نمی‌خواهی سراغ libraryهای کامل‌تر بروی.
  • لینک برای جزئیات بیشتر: Ask AI: Simple AJAX Requests to GraphQL

مبحث ۶: درخواست‌های GraphQL از داخل Laravel

  • خلاصه: اگر بخواهی از یک اپ Laravel دیگر به GraphQL درخواست بفرستی، می‌توانی از HTTP client داخلی Laravel استفاده کنی. در اینجا نحوه فرستادن query به‌صورت JSON و پردازش پاسخ را می‌بینی؛ چیزی که برای ارتباط server-to-server خیلی کاربردی است.
  • مثال: نوشتن کدی مثل
    HTTP::post('/graphql', ['query' => '{ posts { title } }'])->json()
    برای گرفتن و نمایش titleهای postها در یک Blade view.
  • لینک برای جزئیات بیشتر: Ask AI: GraphQL Requests from Laravel

مبحث ۷: Authentication در Lighthouse

  • خلاصه: برای امن کردن GraphQL API از Sanctum جهت auth مبتنی بر token استفاده می‌کنیم. mutationهایی برای login، logout و ثبت‌نام می‌سازیم و با directiveهایی مثل ‎@guard queryهای حساس را محافظت می‌کنیم تا id کاربر لاگین‌شده به‌صورت خودکار تزریق شود.
  • مثال: یک mutation برای login که credentialها را validate می‌کند، با $user->createToken() یک token می‌سازد و آن را برای استفاده در header درخواست‌ها برمی‌گرداند.
  • لینک برای جزئیات بیشتر: Ask AI: Authentication in Lighthouse

مبحث ۸: Authentication در Vue Apollo

  • خلاصه: در سمت Vue، tokenها را بعد از login در localStorage ذخیره می‌کنیم و آن‌ها را در header درخواست‌ها می‌فرستیم. این قسمت flowهای login، ثبت‌نام و logout را به‌صورت دستی پیاده می‌کند، چون در Vue Apollo v4 باید خودمان این بخش‌ها را کنترل کنیم.
  • مثال: بعد از یک mutation موفق برای login، اجرای
    localStorage.setItem('apollo-token', data.login.token)
    و redirect کاربر؛ سپس در تنظیمات ApolloClient از یک تابع مثل getHeaders استفاده می‌کنیم تا header مربوط به Authorization: Bearer اضافه شود.
  • لینک برای جزئیات بیشتر: Ask AI: Authentication in Vue Apollo

مبحث ۹: Authorization در Server

  • خلاصه: برای این‌که هر کاربر فقط بتواند کارهای مجاز خودش را انجام دهد، از directiveهایی مثل ‎@can که به policyهای Laravel متصل هستند استفاده می‌کنیم. این کار update، delete و queryهای مخصوص admin را محافظت می‌کند و جایی که لازم است جزئیات مربوط به کاربر لاگین‌شده را تزریق می‌کند.
  • مثال: در mutation مربوط به updatePost، دستور ‎@can(ability: "update", find: "id") بررسی می‌کند که آیا ‎$user->id با ‎$post->user_id (طبق policy) برابر هست یا نه.
  • لینک برای جزئیات بیشتر: Ask AI: Authorization on the Server

مبحث ۱۰: لینک‌های Authorization در Client

  • خلاصه: در frontend می‌توانیم لینک‌ها و دکمه‌هایی مثل لینک ویرایش را بر اساس وضعیت auth نمایش بدهیم یا مخفی کنیم و کاربران غیرمجاز را از صفحات خاص redirect کنیم. برای این کار معمولا user حال حاضر را با owner داده (مثلا post.user.id) یا نقش او (مثلا isAdmin) مقایسه می‌کنیم.
  • مثال: در template، استفاده از شرطی مثل
    v-if="post.user.id === me.id"
    برای نمایش لینک ویرایش فقط برای صاحب پست؛ و استفاده از یک watcher برای redirect کردن کاربر از صفحه admin اگر !me.isAdmin باشد.
  • لینک برای جزئیات بیشتر: Ask AI: Authorization Links on the Client

درباره خلاصه‌کننده

من Ali Sol هستم، یک Backend Developer. برای آشنایی بیشتر: