آموزش GraphQL با React: راهنمای کامل توسعه دهندگان

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

چرا GraphQL؟ Why GraphQL?

• معرفی Introduction

• منابع دوره Course Resources

• به انجمن ما بپیوندید! Join Our Community!

پرایمر مسیریابی REST-ful A REST-ful Routing Primer

• بررسی مسیریابی REST-ful Review of REST-ful Routing

• کاستی های RESTful Routing Shortcomings of RESTful Routing

در GraphQL On To GraphQL

• GraphQL چیست؟ What is GraphQL?

• کار با GraphQL Working with GraphQL

• ثبت GraphQL با Express Registering GraphQL with Express

• طرحواره های GraphQL GraphQL Schemas

• نوشتن طرحواره GraphQL Writing a GraphQL Schema

• پرس و جوهای ریشه Root Queries

• حل با داده ها Resolving with Data

• ابزار GraphiQL The GraphiQL Tool

• منبع داده واقعی A Realistic Data Source

• توابع حل همگام Async Resolve Functions

• Nodemon Hookup Nodemon Hookup

• تعاریف شرکت Company Definitions

واکشی داده ها با کوئری ها Fetching Data with Queries

• پرس و جوهای تودرتو Nested Queries

• بیشتر در مورد جستجوهای تودرتو More on Nested Queries

• یک نفس سریع A Quick Breather

• چندین نقطه ورودی RootQuery Multiple RootQuery Entry Points

• روابط دو طرفه Bidirectional Relations

• اطلاعات بیشتر در مورد روابط دو طرفه More on Bidirectional Relations

• حل و فصل مراجع دایره ای Resolving Circular References

• قطعات پرس و جو Query Fragments

• مقدمه ای بر جهش ها Introduction to Mutations

• فیلدهای NonNull و جهش NonNull Fields and Mutations

• این کار را خودتان انجام دهید - جهش را حذف کنید! Do It Yourself - Delete Mutation!

• این کار را خودتان انجام دهید - جهش را ویرایش کنید! Do It Yourself - Edit Mutation!

اکوسیستم GraphQL The GraphQL Ecosystem

• مشتریان GraphQL - آپولو در مقابل رله GraphQL Clients - Apollo vs Relay

• Sidenote - سرور آپولو در مقابل سرور GraphQL Sidenote - Apollo Server vs GraphQL Server

Clientside GraphQL Clientside GraphQL

• برنامه بعدی The Next App

• راه اندازی بسته شروع Starter Pack Walkthrough

• راه اندازی و پیکربندی MongoDB Atlas MongoDB Atlas Setup and Configuration

• راه اندازی MongoLab MongoLab Setup

• کار از طریق طرحواره Working Through the Schema

• راه اندازی آپولو کلاینت Apollo Client Setup

• React Component Design React Component Design

• جستارهای GQL در React GQL Queries in React

• پیوند کوئری ها با کامپوننت ها Bonding Queries with Components

Gotchas با Queries در React Gotchas with Queries in React

• رسیدگی به پرس و جوهای معلق Handling Pending Queries

• رفع اخطارهای کلیدی Fixing Key Warnings

• بررسی معماری Architecture Review

• اضافه شدن React Router Adding React Router

• ایجاد یک آهنگ Creating a Song

جهش های پیشانی Frontend Mutations

• جهش در React Mutations in React

• پارامترهای پرس و جو Query Params

• تعریف متغیرهای کوئری در React Defining Query Variables in React

• پیمایش در جهش موفق Navigating on Successful Mutation

• عیب یابی واکشی لیست Troubleshooting List Fetching

• واکشی مجدد پرس و جوها Refetching Queries

• حذف توسط جهش Deletion by Mutation

• ارتباط جهش با یک جزء Associating Mutations with a Component

• فراخوانی جهش های حذف Invoking Delete Mutations

ذخیره خودکار داده ها Automatic Data Caching

• واکشی مجدد یک پرس و جو Refetching a Query

