شروع عملی GraphQL با Node.js و Express
GraphQL یک زبان جستجو است که توسط فیس بوک با هدف ساخت برنامه های کلاینت بر اساس نحو بصری و انعطاف پذیر برای توصیف نیازمندی و تعامل داده ها ایجاد شده است. یک سرویس GraphQL با تعیین انواع و فیلدهای مربوط به آن نوع ها ایجاد می شود ، سپس عملکردهایی را برای هر فیلد در هر نوع ارائه می دهد.
هنگامی که یک سرویس GraphQL در حال اجرا است (به طور معمول با URL در یک سرویس وب) ، می تواند برای اعتبار سنجی و اجرا، جستارهایGraphQL را دریافت کند. ابتدا جستار دریافت شده بررسی می شود تا اطمینان حاصل شود که فقط به انواع و فیلدهای تعریف شده اشاره دارد ، سپس توابع ارائه شده را اجرا می کند تا نتیجه ای حاصل شود.
در این آموزش قصد داریم سرور مجازی GraphQL را با استفاده از Express پیاده سازی کنیم و از آن برای یادگیری ویژگی های مهم GraphQL استفاده کنیم.
برخی از ویژگی های GraphQL عبارتند از:
• سلسله مراتبی – جستجوها دقیقاً مانند داده هایی هستند که برگردانده می شوند.
• پرس و جوهای مختص کلاینت – کلاینت این آزادی را دارد که بگوید چه چیزی را از سرور مجازی دریافت کند ،
• به صورت قوی دسته بندی شده – می توانید قبل از اجرا ، یک پرس و جو را به صورت نحوی و درون سیستم نوع GraphQL تأیید کنید. همچنین به اهرم ابزارهای قدرتمندی که باعث بهبود تجربه توسعه می شوند ، مانند GraphiQL کمک می کند.
• درون نگرانه – می توانید با استفاده از خود دستور GraphQL ، نوع سیستم را پرس و جو کنید. این امر برای تجزیه داده های ورودی به رابط های قوی دسته بندی شده عالی است و نیازی به تجزیه و تبدیل دستی JSON به آبجکت ها ندارد.
چرا از GraphQL استفاده کنیم
یکی از چالش های اصلی در تماس های معمول REST عدم توانایی کلاینت در درخواست مجموعه داده های سفارشی (محدود یا گسترش یافته) است. در بیشتر موارد ، هنگامی که کلاینت اطلاعاتی را از سرور مجازی درخواست می کند ، همه یا هیچ یک از قسمت ها را دریافت نمی کند.
مشکل دیگر، کار و حفظ چندین نقطه انتهایی است. با رشد یک پلتفرم، در نتیجه تعداد آنها افزایش می یابد. بنابراین ، کلاینت ها اغلب نیاز به درخواست داده ها از نقاط انتهایی مختلف دارند. API های GraphQL از نظر انواع و فیلدها سازماندهی می شوند نه بر حسب نقاط پایانی. شما می توانید از یک نقطه انتهایی به قابلیت های کامل داده های خود دسترسی پیدا کنید.
هنگام ساختن یک سرور مجازی GraphQL ، فقط لازم است که یک URL برای واکشی و جهش همه داده ها داشته باشد. بنابراین ، کلاینت می تواند با ارسال یک رشته پرس و جو به سرور مجازی که خواسته اش را توصیف میکند، مجموعه ای از داده ها را درخواست کند.
تنظیم GraphQL با Node
ما با ساختار اصلی فایل و قطعه کد نمونه شروع می کنیم. برای دنبال کردن گام به گام این آموزش ، یک پوشه GraphQL ایجاد کنید و در داخل پوشه با استفاده از npm init -y یک پروژه npm را آغاز کنید. سپس یک فایل server.js ایجاد کنید که فایل اصلی خواهد بود. برای کد كامل ، منبع را با استفاده از دستورالعمل های موجود در منبع github ضمیمه شده ، كلون كنید.
بسته های لازم را نصب خواهیم کرد که در هر مرحله مورد بحث قرار خواهد گرفت.
⦁ $ npm i graphql express express-graphql -S
⦁
با استفاده از Express و express-Graphql ، یعنی میان افزار سرور مجازی HTTP ، یک سرور مجازی تنظیم خواهیم کرد. در مورد معنی کد نگران نباشید زیرا در مراحل بعدی با افزودن مطالب بیشتر ، آن را اندک اندک به طور کامل کشف خواهیم کرد.
var express = require(‘express’);
var graphqlHTTP = require(‘express-graphql’);
var { buildSchema } = require(‘graphql’);
// Initialize a GraphQL schema
var schema = buildSchema(`
type Query {
hello: String
}
`);
// Root resolver
var root = {
hello: () => ‘Hello world!’
};
// Create an express server and a GraphQL endpoint
var app = express();
app.use(‘/graphql’, graphqlHTTP({
schema: schema, // Must be provided
rootValue: root,
graphiql: true, // Enable GraphiQL when server endpoint is accessed in browser
}));
app.listen(4000, () => console.log(‘Now browse to localhost:4000/graphql’));
مفاهیم
تاکنون برخی از ویژگیها و مزایای GraphQL را مورد بررسی قرار داده ایم. در این بخش به اصطلاحات مختلف و پیاده سازی برخی از مشخصات فنی در GraphQL خواهیم پرداخت. برای تمرین ویژگی های خود از یک سرور مجازی اکسپرس استفاده خواهیم کرد.
شماتیک
در GraphQL ، Schema پرس و جوها و جهش ها را مدیریت میکند و چیزی که مجاز است در سرور مجازی GraphQL اجرا شود را تعریف می کند. شماتیک یک سیستم نوع GraphQL API را تعریف می کند. مجموعه کاملی از داده های ممکن (اشیاء ، زمینه ها ، روابط ، همه چیز) را که کلاینت می تواند به آن دسترسی داشته باشد ، توصیف می کند. تماس های کلاینت در مقابل شماتیک اعتبار سنجی و اجرا می شوند. کلاینت می تواند از طریق درون نگاری اطلاعات مربوط به شماتیک را پیدا کند. شماتیک در سرور مجازی GraphQL API قرار دارد.
زبان تعریف رابط GraphQL (IDL) یا زبان تعریف شماتیک (SDL) مختصر ترین روش برای مشخص کردن یک طرح واره GraphQL است. ابتدایی ترین اجزای یک شماتیک GraphQL انواع آبجکت هستند ، که فقط نشان دهنده نوعی آبجکت هستند که می توانید سرویس خود بگیرید و اینکه چه فیلد هایی را در اختیار شما قرار می دهد. در زبان شماتیک GraphQL ، ممکن است آن را مانند این نشان دهیم:
type User {
id: ID!
name: String!
age: Int
}
در قطعه فوق ما از تابع buildSchema استفاده می کنیم که یک آبجکت شماتیک را از زبان شماتیک GraphQL می سازد.
var schema = buildSchema(`
type Query {
hello: String
}
`);
انواع ساخت
در داخل buildSchema ، می توان انواع مختلفی را تعریف کرد. ممکن است در بیشتر موارد به type Query {…} و type Mutation {…} توجه کنید. type Query {…} آبجکتی است که توابعی را شامل میشود که روی جستارهای GraphQL نگاشت می شود و برای واکشی داده ها (معادل GET در REST) استفاده می شود ، در حالی که type Mutation {…} توابعی را دارد که روی جهش ها نگاشت می شود و برای ایجاد ، به روزرسانی یا حذف داده ها (معادل POST ، UPDATE و DELETE در REST) استفاده میشود.
ما با اضافه کردن برخی از انواع منطقی ، شماتیک خود را کمی پیچیده خواهیم کرد. به عنوان مثال ، می خواهیم یک user و آرایه ای از users از نوع person که خصوصیات id ، name ، age و gender دارند را بازگردانیم.
var schema = buildSchema(`
type Query {
user(id: Int!): Person
users(gender: String): [Person]
},
type Person {
id: Int
name: String
age: Int
gender: String
}
`);
شما می توانید به دستور جالبی در بالا توجه کنید ، [Person] به معنی بازگرداندن مجموعه ای از نوع person است در حالی که علامت تعجب در user(id: Int!) بدین معنی است که id باید ارائه شود. جستار users یک متغیر جنسیت اختیاری می گیرد.
resolver
resolver مسئول نگاشت عملکرد روی تابع واقعی است. در داخل type Query، عملیاتی به نام users داریم. ما این عملیات را به یک تابع با همین نام در داخل root نگاشت می کنیم. همچنین برای این قابلیت ، چند کاربر ساختگی را ایجاد خواهیم کرد.
…
var users = [ // Dummy data
{
id: 1,
name: ‘Brian’,
age: ’21’,
gender: ‘M’
},
{
id:2,
name: ‘Kim’,
age: ’22’,
gender: ‘M’
},
{
id:3,
name: ‘Joseph’,
age: ’23’,
gender: ‘M’
},
{
id:3,
name: ‘Faith’,
age: ’23’,
gender: ‘F’
},
{
id:5,
name: ‘Joy’,
age: ’25’,
gender: ‘F’
}
];
var getUser = function(args) { … } // Return a single user
var retrieveUsers = function(args) { … } // Return a list of users
…
var root = {
user: getUser, // Resolver function to return user with specific id
users: retrieveUsers
};
برای خواناتر کردن کد، به جای اینکه همه چیز را در resolver اصلی جمع کنیم ، توابع جداگانه ایجاد خواهیم کرد. هر دو تابع یک پارامتر args اختیاری دارند که متغیرهایی را از جستار کلاینت دربردارند. بیایید اجرایی را برای resolver ها ارائه دهیم و عملکرد آنها را تست کنیم.
…
var getUser = function(args) { // return a single user based on id
var userID = args.id;
return users.filter(user => {
return user.id == userID;
})[0];
}
var retrieveUsers = function(args) { // Return a list of users. Takes an optional gender parameter
if(args.gender) {
var gender = args.gender;
return users.filter(user => user.gender === gender);
} else {
return users;
}
}
…
جستار
query getSingleUser {
user {
name
age
gender
}
}
خروجی
در نمودار بالا ، ما از عملیاتی به نام getSingleUser استفاده می کنیم تا یک کاربر واحد با نام ، جنسیت و سن آنها را بدست آوریم. به صورت اختیاری می توانیم مشخص کنیم که فقط در صورت عدم نیاز به سن و جنس ، به نام آنها احتیاج داریم.
هنگامی که چیزی در ورودهای شبکه یا سرور مجازی GraphQL شما رخ می دهد ، به جای تلاش برای رمزگشایی مطالب ، آسانتر است که یک پرس و جو در پایگاه داده خود را با نام خود شناسایی کنید.
این پرس و جو id مورد نیاز را ارائه نمی دهد و GraphQL به ما یک پیام خطای توصیفی می دهد. اکنون یک جستار صحیح ایجاد خواهیم کرد ، به استفاده از متغیرها / آرگومان ها دقت کنید.
جستار
query getSingleUser($userID: Int!) {
user(id: $userID) {
name
age
gender
}
}
متغیرها
{
“userID”:1
}
خروجی
نام های مستعار
شرایطی را تصور کنید که باید دو کاربر مختلف را بازیابی کنیم. چگونه می توانیم هر کاربر را شناسایی کنیم؟ در GraphQL ، شما به طور مستقیم نمی توانید یک فیلد یکسان را با آرگومان های مختلف جستجو کنید. بیایید این مطلب را نشان دهیم.
جستار
query getUsersWithAliasesError($userAID: Int!, $userBID: Int!) {
user(id: $userAID) {
name
age
gender
},
user(id: $userBID) {
name
age
gender
}
}
متغیرها
{
“userAID”:1,
“userBID”:2
}
خروجی
خطا توصیفی است و حتی استفاده از نام های مستعار را نشان می دهد. بیایید اجرا را اصلاح کنیم.
query getUsersWithAliases($userAID: Int!, $userBID: Int!) {
userA: user(id: $userAID) {
name
age
gender
},
userB: user(id: $userBID) {
name
age
gender
}
}
متغیرها
{
“userAID”:1,
“userBID”:2
}
خروجی
اکنون می توانیم به طور صحیح هر کاربر را با فیلدهای خود مشخص کنیم.
بخش ها (fragmentها)
سؤال بالا چندان بد نیست ، اما یک مشکل دارد. ما در حال تکرار فیلدهای یکسان برای userA و userB هستیم. می توانیم چیزی را پیدا کنیم که جستجوهای ما را DRY می کند. GraphQL شامل واحدهای قابل استفاده مجدد به نام fragment است که به شما امکان می دهد مجموعه هایی از فیلدها را بسازید ، و سپس آنها را در جستارهای مورد نظر خود درج کنید.
جستار
query getUsersWithFragments($userAID: Int!, $userBID: Int!) {
userA: user(id: $userAID) {
…userFields
},
userB: user(id: $userBID) {
…userFields
}
}
fragment userFields on Person {
name
age
gender
}
متغیرها
{
“userAID”:1,
“userBID”:2
}
خروجی
ما قطعه ای به نام userFields ایجاد کرده ایم که فقط می تواند در type Person اعمال شود و از آن برای بازیابی کاربران استفاده می شود.
دستورالعمل ها
دستورالعمل ها به ما امکان می دهند ساختار و شکل نمایش داده ها را با استفاده از متغیرها به طور پویا تغییر دهیم. در بعضی از موارد ممکن است بخواهیم بدون تغییر شماتیک ، برخی از فیلدها را رد کنیم یا شامل شویم. دو دستورالعمل موجود عبارتند از:
⦁ @include(if: Boolean) فقط در صورت صحت آرگومان این قسمت را در فیلد وارد میکند.
⦁ @skip(if: Boolean) در صورت صحیح بودن آرگومان ، از این قسمت پرش میگذرد.
بگذارید بگوییم که می خواهیم کاربران با جنسیت “F” را بازیابی کنیم اما سن آنها را کنار بگذاریم و id آنها را درج کنیم. از متغیرها برای وارد کردن جنسیت استفاده می کنیم و از دستورالعمل ها برای رد کردن و مستثنی شدن ویژگی های جست و جو استفاده می کنیم.
جستار
query getUsers($gender: String, $age: Boolean!, $id: Boolean!) {
users(gender: $gender){
…userFields
}
}
fragment userFields on Person {
name
age @skip(if: $age)
id @include(if: $id)
}
متغیرها
{
“gender”: “F”,
“age”: true,
“id”: true
}
خروجی
جهش ها
تاکنون با پرس و جوها سر و کار داشته ایم، عملیاتی برای بازیابی اطلاعات. جهش ها دومین عملیات اصلی در GraphQL هستند که با ایجاد ، حذف و به روز رسانی داده ها سر و کار دارند. بیایید به چند نمونه از نحوه انجام جهش ها توجه کنیم. به عنوان مثال ، ما می خواهیم یک کاربر را با id==1 به روز کنیم و سن ، نام آنها را تغییر داده و جزئیات جدید کاربر را برگردانیم.
ما طرح خود را به روز خواهیم کرد تا یک نوع جهش را در خود جای دهد و همچنین resolver اصلی ما را با توابع resolver مربوطه به روز کند.
// Add mutations
var schema = buildSchema(`
…
type Mutation {
updateUser(id: Int!, name: String!, age: String): Person
}
`);
…
var updateUser = function({id, name, age}) { // Update a user and return new user details
users.map(user => {
if(user.id === id) {
user.name = name;
user.age = age;
return user;
}
});
return users.filter(user=> user.id === id) [0];
}
…
var root = {
user: getUser,
users: retrieveUsers,
updateUser: updateUser // Include mutation function in root resolver
};
فرض کنید این اطلاعات اولیه کاربر هستند.
پس از جهش برای به روزرسانی کاربر ، اطلاعات جدید کاربر را دریافت می کنیم.
جستار
mutation updateUser($id: Int!, $name: String!, $age: String) {
updateUser(id: $id, name:$name, age: $age){
…userFields
}
}
fragment userFields on Person {
name
age
gender
}
متغیرها
{
“id”: 1,
“name”: “Keavin”,
“age”: “27”
}
خروجی
نتیجه
در این راهنما ، ما مفاهیم اساسی GraphQL و همچنین برخی از مثال های نسبتاً پیچیده را پوشش داده ایم. بیشتر این مثالها تفاوتهایی را بین GraphQL و REST برای کاربرانی که با REST تعامل داشته اند نشان می دهد.
برای کسب اطلاعات بیشتر در مورد GraphQL ، مطالب رسمی را بررسی کنید.
از این لینک ها زیر می توانید آمورش های بیشتری برای لینوکس پیدا کنید :
استفاده از nsh برای دستورات از راه دور اوبونتو 18 – میزبانی وب سایت با Caddy اوبونتو 18
تنظیم سرور ذخیره سازی آبجکت با استفاده از Minio در اوبونتو 18 – ضبط و اشتراک گذاری ترمینال با Terminalizer اوبونتو
تنظیم مسیریابی شرطی و پاسخگو با React Router v4 – ایجاد یک URL کوتاه کننده با Django و GraphQL
یک برنامه ردیابی سلامت را با React ،GraphQL و Okta – ساخت برنامه چت زمان حقیقی React و GraphQL
به روزرسانی فیلترهای مرتب سازی Angular (زاویه ای) – با استفاده از React ، Superagent و API اینستاگرام
نحوه ساختن یک برنامه جهانی با Nuxt.js و Django – دکمه دانلود با ریزتعاملات با CSS ، anime.js و segment.js
نحوه اضافه کردن عکسهای پیشرفته در Node و Express – با Vue ،GraphQL و Apollo Client یک وبلاگ ساخت
یک برنامه SSR با روتر Preact ، Unistore و Preact بسازید – ساخت برنامه های وب پیشرونده با Angular
اشکال زدایی JavaScript در تولید با نقشه های منبع – می توان با Koa برنامه “سلام جهانی” ساخت
ساختن یک برنامه با Node ، React ، Okta – مدیریت حالت فرم در React با Redux Form
نحوه تنظیم Laravel ، Nginx و MySQL – ارتقاء از AngularJS به Angular با ngUpgrade
استفاده از ویژوال استودیو از راه دور – احراز هویت API با JSON Web Tokens و Passport
راه اندازی یک پروژه React با Parcel – ایجاد Swiper مانند Netflix را در Vue
ساختن یک ربات تلگرام با Laravel و BotMan – استفاده از map، filter، و reduce در جاوااسکریپت
چگونه می توان موتور جستجوی زمان واقعی را با Vue – ساختن سیستم مستندات (Documentation) با Vue و VuePress
استفاده از اشتراک زنده با کد ویژوال استودیو – ساخت یک مقیاس اندازه گیری قدرت رمز عبور را در React
شروع عملی GraphQL با Node.js و Express – ساخت یک برنامه آب و هوا در Django
نحوه نصب Discourse روی Ubuntu 18 – تأیید رمز عبور با استفاده از درخواست فرم Laravel
نحوه نصب MySQL در CentOS 8 – استفاده از پسوند PDO PHP برای انجام تراکنش MySQL
نصب و پیکربندی SNMP Daemon و Client در Ubuntu 18 – نصب Linux، Nginx، MariaDB،PHP در Debian 10
کلمات کلیدی خرید سرور
خرید vps – خرید سرور مجازی – خرید سرور – سرور هلند – فروش vps – سرور مجازی آمریکا – خریدvps – سرور مجازی هلند – فروش سرور مجازی – سرور آمریکا – vps – سرور مجازی انگلیس – سرور مجازی آلمان – سرور مجازی کانادا – خرید vps آمریکا – خرید وی پی اس – سرور – خرید سرور مجازی هلند – vps خرید – سرور مجازی فرانسه – سرور مجازی هلند – خرید vps آمریکا – خرید سرور مجازی ارزان هلند – vps – خرید vps هلند – خرید سرور مجازی آمریکا – خرید vps فرانسه – تست vps – سرور مجازی تست – سرور مجازی ویندوز – ارزانترین vps – خرید وی پی اس – vps ارزان –
https://vpsgol.net/product/vps-germany/
https://vpsgol.net/product/vps-usa/
https://vpsgol.net/product/vps-france/
https://vpsgol.net/product/vps-canada/
https://vpsgol.net/product/vps-poland/
https://vpsgol.net/product/vps-netherlands/
https://vpsgol.net/product/vps-england/