اگر می خواهید با React و GraphQL برنامه بسازید، آپولو کتابخانه ای است که باید از آن استفاده کنید. در این مقاله از آنوفل می خواهیم در مورد نحوه ادغام Apollo Client، برای مصرف GraphQL API، از برنامه React بپردازیم.
ما در مقاله های قبلی خود، GraphQL را مورد بحث قرار داده ایم. خلاصه ای کوتاه از اینکه GraphQL چیست:
GraphQL یک زبان کوئری برای APIها است. این به کلاینت ها این قدرت را می‌دهد که دقیقاً آنچه را که نیاز دارند بخواهند و نه چیز بیشتری، تکامل APIها را در طول زمان آسان‌تر می‌کند و ابزارهای توسعه‌دهنده قدرتمند را فعال می‌کند.
اگر با Rest API آشنا هستید برای درک تفاوت بین گراف کیوال و Rest API می توانید این مقاله را بررسی کنید و همچنین برای آشنایی بیشتر با Rest API می توانید این مقاله را بررسی کنید.
آپولو کلاینت چیست؟
Apollo Client، از قدرت API GraphQL برای مدیریت واکشی و مدیریت داده ها برای شما استفاده می کند. در اینجا نمودار معماری برای تجسم نحوه عملکرد Apollo Client است.
Apollo Client یک چارچوب آگنوستیک UI است که بسیار سودمند است. می توانید از آن با Angular، Vue، React یا حتی برنامه های بومی iOS و Android استفاده کنید. اپلیکیشن frontend کوئری GraphQL را به Apollo Client می فرستد، که کوئری را پردازش می کند و داده ها را از سرور GraphQL درخواست می کند. توجه داشته باشید که Apollo Client نسبت به فناوری سرور GraphQL شما ناراضی است. این برنامه با هر تنظیمات ساخت و API GraphQL سازگار است.
سپس سرور GraphQL پاسخ داده را به Apollo Client ارسال می کند. که سپس داده ها را عادی و ذخیره می کند. برنامه frontend به روز رسانی های UI را دریافت می کند. Apollo Client اساساً برخی از کارهای سخت را برای برنامه frontend انجام می دهد. همچنین ذخیره هوشمند خارج از جعبه را فراهم می کند.
برای آشنایی با tRPC می توانید این مقاله را بررسی کنید.
چرا به آپولو کلاینت نیاز داریم؟
آپولو کتابخانه ای است که دو فناوری فوق العاده مفید را که برای ساخت اپلیکیشن های وب و موبایل استفاده می شود، گرد هم می آورد: React و GraphQL.
آپولو چسبی است که این دو ابزار را به هم متصل می کند. علاوه بر این، کار با React و GraphQL را با دادن تعداد زیادی هوک و ویژگی‌های سفارشی React که به ما امکان می‌دهد هم عملیات GraphQL را بنویسیم و هم با کد جاوا اسکریپت اجرا کنیم، بسیار آسان‌تر می‌کند.
کلاینت آپولو را با اپلیکیشن React ادغام کنید
خوب، بیایید با ادغام Apollo Client در یک برنامه موجود React شروع کنیم. می توانید با ابزار مدرن Vite.js یک اپلیکیشن React را بسازید.
نصب و راه اندازی
اولین قدم نصب پکیج های زیر است.
npm install @apollo/client graphql
apollo/client: شامل همه چیزهایی است که برای راه اندازی Apollo Client نیاز دارید.
graphql: منطقی را برای تجزیه کوئریهای GraphQL ارائه می دهد.
واردات
در ریشه برنامه شما، که معمولاً index.js یا App.js است، موارد زیر را import کنید.
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
useQuery,
gql
} from "@apollo/client";موارد بالا را مستقیماً از پکیج apollo/client@ وارد کنید.
کلاینت آپولو را ایجاد کنید
در مرحله بعد، آپولو کلاینت را در برنامه راه اندازی کنید.
const client = new ApolloClient({
uri: ”https://api.anophel.com”, // Your running GraphQL server URL
cache: new InMemoryCache()
});همانطور که در بالا نشان داده شده است، در ریشه برنامه خود، نمونه ای از Apollo Client را مقداردهی کنید و URL سرور GraphQL را برای آن ارائه دهید. این همچنین می تواند یک مسیر اسکیمای محلی باشد.
کلاینت آپولو را برای واکنش با ارائه دهنده آپولو وصل کنید
مرحله بعدی اتصال Apollo Client برای React با کامپوننت Apollo Provider است. برنامه React را بسته بندی می کند و کلاینت را در context قرار می دهد. این امکان دسترسی به Apollo Client را از تمام اجزای داخل برنامه فراهم می کند. Provider را در ریشه برنامه خود قرار دهید.
<ApolloProvider client = {client}>
<App />
</ApolloProvider>API GraphQL را مصرف کنید و کوئری ها را اجرا کنید
کار راه اندازی اولیه انجام شده است. اکنون ما آماده ایم که در واقع GraphQL API را مصرف کنیم و با استفاده از کوئریهای GraphQL داده ها را درخواست کنیم. من قصد دارم از یک برنامه کاربردی نمونه استفاده کنم که اطلاعات جلسه را برای یک کنفرانس نمایش می دهد. در این مثال، ما می خواهیم جلسات کنفرانس را با اجرای کوئری در GraphQL API نمایش دهیم.
می توانید Apollo Client را در هر پروژه React ادغام کنید و از آن به همراه یک سرور GraphQL موجود استفاده کنید.
هوک useQuery
Queries به کلاینت ها این قدرت را می دهد که دقیقاً آنچه را که نیاز دارند و نه چیزی بیشتر بخواهند.
useQuery یک هوک React است که API برای اجرای کوئری ها در برنامه آپولو است.
ابتدا کوئری GraphQL را که می خواهیم اجرا کنیم، با استفاده از gql می نویسیم. در زیر کوئریی مربوط به فیلدهایی که می خواهیم در صفحه جلسات کنفرانس نمایش داده شود، آمده است.
const ALL_SESSIONS = gql`
query sessions {
sessions {
id
title
startsAt
day
room
level
speakers {
id
name
}
}
}`;اکنون در کامپوننت خود، آماده اجرای کوئری که در بالا تعریف شده است هستیم.
const { loading, error, data } = useQuery(ALL_SESSIONS);
هوک useQuery حالت های بارگیری و خطا را که توسط Apollo Client ردیابی می شود، برمی گرداند. این کمک می کند تا کد کامپوننت frontend برای بارگیری و حالت های خطا به کاربر نمایش داده شود. وقتی نتیجه کوئری از GraphQL Server برمی گردد، ویژگی داده پر می شود. ویژگی داده حاوی پاسخ json از GraphQL API است.
بیایید هوک را به یک کامپوننت اضافه کنیم، این اطمینان حاصل می کند که وقتی کامپوننت رندر می شود، هوک useQuery اجرا می شود. کامپوننت AllSessionList، جلسات را هنگامی که داده ها پس از اجرای کوئری برگردانده می شوند، ارائه می دهد. پیام بارگیری جلسات به طور خلاصه نمایش داده می شود تا زمانی که داده ها برگردانده شوند.
function AllSessionList() {
const { loading, error, data } = useQuery(ALL_SESSIONS);
if (loading) return <p>Loading Sessions..</p>;
if (error) return <p>Error loading sessions!</p>;
return data.sessions.map((session) => (
<SessionItem
key={session.id}
session={{
...session,
}}
/>
));
}کامل شد! ما Apollo Client را در برنامه React خود پیاده سازی کردیم و یک کوئری را با موفقیت اجرا کردیم.
آرگومان ها در کوئری ها
در کوئری قبلی، ما به سادگی تمام جلسات و فیلدهای خاص جلسات را کوئری کردیم. اگر بخواهیم داده های به دست آمده را فیلتر کنیم چه؟ اگر بخواهیم جلسات را روز به روز فیلتر کنیم چه؟ کاربر می تواند روی یک دکمه کلیک کند و می خواهد جلسات را فقط برای یک روز خاص ببیند.
خبر خوب این است که این کار را می توان با استفاده از آرگومان ها در GraphQL انجام داد.
ما می توانیم آرگومان هایی را به فیلدها ارسال کنیم تا داده های حاصل را فیلتر کنیم. هر فیلد و شی تودرتو می تواند مجموعه ای از آرگومان های خود را دریافت کند.
می‌توانیم درخواست قبلی خود را برای فیلتر کردن روز به روز به صورت زیر افزایش دهیم.
const WEDNESDAY_SESSIONS = gql`
query sessions {
sessions(day:"Wednesday") {
id
title
startsAt
day
room
level
speakers {
id
name
}
}
}`;اکنون درخواست ما فقط جلساتی را برمی‌گرداند که چهارشنبه هستند.
با React 19 چقدر آشنا هستید؟ می توانید در این مقاله تمامی ویژگی های جدید آن را بررسی کنید، و برای دیدن تفاوت های بین ری اکت 19 و 18 نیز این مقاله کاربردی را ببینید.
متغیرها در کوئری ها
این همش نیست! کوئری قبلی فقط بر اساس یک آرگومان خاص فیلتر می شود. اگر بخواهیم آرگومان های فیلدها پویا باشند چه؟ در مورد ما، کاربر باید بتواند بر اساس هر روز کنفرانس، نه فقط یک روز خاص، فیلتر کند.
GraphQL از متغیرها برای کوئری برای مقادیر پویا استفاده می کند.
ما می توانیم کوئری را برای پذیرش آرگومان های متغیر به صورت زیر تغییر دهیم:
const SESSIONS = gql`
query sessions($day: String!) {
sessions(day: $day) {
id
title
startsAt
day
room
level
speakers {
id
name
}
}
}`;$ نشان می دهد که آرگومان یک متغیر است. همچنین نوع متغیر را String تعریف کرده ایم!. این بدان معنی است که متغیر نمی تواند null باشد و باید از نوع String باشد. اکنون می‌توانیم متغیرها را به هوک useQuery منتقل کنیم، همانطور که در مثال زیر نشان داده شده است:
const { loading, error, data } = useQuery(SESSIONS, {
variables: { day },
});ما متغیرها را به عنوان یک گزینه پیکربندی به هوک منتقل می کنیم. در مورد ما، روز را به عنوان یک متغیر می گذرانیم. علاوه بر این، ما همچنین می توانیم چندین متغیر را بر اساس نیاز مشتری به Query GraphQL ارسال کنیم. برای آشنایی با روش های دیگر استفاده از گراف کیوال در React این مقاله را بررسی کنید.
نتیجه
بسیار خوب، این یک پوشش است. در این مقاله با Apollo Client برای مصرف GraphQL API آشنا شدیم. ابتدا یاد گرفتیم که چگونه Apollo Client را در یک برنامه React ادغام کنیم. در مرحله بعد، چند کوئری را با استفاده از هوک useQuery اجرا کردیم. در پست بعدی، در مورد نحوه اجرای جهش و نحوه عملکرد کش در آپولو کلاینت بیشتر خواهیم آموخت.