• یک تنفس سریع CSS A Quick CSS Breather

• نمایش یک آهنگ خاص Showing a Particular Song

• واکشی سوابق فردی Fetching Individual Records

React Router + GraphQL React Router + GraphQL

• ادغام React Router با GraphQL Integrating React Router with GraphQL

• در حال تماشای داده ها Watching for Data

• پیمایش بین صفحه نمایش Navigating Between Screens

• فرم ایجاد غزل Lyric Creation Form

• جهش CreateLyric The CreateLyric Mutation

• ارسال جهش Submitting Mutations

• نمایش فهرستی از اشعار Showing a List of Lyrics

• تقویت کوئری ها Enhancing Queries

• شناسایی سوابق Identifying Records

• ذخیره سازی با DataIdFromObject Caching with DataIdFromObject

• نماد شست بالا Thumbs Up Icon

اطلاعات بیشتر در مورد جهش های سمت مشتری More on Client Side Mutations

• جهش شبیه The Like Mutation

• نمایش لایک با متن ترانه Showing Likes with Lyrics

• واکشی لایک Fetching Likes

• به‌روزرسانی‌های خوش‌بینانه رابط کاربری Optimistic UI Updates

• رسیدگی به پاسخ های خوش بینانه Handling Optimistic Responses

• رفع اشکال سریع A Quick Bugfix

• جمع بندی برنامه Application Wrapup

ساختن از صفر (بیشتر). Building From (Mostly) Scratch

• نمای کلی برنامه App Overview

• چالش های برنامه App Challenges

• راه اندازی دیگ بخار Boilerplate Setup

• رویکرد احراز هویت Authentication Approach

• راه اندازی MLab MLab Setup

• نوع کاربر The User Type

• جهش ثبت نام The Signup Mutation

• تفویض اختیار به سرویس Auth Delegating to the Auth Service

• تست ثبت نام Testing Signup

• جهش خروج The Logout Mutation

• جهش ورود The Login Mutation

• بررسی وضعیت احراز هویت Checking Authentication Status

سمت مشتری متحرک Moving Client Side

• راه اندازی سمت مشتری Client Side Setup

• Root Route با React Router Root Routes with React Router

• تعیین کاربر فعلی Figuring Out the Current User

• از جمله کوکی ها با درخواست های GraphQL Including Cookies with GraphQL Requests

• وضعیت احراز هویت Authentication State

• دکمه های ورود و خروج Login and Logout Buttons

• مدیریت جهش خروج Handling the Logout Mutation

• رندرهای خودکار اجزا Automatic Component Rerenders

• طراحی فرم ورود Login Form Design

• فرم احراز هویت The Auth Form

• وارد کردن جهش ورود Importing the Login Mutation

• ارسال فرم احراز هویت Submitting the Auth Form

• تازه کردن کاربر فعلی Refreshing the Current User

• مدیریت خطا با GraphQL Error Handling with GraphQL

• اطلاعات بیشتر در مورد مدیریت خطا More on Error Handling

• جهش ثبت نام The Signup Mutation

• اطلاعات بیشتر در مورد جهش ثبت نام More on the Signup Mutation

رسیدگی به خطاها با ظرافت Handling Errors Gracefully

• رسیدگی به خطاهای مربوط به ثبت نام Handling Errors Around Signup

• شرایط مسابقه - یک گوچای بزرگ Race Conditions - A Big Gotcha

• جریان تأیید نهایی Finalized Auth Flow

• اصلاح فرآیند ورود Fixing the Login Process

• ثبت نام را نیز رفع کنید! Fix Signup Too!

• مسیر داشبورد The Dashboard Route

• نیاز به HOC The Need for a HOC

• شروع به کار با RequireAuth Getting Started with RequireAuth

• درخواست RequireAuth Applying RequireAuth

• رفع RequireAuth Fixing RequireAuth

موارد اضافی Extras

• جایزه! Bonus!