آموزش کار با React و GraphQL

GraphQL راهی برای ارسال داده از طریق HTTP است و غالباً به عنوان روشی جدید برای تفکر درباره API ها ارائه می شود و به عنوان جانشین REST یا Representational State Transfer مشاهده می شود. در واقع GraphQL قادر به رفع نقایص عمده REST است.

GraphQL می تواند در هر برنامه، برنامه وب یا اپ موبایل استفاده شود. در این آموزش شما می آموزید که چگونه از GraphQL در یک برنامه وب React استفاده کنید. برای استفاده از GraphQL در پروژه React از کتابخانه React Apollo استفاده خواهیم کرد.


راه اندازی پروژه

برای شروع کار ابتدا باید یک پروژه جدید React راه اندازی کنیم. ساده ترین راه برای انجام این کار استفاده از create-react-app است. این اسکریپت یک پروژه جدید React با پیکربندی zero ایجاد می کند. وب سایت این پروژه را می توان در https://github.com/facebook/create-react-app یافت.

برای استفاده از create-react-app، شما باید مطمئن شوید که Node.js روی سیستم شما نصب شده است. قبل از استفاده نیازی به نصب create-react-app ندارید. می توان از دستور Node.js npx به روش زیر استفاده کرد:

$ npx create-react-app react-graphql
$ cd react-graphql
$ npm start

 در حال شروع یک پروژه جدید React در پوشه پروژه جدید react-graphql هستیم. با استفاده از دستور npm start وب سرور توسعه live-reloading شروع می شود و می توان به خروجی پروژه React پیش فرض در مرورگر دسترسی پیدا کرد:

نصب وابستگی ها

مرحله بعدی نصب وابستگی های مورد نیاز است.

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

  • apollo-boost: پکیج شامل هر آنچه برای راه اندازی Apollo Client نیاز دارید.
  • react-apollo: لایه View برای React
  • graphql-tag: برای تحلیل کوئری GraphQL ضروری است
  • graphql: برای تحلیل کوئری های GraphQL 

نصب این وابستگی ها با استفاده از دستور NPM زیر انجام می شود:

 

$ npm install apollo-boost react-apollo graphql-tag graphql

 

بررسی ساختار اولیه پروژه

با نصب این وابستگی ها ، آماده هستیم تا نگاهی به ساختار اولیه پروژه بیندازیم:

قسمتهای مهم پروژه در پوشه src قرار دارد. نقطه اصلی ورود به برنامه React را می توان در index.js یافت. کد موجود در این فایل اطمینان حاصل می کند که کامپوننت App به DOM element با ID root ارائه شده است.

پیاده سازی App component را می توان در App.js پیدا کرد.

ایجاد نمونه ای از ApolloClient

برای اینکه بتوانیم از برنامه React خود به سرویس GraphQL دسترسی پیدا کنیم ، ابتدا باید نمونه ای از ApolloClient را ایجاد کنیم. این کار با اضافه کردن کد زیر در App.js انجام می شود:

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "[Insert URI of GraphQL endpoint]"
});

ابتدا ApolloClient از کتابخانه apollo-boost ایمپورت می شود. نمونه جدیدی از ApolloClient در client ایجاد و ذخیره می شود. برای ایجاد یک نمونه جدید از ApolloClient، باید یک configuration object را به سازنده ارسال کنید. این object باید شامل uri property باشد. مقدار این property باید جایگزین URI GraphQL endpoint شود که باید به آن دسترسی داشته باشید.

ایجاد یک GraphQL Endpoint

برای ایجاد یک Apollo endpoint که بتواند به عنوان back-end برای برنامه React ما استفاده شود ، می توانید گزینه های مختلفی را انتخاب کنید:

  • از Apollo Launchpad برای ایجاد یک سرور GraphQL بصورت آنلاین استفاده کنید. Launchpad مثل یک زمین بازی سرور GraphQL در مرورگر است. شما می توانید یک GraphQL schema را در JavaScript بنویسید و یک GraphQL endpoint بدون سرور و publicly-accessible ایجاد کنید.
  • از یک Apollo Launchpad پیکربندی شده مانند https://launchpad.graphql.com/vm8mjvrnv3 استفاده کنید. این Launchpad یک GraphQL Online Courses API را نشان می دهد که ما برای مراحل پیاده سازی زیر از آن استفاده خواهیم کرد. endpoint مربوط به آن Launchpad این https://vm8mjvrnv3.lp.gql.zone/graphql است ، بنابراین لازم است مقدار خاصیت uri روی آن مقدار تنظیم شود:
import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://vm8mjvrnv3.lp.gql.zone/graphql"
});

اتصال ApolloClient به برنامه React 

با ایجاد اتصال به GraphQL endpoint با استفاده از ApolloClient ، اکنون باید نمونه ApolloClient را به برنامه React متصل کنیم. برای انجام این کار ،  مطمئن شوید که خطوط کد زیر را در App.js اضافه کردید:

ابتدا ApolloProvide از کتابخانه react-apollo ایمپورت می شود. سپس این عنصر در component’s JSX code استفاده می شود و شامل template code است که برای رندر component استفاده می شود.

استفاده از Query Component برای درخواست داده

در فولدر src یک فایل جدید Courses.js ایجاد کنید و کد زیر را وارد کنید:

این یک پیاده سازی کامپوننت Courses است. برای بازیابی داده ها از GraphQL، این کامپوننت از کامپوننت دیگری از کتابخانه React Apollo استفاده می کند: Query. کامپوننت Query استفاده از کوئری GraphQL را به طور مستقیم در کد JSX بسیار آسان می کند. بعلاوه، کامپوننت Query شامل یک متود callback است که پس از اجرای کوئری GraphQL فراخوانی می شود.

در اینجا ما از متود map مربوط به JavaScript برای تولید خروجی HTML برای هر رکورد course که در data.allCourses موجود است استفاده می کنیم.

افزودن کامپوننت Course

تاکنون خروجی دوره ها را در کامپوننت Courses انجام داده ایم. در مرحله بعدی، یک کامپوننت جدید را به پروژه خود اضافه می کنیم: Course. این کامپوننت باید حاوی کدی باشد که برای تولید یک دوره واحد مورد نیاز است. وقتی که این کامپوننت ایجاد شد، می تواند در کامپوننت Courses هم استفاده شود.

ابتدا فایل Course.js را به پروژه اضافه می کنیم و سپس کد زیر را در آن وارد می کنیم:

اجرای این کامپوننت کاملاً ساده است. دوره فعلی به عنوان property به کامپوننت Course تحویل داده می شود و از طریق props.course در دسترس است.

برای استفاده از کامپوننت Course در کامپوننت Courses، ابتدا باید مطمئن شویم که در فایل Courses.js وارد (import) شده است:

import Course from './Course';

اکنون می توان از این کامپوننت برای خروجی از هر دوره در داخل تابع callback که به فراخوان تابع map منتقل می شود استفاده کرد:

اضافه کردن Bootstrap

از آنجا که رابط کاربری برنامه React نمونه ما باید کمی زیبا به نظر برسد، در مرحله بعدی قصد داریم از فریمورک Bootstrap استفاده کنیم. برای افزودن Bootstrap به پروژه فقط از دستور NPM زیر استفاده کنید:

$ npm install bootstrap

با استفاده از این دستور ما مطمئن می شویم که فریمورک Bootstrap در زیر پوشه node_modules پروژه ما نصب شده است. بعد باید bootstrap.min.css را از آنجا در index.js وارد کنیم:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

با استفاده از دستور import، می توان از کلاس های CSS مربوط به Bootstrap استفاده کرد.

ابتدا در App.js:

سپس در Course.js:

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

نتیجه

با انتشار React Apollo 2.1 کانفیگ کردن و اتصال Apollo به برنامه React از همیشه آسان تر است. با استفاده از کامپوننت Query، می توانید کوئری GraphQL را در کامپوننت خود جاسازی کنید. استفاده از higher order components (مانند قبل) دیگر نیازی نیست.

 

سعید نصیری
سعید نصیری

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

× در حال پاسخ به: