GraphQL چیست و چطور از GraphQL در ری اکت استفاده کنیم ؟
GraphQL ( گراف کیو ال ) یک زبان پرس و جو یا همون Query Language برای API ها محسوب میشه. مزیت GraphQL این هست که ما به عنوان Front-End Developer میتونیم مشخص کنیم که دقیقا به چه اطلاعاتی از یک API نیاز داریم! همین موضوع باعث میشه که اطلاعات غیرضروری بین سرور و کلاینت رد و بدل نشه 🙂
البته این کل مزیت GraphQL نیست!
اگه Front-End Developer هستی ولی هنوز نمیدونی GraphQL چیست و چه کاربردی در ری اکت و فرانت اند داره، تو این مقاله با فِرانت اِندی همراه باش 🙂
GraphQL چیست ؟
GraphQL یک Query Language ( زبان پرس و جو ) برای API در فرانت اند به حساب میاد که به ما اجازه میده مشخص کنیم که دقیقا به چه اطلاعاتی از هر API نیاز داریم، با انجام اینکار اطلاعات اضافه و بلااستفاده برای ما ارسال نخواهد شد.
در حقیقت GraphQL میتونه عملیات دریافت داده ( fetching data ) و دستکاری اون اطلاعات رو برای ما انجام بده و مدیریت کنه.
GraphQL به صورتی طراحی شده که API ها خیلی خیلی سریعتر و انعطاف پذیرتر باشن.
این یعنی ما به عنوان یک Developer تجربه و حس خیلی بهتری درنتیجه کار با GraphQL در فرانت اند خواهیم داشت.
یکی از نکات مثبت GraphQL متن باز بودن ( open source بودنش ) هست.
GraphQL در ری اکت !
GraphQL در ری اکت قابلیت استفاده داره و اتفاقا کمک میکنه اپیکیشن ری اکتی ما کارایی و انعطاف پذیری خیلی خیلی بیشتری از خودش نشون بده.
اما باید در جریان این موضوع باشیم که از GraphQL با هر زبان، کتابخانه یا فریمورکی میتونیم استفاده کنیم.
Apollo Client چیست ؟
Apollo Client یک کتابخانه مدیریت وضعیت ( State Management ) هست که برای اپیکیشن های جاوااسکریپتی که از GraphQL استفاده میکنن، کاربرد داره. تو این مقاله ما از Apollo Client + GraphQL استفاده خواهیم کرد 🙂
حالا شاید بپرسیم مزایای Apollo Client چیه ؟
یک Data Fetcher قدرتمند هست :
Apollo Client قابلیت دریافت اطلاعات از سرور رو داره. در حقیقت این کار رو خیلی ساده و بهینه برای ما انجام میده
قابلیت کش ( cash ) اطلاعات دریافتی رو داره :
Apollo Client قابلیت کش و ذخیره سازی اطلاعات دریافت شده از سرور رو داره.
این یعنی بصورت خودکار اطلاعات دریافت شده رو ذخیره میکنه تا در دفعات بعد، از همون اطلاعات کش شده استفاده کنه.
یک State Management به حساب میاد و قابلیت مدیریت داده های لوکال رو داره :
خود Apollo Client یک Local State Management داره و درصورت نیاز میتونیم از این ویژگی کلیدیش هم استفاده کنیم.
قابلیت شخصی سازی خیلی زیادی داره :
ما میتونیم بر اساس نیاز پروژه خودمون، Apollo Client رو شخصی سازی کنیم تا انتظار بهترین عملکرد ممکن رو ازش داشته باشیم.
مثل شخصی سازی نحوه درخواست به سرور، شخصی سازی سیستم کش، شخصی سازی ارور ها و ..
ابزار های دیباگ داره :
اگه از Apollo Client استفاده کنیم، میتونیم از ابزار های Debugging اون مثل Apollo Studio استفاده کنیم که ویژگی هایی مثل بررسی عملکرد کش، مانیتور وضعیت شبکه و .. رو اختیار ما میزاره.
جامعه آماری خوب و فعالی داره:
Apollo Client یک جامعه آماری خوب و قوی داره که باعث شده برای این ابزار آموزش ها، مستندات، پرسش و پاسخ ها و افزودنی های خیلی زیادی وجود داشته باشه.
استفاده از GraphQL در ری اکت
برای اینکه بتونیم از GraphQL در ری اکت استفاده کنیم، باید یک پروژه ری اکتی بسازیم و 2 پکیج زیر که مربوط به خود GraphQL در ری اکت هستن رو نصب کنیم :
- graphql
- @appolo/client
نصب این 2 پکیج رو با دستور زیر میتونیم انجام بدیم :
npm install @apollo/client graphql
حالا باید یک سرور GraphQL داشته باشیم که بتونه با کلاینت ارتباط برقرار کنه و API های مارو مدیریت کنه. اگه Back-End Developer این سرور رو در اختیار شما گذاشت که هیچ. در غیر اینصورت میتونیم به کمک ابزار هایی مثل Apollo Server یا Express GraphQL یک سرور GraphQL بسازیم.
سپس باید یک فایل با نام ApolloProvider.js بسازیم تا بتونیم Appolo Client خودمون رو کانفیگ کنیم.
تو تیکه کد زیر، من این فایل رو ساختم :
import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
uri: 'http://our-graphql-api-endpoint', // اینجا باید آدرس اِند پوینت خودمون رو بنویسیم
cache: new InMemoryCache(),
});
const ApolloAppProvider = ({ children }) => {
return {children} ;
};
export default ApolloAppProvider;
حالا که فایل ApolloProvider.js رو ساختیم، باید وارد فایل App.js بشیم و ApolloProvider رو به عنوان Wrapper کل اپیکیشن خودمون در نظر بگیریم :
import React from 'react';
import ApolloAppProvider from './ApolloProvider';
const App = () => {
return (
{/*
هرچی کامپوننت، روتینگ یا .. داریم
*/}
);
};
export default App;
و تمام 🙂
حالا میتونیم از قابلیت ها و ویژگی های GraphQL در ری اکت استفاده کنیم.
مثلا تو مثال زیر، من از سرور خودم Data دریافت کردم:
import React from 'react';
import { gql, useQuery } from '@apollo/client';
const GET_USERS = gql`
query GetUsers {
users {
id
name
email
}
}
`;
const UserList = () => {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return Loading...
;
if (error) return Error 🙁
;
return (
{data.users.map((user) => (
-
{user.name} - {user.email}
))}
);
};
export default UserList;
مثال بالا خیلی ساده، چگونگی دریافت اطلاعات از سرور به کمک GraphQL رو به ما آموزش میده.
تو مثال بالا تونستیم از GraphQL در ریکت استفاده کنیم. ( به کمک Apollo Client )
حالا لازمه که چند نکته مهم در مورد GraphQL در فرانت اند رو باهمدیگه بررسی کنیم و یاد بگیریم ..
مزایای GraphQL در ری اکت چیست ؟
اگه تو اپیکیشن ری اکتی خودمون از GraphQL استفاده کنیم، چندین مزیت مهم برامون داره :
یک اپیکیشن بهینه خواهیم داشت !
یکی از مهمترین مزایای GraphQL در فرانت اند، این هست که ما صرفا اطلاعاتی که نیاز داریم رو از سرور خودمون دریافت میکنیم. این مورد رو در زمان ارتباط با API مشخص میکنیم.
این یعنی سربار شبکه در هر request ( درخواست ) کمتر میشه و اپیکیشن ما بهینه تر برای کاربر نمایش داده میشه.
یکی از مهمترین مشکلاتی که تو Rest API داشتیم این بود که Data های بلااستفاده و بی مورد برای کلاینت ارسال میکردیم، اما تو GraphQL این مشکل رو نداریم!
سیستم اعتبارسنجی و تایپ قوی !
زمانیکه از GraphQL در فرانت اند استفاده میکنیم، باید یک اسکیمای مشخص برای API های دریافتی مشخص کنیم. این یعنی کلاینت و سرور یک Schema مشخص برای داده های رد و بدل شده دارن.
همین موضوع کمک میکنه که احتمال بروز خطا و مشکل در اپیکیشن کمتر بشه.
و کمک میکنه بتونیم یک سیستم اعتبارسنجی قوی پیاده سازی کنیم.
بروزرسانی داده های ذخیره شده در سرور !
GraphQL در ری اکت به ما اجازه میده داده ها و اطلاعات ذخیره شده در سرور رو تغییر بدیم و دستکاری کنیم.
این کار رو به کمک mutation میتونیم انجام بدیم.
مهمترین مزیت اینکار این هست که میتونیم یکسری Data ( اطلاعات ) یکپارچه داشته باشیم که در سرور و کلاینت هماهنگ و یکسان هستند.
مدیریت ارور در GraphQL !
سیستم و طراحی خود GraphQL در فرانت اند به گونه ای هست که احتمال بروز خطا و مشکل رو در اپیکیشن خیلی کمتر میکنه، اما این دلیل نمیشه که ما Error Handling در GraphQL رو نادیده بگیریم ..
ما باید کد خطای دریافتی از سرور رو به کاربر نمایش بدیم تا از مشکل پیش اومده اطلاع داشته باشه.
سیستم کش ( cashing ) در GraphQL !
خود GraphQL امکان کش دیتای دریافت شده از سرور رو داره، این یعنی اپیکیشن ما چند برابر سریعتر خواهد بود. چون اطلاعاتی که قبلا دریافت کرده رو مجدد از سرور دریافت نمیکنه و از حافظه کش میخونه.
البته خود GraphQL سیستم cashing نداره اما زمانیکه از Apollo Client استفاده میکنیم، میتونیم از قابلیت کش دیتا در GraphQL بهره ببریم.
این یعنی داده هایی که یکبار از سرور دریافت میشن، تو حافظه داخلی Apollo ذخیره میشن و در دفعات بعد این اطلاعات از حافظه داخلی فراخوانی میشن.
سیستم Cashing در Apollo Client کمک میکنه تعداد درخواست های ما به سرور تا حد زیادی کاهش پیدا کنه.
برای پیاده سازی سیستم کش اطلاعات، ما استراتژی های مختلفی میتونیم پیاده سازی کنیم..
مثلا بر حسب زمان، اطلاعات کش شده رو پاک کنیم و اطلاعات جدید رو از سرور بگیریم.یا بصورت دستی این کار رو انجام بدیم.
چطور اپیکیشن خودمون رو دیباگ کنیم ؟
اگه از GraphQL در React استفاده میکنیم، میتونیم از ابزار های مختلفی برای Debugging استفاده کنیم.
دو تا از مهمترین این ابزار ها عبارتند از :
- React DevTools
- GraphQL Playground
جمع بندی
استفاده از GraphQL در ری اکت مزایای خیلی زیادی برای اپیکیشن و پروژه ما به همراه داره. از مهمترین مزیت های GraphQL در فرانت اند یا ری اکت میشه به بهینه تر شدن اپیکیشن، کاهش درخواست های غیرضروری شبکه، سیستم کش دیتا، یکپارچه سازی دیتا در کلاینت و سرور، بهبود تجربه کاربر و توسعه دهنده، افزایش امنیت اپیکیشن و .. اشاره کرد.
تو این مقاله به این سوال پاسخ دادیم که GraphQL چیست و GraphQL چه کاربردی در فرانت اند داره ..
با این تفاسیر پیشنهاد میکنم اگه قصد توسعه اپیکیشن به کمک ری اکت دارید، حتما از GraphQL در ریکت استفاده کنید:)
GraphQL ( گراف کیو ال ) یک زبان پرس و جو یا همون Query language برای API محسوب میشه و به ما اجازه میده اطلاعات مورد نیاز خودمون رو از سرور دریافت کنیم. البته مزیت های خیلی زیادی در این پروسه برای ما نیز دارد.
Apollo Client یک کتابخانه State Management ( مدیریت وضعیت ) هست که در اپیکیشن هایی که از جاوااسکریپت + GraphQL استفاده میکنن، کاربرد داره.
همچنین قابلیت کش داده ( Cashing )، شخصی سازی، دیباگ و.. برای اپیکیشن ما خواهد داشت.
درباره احمد احمدنژاد
من یه برنامه نویس و توسعه دهنده وب هستم که عاشق دنیای صفر و یکم❤️
نوشتههای بیشتر از احمد احمدنژاد
دیدگاهتان را بنویسید