معرفی کتابخانه QueryMock: An Apollo GraphQL Module و توضیح درمورد آن و ویژگی های آن

معرفی کتابخانه QueryMock: An Apollo GraphQL Module

QueryMock بسته NPM عالی برای اضافه کردن به همه برنامه های Apollo GraphQL است.

فرقی نمی‌کند با Apollo GraphQL تازه کار باشید یا یک کهنه کار با این فناوری، بر کسی پوشیده نیست که آزمایش ویژگی‌های مختلف آن‌ها به‌صورت جداگانه دشوار است. مهندسان نرم افزار باتجربه ابراز علاقه کرده اند که بتوانند داده های ساختگی خود را از پرس و جوی ارائه شده بدون نیاز به تنظیم کل سرور خود مشاهده کنند. همچنین، آنها توانایی تمسخر یک طرح واره را از جستجوی سریع پرس و جو می خواهند. QueryMock با ارائه داده های ساختگی یا حتی ایجاد یک فایل طرحواره در پروژه شخصی شما به حل این مشکلات کمک می کند.

طراحی سایت سفارش طراحی سایت سفارش ساخت سایت

Apollo GraphQL چیست؟

GraphQL یک زبان پرس و جو و زمان اجرا است که توسط فیس بوک به منظور پرس و جو و تحویل داده ها به برنامه های مختلف ایجاد شده است. GraphQL به دلیل توانایی اش در پرس و جو کردن جنبه های خاص یک طرحواره و دریافت اطلاعات درخواست شده به عنوان پاسخ محبوب است. GraphQL با پرس و جو از داده ها در رابطه با طرحواره تعریف شده در مقابل جمع آوری داده ها از نقاط پایانی مختلف با REST متفاوت است.

آپولو در رابطه با GraphQL چگونه کار می کند؟ آپولو به طور خاص تحت PaaS یا پلتفرم به عنوان پشته فناوری خدمات قرار می گیرد. نقش آپولو ردیابی طرحواره های ایجاد شده در یک رجیستری است. این به ویژه هنگامی مفید است که با Apollo Studio همراه شود، که پلتفرمی است که به شما امکان می‌دهد با داده‌هایی که دریافت می‌کنید، پرس و جوهایی که ایجاد می‌کنید بازی کنید و آن‌ها را در برابر طرحی که ذخیره کرده‌اید بررسی کنید. آپولو همچنین به بسته‌ها و کتابخانه‌های مختلف برای کمک به ایجاد برنامه GraphQL شما دسترسی دارد.

با این حال GraphQL، حتی همراه با آپولو، دارای یک منحنی یادگیری شیب دار است. علاوه بر آن، به طور کلی یک فناوری نسبتاً جدید است. GraphQL برای اولین بار در سال 2012 ایجاد شد و در سال 2015 منبع باز شد و آپولو در سال 2016 راه اندازی شد. از آنجایی که بسیار جدید است، ویژگی های زیادی وجود دارد که هنوز در حال پیشرفت هستند، که منجر به این می شود که باید خودتان راه حل هایی برای مشکلات خود بیابید یا منتظر بمانید. تا زمانی که ویژگی کار در حال انجام آپولو ایجاد و اجرا شود. هنگام تصمیم گیری در مورد استفاده از Apollo GraphQL برای برنامه خود خوب است این معایب را در نظر داشته باشید.

متلب انجام پروژه متلب با متلب دانان قهار و بزرگ

اولین ویژگی QueryMock چیست؟

یکی از توسعه دهندگان ما در حال ایجاد یک برنامه React کامل پشته ای بود که متوجه شد نمی توانند پرس و جوهای خود را بدون راه اندازی کامل بک اند ابتدا آزمایش کنند. اینگونه بود که ایده ارائه داده های ساختگی فقط از طریق یک پرس و جو ایجاد شد. هنگامی که تیم حفاری بیشتری انجام داد، ما به سرعت متوجه شدیم که این یک ابزار مفید برای بسیاری از توسعه دهندگان Apollo GraphQL خواهد بود. چند ابزار در حال حاضر برای کمک به داده های تمسخر آمیز ایجاد شده اند، از جمله ابزارهایی که توسط خود آپولو ایجاد شده اند. با این حال، آنها هنوز نیاز به یک باطن و یک طرحواره دارند که قبل از اینکه بتوانند از آنها استفاده کنند.

توسعه دهنده ما هنگام ادامه توسعه برنامه خود چند انتخاب داشت. اول، آنها می توانند یک سرور موقت همراه با یک طرح واره تعریف شده ایجاد کنند و سپس داده های ساختگی Apollo را پیاده سازی کنند، یا دوم، آنها می توانند داده ها را در برنامه کدنویسی کنند. اجرای هر دوی این گزینه ها به زمان نیاز دارد و سپس باید آن را از بین ببرند. هیچ یک از این گزینه‌ها بهینه نبودند، بنابراین تیم ما تصمیم گرفت با ساخت یک کتابخانه سبک وزن، با این مشکل مقابله کند، که این یکی از اولین ویژگی‌های پیاده‌سازی شده بود.

تابع mockQuery با ایجاد داده های ساختگی برای توسعه دهندگانی که هنوز به یک باطن کامل دسترسی ندارند، مشکل توصیف شده را حل می کند. تیم ما آن را برای تقلید از useQuery Hook از بسته npm @apollo/client نوشت که فقط به یک آرگومان نیاز دارد: جستجوی GraphQL. در اینجا یک نمونه از useQuery Hook آورده شده است:

تابع DisplayLocations() {

const { بارگیری، خطا، داده } = useQuery(GET_LOCATIONS);

اگر (در حال بارگیری) بازگشت <p>در حال بارگیری…</p>;

if (error) return <p>خطا :(</p>

داده ها را برگرداند

طراحی لوگو با بهترین طراح لوگو و طراحی لوگو حرفه ای

locations.map(({ شناسه، عنوان، تصویر، نام، توضیحات، آدرس، تلفن، پوستر}) => (

[با کد اینجا کاری انجام دهید

))؛

)

}

با جایگزین کردن useQuery با mockQuery، با گذاشتن آرگومان جستجوی GraphQL در محل، تابع ما فقط رشته‌هایی را برای هر فیلد در جستجو برمی‌گرداند.

مثلا:

تابع DisplayLocations() {

const { بارگیری، خطا، داده } = MockQuery(GET_LOCATIONS);

اگر (در حال بارگیری) بازگشت <p>در حال بارگیری…</p>;

if (error) return <p>خطا :(</p>

داده ها را برگرداند

تصویر داده های ارائه شده: title_01 location-reference درباره این مکان: name_01 description_01 address_01 phone_01 location-reference name user_01 age_01

اگرچه کامل نیست، اما خوب بود که حداقل شروع به تجسم داده‌هایی کنیم که به صفحه ارائه می‌شوند. با افزودن یک آرگومان دوم، "insert" که باعث می شود پنجره ای نمایش داده شود که می توانید به سرعت داده های شخصی سازی شده بیشتری را وارد کنید، بیشتر به دست آورید.

const { بارگیری، خطا، داده } = MockQuery (GET_LOCATIONS، "درج");

تصویر پاپ آپ و فیلدهای مورد نظر: QueryMock: سلام! برای استفاده از mockQuery متشکریم! فیلدهای داده های ساختگی را از قبل با متن پر کرده ایم. هر یک از جعبه های ورودی از پیش پر شده را با داده های ساختگی شخصی خود جایگزین کنید

سپس روی ارسال کلیک کنید. می توانید تابع mockQuery را بدون تگ P دوباره اجرا کنید و اطلاعات شما حفظ خواهد شد. اگر سؤالی دارید، لطفاً اسناد ما را بررسی کنید. پرس و جو! فیلدها: شناسه، عنوان، تصویر، نام، توضیحات، آدرس، تلفن، نام کاربری پوستر، سن پوستر و تصویر کوچک پوستر. در پایان یک دکمه ارسال وجود دارد.

به منظور سرعت بخشیدن به این فرآیند، قابلیت استفاده از کلمات کلیدی را برای تعیین نوع داده ای که می خواهید ارائه دهید اضافه کردیم. در تصویر زیر، فیلد "تصویر" دارای یک آدرس اینترنتی است که قبلا ارائه شده است. با این حال، فیلد "تصویر کوچک پوستر" دارای ~عکس است. استفاده از ~photo مانند چسباندن آدرس اینترنتی در فیلد عمل می کند.

تصویری از همان پاپ آپ همانطور که در بالا توضیح داده شد با برخی از فیلدها وارد شده است. اینها فیلدهایی هستند که وارد شده اند: عنوان: بهترین فروشگاه نان تا کنون! تصویر: نام آدرس اینترنتی خودکار: توضیحات Ben’s Baker: ~text299 آدرس: ~ آدرس تلفن: ~ نام کاربری پوستر تلفن: ben_theBaker93 سن پوست: ~int poster thumbnail: ~photo. در پایان یک دکمه ارسال وجود دارد.

می بینید که ما از ~address, ~phone, ~int, ~text299 استفاده کردیم. کلمه کلیدی متن متفاوت است زیرا به شما نیاز دارد که یک عدد زیر ~text ارائه دهید. در مثال ما از عدد 299 استفاده کردیم که تضمین می کند که یک بلوک متنی با 299 کاراکتر دریافت می کنید.

پروژه انجام پروژه سفارش پروژه

اطلاعاتی که ارائه کردید پس از فشار دادن ارسال، در صفحه نمایش داده می شود. رابط کاربری هنوز در حال انجام است، اما شما می توانید داده های خود را که در زیر نشان داده شده است تجسم کنید.

تصویر رندر شده شامل یک تصویر انتزاعی آبرنگ با رنگ های مختلف از جمله زرد، قرمز، سبز و آبی تیره. عنوان بالای سربرگ می گوید: The Best Bread Store Ever. در زیر تصویر آمده است: درباره این مکان: Ben’s Bakery. متن بعدی نوشته شده: یک دلار و هشتاد و هفت سنت. این همه بود. و شصت سنت آن به سکه بود. پنی ها هر بار یکی و دو نفر را با بولدوزر زدن خواربارفروش و سبزی خوار و قصاب نجات دادند تا اینکه گونه های آدم با انتساب بی صدا انزجاری که چنین برخورد نزدیک حاکی از آن بود، سوخت. سه. 2300 Oracle Way Austin, TX 78741 (737)867–1000. یک تصویر دایره ای با چرخش های رنگی وجود دارد و سپس زیر آن: ben_theBaker93 128.

تمام اطلاعات ورودی در sessionStorage ذخیره می شود. تا زمانی که برگه باز نگه داشته شود، باقی خواهد ماند. این اطمینان حاصل می کند که اگر پرچم "درج" را حذف کنید، داده های شما به حیات خود ادامه می دهند. ویژگی ما همچنین می تواند آرایه ای از اشیاء را با ضرب داده ها مدیریت کند.

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

این مفهوم هنگام ایجاد یک منوی بازشو برای کاربران برای وارد کردن داده های مورد نظر خود به بهترین وجه نشان داده شد. به طور معمول، ما یک مؤلفه ایجاد می کنیم که به صورت مشروط یک div را ارائه می دهد. با این حال، چون ما فقط به تابعی دسترسی داشتیم که یک شی را برمی گرداند، راه ساده ای برای رندر کردن کامپوننت React وجود نداشت. ما انتخاب کردیم که از دستکاری DOM استفاده کنیم تا آن را به بدنه به عنوان راه حلی در مورد رندر کردن یک جزء React متصل کنیم.

UseQuery Hook از Apollo یک شی را برمی‌گرداند که به طور خاص دارای یک جفت کلید/مقدار «بارگیری» و «true» است در حالی که منتظر نتایج پرس و جو است. در حالی که منتظر ورودی کاربر هستیم، این رفتار را با ارسال یک شی "بارگیری" تقلید می کنیم تا زمانی که کاربر ورودی های مورد نظر خود را ارسال کند، سپس داده ها با useState Hook به روز می شوند.

مجری ذیصلاح لیست مجریان نظام مهندسی اراک مجری ساختمان

یک سوالی که باید حل می کردیم این است که چگونه داده ها را تحویل دهیم. در داخل شی داده، پرس و جوهای GraphQL را می توان به عنوان یک شی یا به عنوان آرایه ای از اشیاء برگرداند. ما تعیین کردیم که اگر کاربر فقط یکی را در پارامتر عدد وارد کند، یک شی را برمی‌گردانیم. با این حال، اگر کاربر دو یا چند مورد را انتخاب کند، آرایه ای از اشیا را برمی گردانیم. این فقط در سطح بالا اجرا می شود. پرس‌و‌جوهای GraphQL می‌توانند اشیاء نوع زیادی داشته باشند، جایی که حتی موارد تو در تو نیز ممکن است آرایه‌ای از اشیاء را برگردانند. در حال حاضر ما نمی‌توانیم این درخواست‌ها را بپذیریم، زیرا این طرح است که به پرس و جو اطلاع می‌دهد که آیا باید آرایه یا شی را برگرداند. از آنجایی که ما طرحی در دسترس نداریم، فقط می توانیم حدس بزنیم. در نسخه های بعدی می خواهیم به این مشکل بپردازیم و حل کنیم.

چگونه اولین ویژگی را نصب می کنید؟

ابتدا مطمئن شوید که @apollo/client، GraphQL و React را نصب کرده اید. سپس می توانید به مخزن github ما بروید تا پروژه را فورک و کلون کنید. دوم، پوشه ای با عنوان MockData را در پروژه خود کپی کنید و سپس تابع mockQuery را به صورت زیر وارد کنید:

وارد کردن mockQuery از «[مسیر شما]/MockData/MockQuery».

اکنون می‌توانید با جایگزین کردن useQuery Hook با mockQuery، برخی از داده‌ها را مسخره کنید.

دومین ویژگی QueryMock چیست؟

ویژگی دوم ما به تولید طرحواره ساختگی برای Apollo GraphQL مربوط می شود. مشابه اولین ویژگی ما، متوجه شدیم که اگر ابتدا برنامه کاربردی خود را توسعه می‌دادید، به طرحی برای آزمایش درخواست‌های خود دسترسی نخواهید داشت. با در نظر گرفتن این موضوع، ما به احتمال mocki فکر کردیم

طرحواره ای را بر اساس پرس و جوی کاربر مورد نظر ایجاد کنید.

ما می‌خواستیم عملکردی را با رابط خط فرمان (CLI) پیاده‌سازی کنیم تا مستقیماً با کاربر و فایل‌های برنامه‌اش ارتباط برقرار کنیم. ما نمی‌خواستیم یک برنامه جدید باز کنیم یا مجبور نباشیم برای استفاده از عملکرد خود در یک صفحه رندر کنیم. بنابراین، تصمیم گرفتیم دستوری را ادغام کنیم که کاربر را برای دریافت اطلاعات راهنمایی کند. ابتدا از کاربر می خواهد که مسیر مستقیمی را به جایی که پرس و جوی او ذخیره شده است بدهد. ما در مورد اینکه کاربر درخواست خود را مستقیماً در ترمینال وارد کند بحث کردیم. با این حال، ما به این نتیجه رسیدیم که برای کاربر ناخوشایند است که مجبور شود خود پرس و جو را بگیرد، به خصوص با توجه به اینکه قالب بندی در مورد جستارهای Apollo GraphQL چقدر پیچیده است. به منظور حفظ فرمت پرس و جو و کاهش ناراحتی کاربر، ما مسیر فایل آنها را درخواست می کنیم. با آن اطلاعاتی که در اختیار ما قرار می‌گیرد، می‌توانیم فایل را تجزیه و جست‌وجو کنیم.

پوشه QueryTest با فایل query.js که در داخل آن قرار دارد.

در حال حاضر، ما می خواهیم که فقط یک پرس و جو در صفحه وجود داشته باشد و از قوانین دیکته شده توسط Apollo GraphQL برای اعلام یک پرس و جو پیروی کند. با این حال، ما امیدواریم که توانایی های عملکرد خود را به منظور رسیدگی به چندین پرس و جو به طور همزمان گسترش دهیم. در زیر نمونه ای از پرس و جو آورده شده است.

این نمونه ای از پرس و جوی است که با محصول ما کار می کند: const { gql } = require('apollo-graphql'); const dndChar = gql ` query class { class { name hit_die spellcasting { spellcasting_ability { name } } } `

مثال پرس و جو: const{gql} = require('apollo-graphql'); const dndChar = gql ` query class { class { name hit_die spellcasting { spellcasting_ability { name } } } `

هنگامی که کاربر مسیر خود را وارد کرد، ما پرس و جو را می گیریم و آن را از طریق تابعی که یک طرحواره را مسخره می کند اجرا می کنیم. در حال حاضر، فقط هر نوع داده را به عنوان رشته خروجی می دهد. با این حال، ما برنامه هایی برای اضافه کردن قابلیت های بیشتری داریم تا خروجی را از رشته ای بودن تغییر دهیم. آخرین درخواستی که کاربر در ترمینال دریافت می‌کند، می‌پرسد که در کجا می‌خواهند طرحواره‌اش در برنامه‌اش ذخیره شود. کاربر مسیر را به ترمینال وارد می‌کند و یک فایل یا به تازگی ایجاد می‌شود یا با طرح ماک‌سازی شده اضافه می‌شود. سپس ترمینال ظاهر طرحواره را برای کاربر پر می کند.

تصویری از آنچه در داخل ترمینال رخ می دهد: create-schema — پرس و جو شما در کجا ذخیره می شود؟ — ./QueryTest/query.js — لطفاً مسیری را که می خواهید طرحواره شما ذخیره شود، اعلام کنید: — ./QueryTest/schema.js — فایل ضمیمه شده است

سپس کاربر آزاد است تا فایلی را که طرحواره در آن نگهداری می‌شود، ویرایش یا هر گونه تنظیماتی را انجام دهد. لطفاً به یاد داشته باشید که تیک‌های برگشتی را خودتان اضافه کنید زیرا در حال حاضر این تیک‌ها به صورت خودکار پر نمی‌شوند.

تصویر فایل: پوشه QueryTest با فایل‌های query.js و schema.js موجود در آن.

تصویر طرحواره خروجی: `type class { نام: String! hit_die: رشته! spellcasting: رشته! } type spellcasting { spellcasting_ability: String! } spellcasting_ability را تایپ کنید { نام: رشته! } `

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

حتی با وجود همه این قابلیت ها، هنوز برخی از اخطارها وجود دارد. همانطور که در بالا بحث کردیم، هنوز عملکردی برای رسیدگی به چند پرس و جو به طور همزمان وجود ندارد. همراه با آن هشدار، کاربر در حال حاضر باید طرح خود را به صورت دستی به روز کند تا انواع داده های مختلف را مشخص کند و باید برچسب طرح خود را اعلام کند و آن را در بکتیک های مورد انتظار بپیچد تا به عنوان یک طرح در نظر گرفته شود. با این حال، ما از آنچه در حال حاضر پر شده است خوشحالیم و هیجان زده هستیم که عملکرد خود را برای رسیدگی به این مشکلات در آینده به روز کنیم.

چگونه ویژگی دوم را نصب می کنید؟

ابتدا از مخزن github فورک و کلون کنید و مطمئن شوید که فایل MockSchema به همراه package.json موجود است. دوم، در ترمینال خود npm install را اجرا کنید و سپس npm install -g را اجرا کنید تا فایل به صورت سراسری نصب شود. برای استفاده از دستورات اجرایی، بسته باید در سطح جهانی نصب شود. در مرحله بعد، مطمئن شوید که apollo-graphql را در برنامه خود نصب کرده اید و یک پرس و جوی Apollo GraphQL را با پیروی از تگ gql ایجاد کرده اید و پرس و جو خود را در بکتیک ها قرار داده اید. پس از آن دستور create-schema را اجرا کنید و دستورات برای اجرای عملکرد در ترمینال شما ظاهر می شود!

به زودی ما ویژگی های خود را به عنوان یک بسته npm منتشر خواهیم کرد که می توانید بدون نیاز به فورک کردن و کلون کردن از github نصب کنید. ما مشتاقانه منتظر راه اندازی آن در آینده نزدیک هستیم.

آینده QueryMock چیست؟

تیم ما برای تمام پتانسیل هایی که از QueryMock می آید هیجان زده است. گام بعدی فوری ما این است که اطمینان حاصل کنیم که بسته ما برای استقرار در npmjs آماده است که در آن شما قادر خواهید بود

o کتابخانه را به طور کامل نصب کنید. امیدواریم در آینده نزدیک این را منتشر کنیم. با توجه به اولین ویژگی ما، امیدواریم که به مشکل مربوط به انواع مختلف اشیاء بپردازیم. مشکل این است که ما نمی توانیم ارزیابی کنیم که آیا کاربر انتظار دارد یک شی واحد برگردانده شود یا آرایه ای از اشیا. ما می‌خواهیم قابلیت‌هایی را پیاده‌سازی کنیم تا به کاربر این نوع تنوع را بدهیم. در مورد ویژگی دوم ما می‌خواهیم بتوانیم طرحواره‌ای را مسخره کنیم که می‌تواند پیش‌بینی کند که آیا طرحواره به نوع مورد انتظار دیگری نیاز دارد که رشته‌ای نیست. مشکل از تلاش برای تعیین آنچه کاربر از یک پرس و جو پیش بینی می کند ناشی می شود. ما می‌خواهیم با اجازه دادن به چند دستور دیگر به ترمینال به عنوان راهی برای جمع‌آوری داده‌های پیش‌بینی‌شده از کاربر، سعی کنیم با این مشکل مقابله کنیم. در مورد گام‌های بعدی کلی، ویژگی سومی وجود داشت که باید آن را به یک هدف کششی تبدیل می‌کردیم که تیم هنوز به آن علاقه دارد. امیدوار بودیم به موضوع رسیدگی به درخواست در فدراسیون آپولو بپردازیم. این ایده در حال حاضر هنوز به طور کامل شکل نگرفته است. با این حال، از آنچه ما می‌توانیم استنباط کنیم، مشکلاتی در نحوه رسیدگی به درخواست‌های گره توسط آپولو گیت‌وی وجود داشت که از کار با React Relay ناشی می‌شدند. در نسخه های بعدی QueryMock، ما دوست داریم این قابلیت را اضافه کنیم.

گروه را ملاقات کن!

QueryMock در حال حاضر تیمی متشکل از چهار مهندس نرم افزار است که در مورد امکانات Apollo GraphQL هیجان زده هستند. تیم ما اینجاست:

متشکرم!

از اینکه برای خواندن مقاله ما وقت گذاشتید سپاسگزاریم. اگر این محصول را مفید می‌دانید یا اگر کنجکاو هستید که بیشتر بدانید، از مخزن github ما و صفحه splash ما دیدن کنید! به زودی ما این را در npmjs راه اندازی خواهیم کرد تا بتوانید مستقیماً بسته ما را از آنجا نصب کنید.

تشکر ویژه از کاترین کیم (github، linkedin) برای راهنمایی و راهنمایی ما.