GraphQL: آینده API ها 🌐

Summarize this content to 400 words in Persian Lang
GraphQL در مقابل REST: مزایا و معایب زبان کوئری مدرن را برای APIها کشف کنید! 🌐

تصور کنید بتوانید یک API را سفارشی کنید تا دقیقاً داده های مورد نیازتان را ارائه دهد، نه بیشتر و نه کمتر. این وعده GraphQL است. در حالی که API های RESTful سال ها استاندارد بوده اند، GraphQL جایگزین مدرن و انعطاف پذیرتری ارائه می دهد. در این مقاله نگاهی دقیق به GraphQL می اندازیم و مزایا و معایب آن را با API های RESTful مقایسه می کنیم. من قبلاً در مقاله قبلی توضیح داده ام که دقیقاً REST API ها چیست

API های REST را درک کرده و از آنها استفاده کنیدAPI ها: همه جا حاضر هستند و همه از آنها استفاده می کنند، البته به طور مستقیم. اما آنها برای چه هستند و چگونه کار می کنند؟ شفاف سازی می کنیم 💡

GraphQL چیست؟ 🧐

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

GraphQL | یک زبان پرس و جو برای API شما

GraphQL چگونه کار می کند 🛠️

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

query {
user(id: “1”) {
name
email
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مثال بالا یک کوئری ساده GraphQL را نشان می دهد که نام و آدرس ایمیل یک کاربر با شناسه 1 را درخواست می کند.

مزایای GraphQL 🌟

پرس و جوهای داده کارآمد 🚀

GraphQL به مشتری اجازه می دهد تا دقیقاً داده های مورد نیاز را مشخص کند. این امر میزان انتقال داده را کاهش می دهد و کارایی را بهبود می بخشد، به ویژه برای برنامه های تلفن همراه با پهنای باند محدود.

انعطاف پذیری و سازگاری 🤹‍♀️

از آنجایی که مشتری ساختار پاسخ را تعیین می کند، API را می توان به راحتی با نیازهای مختلف و بدون نیاز به تغییرات در سمت سرور سازگار کرد.

تایپ قوی 🔠

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

به روز رسانی در زمان واقعی با اشتراک 📡

GraphQL از اشتراک هایی پشتیبانی می کند که امکان دریافت به روز رسانی در زمان واقعی داده ها را فراهم می کند. این به ویژه برای برنامه هایی مفید است که به اطلاعات به روز نیاز دارند، مانند برنامه های چت یا داشبورد.

معایب GraphQL ⚠

پیچیدگی اجرا🧩

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

خطرات امنیتی 🛡️

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

چالش های ذخیره سازی 🗄️

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

مقایسه: GraphQL در مقابل REST 🥊

پرس و جو داده ها

GraphQL: مشتری می تواند دقیقا مشخص کند که چه داده هایی مورد نیاز است.

باقی مانده: سرور ساختار پاسخ را تعیین می کند که اغلب منجر به برداشت بیش از حد یا کم واکشی می شود.

انعطاف پذیری

GraphQL: بسیار انعطاف پذیر است زیرا مشتری پرس و جوها را تعریف می کند.

باقی مانده: انعطاف کمتری دارد زیرا نقاط پایانی API و پاسخ های آنها ثابت هستند.

کارایی

GraphQL: کارآمدتر است زیرا فقط داده های مورد نیاز منتقل می شود.

باقی مانده: در صورت انتقال داده های بیشتر از نیاز، می تواند ناکارآمد باشد.

به روز رسانی در زمان واقعی

GraphQL: توسط اشتراک ها پشتیبانی می شود.

باقی مانده: باید از طریق مکانیسم های اضافی مانند WebSockets پیاده سازی شود.

مثال های کاربردی با جاوا اسکریپت 📜

حال بیایید به چند مثال عملی برای نشان دادن تفاوت بین REST و GraphQL نگاه کنیم.

مثال 1: بازیابی اطلاعات کاربر

باقی مانده

با یک API RESTful، شما معمولاً چندین نقطه پایانی را برای دریافت تمام داده‌های مورد نیاز خود فراخوانی می‌کنید.

// Benutzerinformationen abrufen
fetch(‘https://api.example.com/users/1’)
.then(response => response.json())
.then(user => {
console.log(user.name);
console.log(user.email);
// Weitere Details abrufen
fetch(`https://api.example.com/users/1/posts`)
.then(response => response.json())
.then(posts => console.log(posts));
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا کاربر ابتدا بازیابی می شود و سپس در یک تماس دوم با پست های کاربر تماس می گیرد. این منجر به تماس‌های شبکه‌ای متعدد و انتقال داده ناکارآمد می‌شود.

GraphQL

با GraphQL، تمام داده های مورد نیاز را می توان در یک پرس و جو بازیابی کرد.

const query = `
query {
user(id: “1”) {
name
email
posts {
title
content
}
}
}
`;

fetch(‘https://api.example.com/graphql’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ query })
})
.then(response => response.json())
.then(data => {
const user = data.data.user;
console.log(user.name);
console.log(user.email);
console.log(user.posts);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این مثال از یک پرس و جو استفاده می کند تا هم اطلاعات کاربر و هم پست های کاربر را بازیابی کند و در نتیجه انتقال داده کارآمدتر است.

مثال 2: یک کاربر را به روز کنید

باقی مانده

با RESTful API، به‌روزرسانی کاربر از طریق تماس PUT یا PATCH انجام می‌شود.

fetch(‘https://api.example.com/users/1’, {
method: ‘PUT’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({
name: ‘Neuer Name’,
email: ‘neueemail@example.com’
})
})
.then(response => response.json())
.then(user => console.log(user));

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

GraphQL

در GraphQL این از طریق یک جهش به دست می آید.

const mutation = `
mutation {
updateUser(id: “1”, input: {
name: “Neuer Name”,
email: “neueemail@example.com”
}) {
name
email
}
}
`;

fetch(‘https://api.example.com/graphql’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: JSON.stringify({ query: mutation })
})
.then(response => response.json())
.then(data => {
const user = data.data.updateUser;
console.log(user.name);
console.log(user.email);
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در اینجا مثال نحوه استفاده از جهش را برای به روز رسانی اطلاعات کاربر در حین بازگرداندن داده های تغییر یافته نشان می دهد.

راه اندازی سرور GraphQL با Node.js 🌐

برای ایجاد یک سرور GraphQL با Node.js به ابزارها و کتابخانه های زیر نیاز داریم:

Node.js – جاوا اسکریپت را در همه جا اجرا کنیدNode.js® یک زمان اجرا جاوا اسکریپت است که بر روی موتور جاوا اسکریپت V8 کروم ساخته شده است.

Express – چارچوب Node.js برنامه های کاربردی وب

آپولو سرور (کتابخانه سرور GraphQL)

آشنایی با سرور آپولو

مرحله 1: پروژه را تنظیم کنید

یک دایرکتوری جدید ایجاد کنید و یک پروژه Node.js را مقداردهی اولیه کنید:

mkdir graphql-server
cd graphql-server
npm init -y

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وابستگی های مورد نیاز را نصب کنید:

npm install express apollo-server-express graphql

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: طرحواره و حل کننده GraphQL را تعریف کنید

یک فایل ایجاد کنید schema.js و طرحواره و حل کننده های GraphQL را تعریف کنید:

const { gql } = require(‘apollo-server-express’);

// Definiere das GraphQL-Schema
const typeDefs = gql`
type User {
id: ID!
name: String!
email: String!
}

type Query {
user(id: ID!): User
}

type Mutation {
updateUser(id: ID!, name: String!, email: String!): User
}
`;

// Beispiel-Daten
const users = [
{ id: ‘1’, name: ‘Max Mustermann’, email: ‘max@example.com’ },
];

// Definiere die Resolver
const resolvers = {
Query: {
user: (parent, args) => users.find(user => user.id === args.id),
},
Mutation: {
updateUser: (parent, args) => {
const user = users.find(user => user.id === args.id);
if (user) {
user.name = args.name;
user.email = args.email;
}
return user;
},
},
};

module.exports = { typeDefs, resolvers };

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: سرور GraphQL را راه اندازی کنید

یک فایل ایجاد کنید index.js و سرور GraphQL را راه اندازی کنید:

const express = require(‘express’);
const { ApolloServer } = require(‘apollo-server-express’);
const { typeDefs, resolvers } = require(‘./schema’);

const app = express();
const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 4: سرور را راه اندازی کنید

سرور را راه اندازی کنید:

node index.js

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون سرور GraphQL شما از کار افتاده است http://localhost:4000/graphql. می توانید با باز کردن URL در مرورگر خود و اجرای پرس و جو در Apollo Playground سرور را آزمایش کنید.

نتیجه گیری 📋

GraphQL مزایای زیادی نسبت به API های RESTful دارد، به ویژه از نظر انعطاف پذیری و کارایی. با این حال، پیچیدگی و چالش های امنیتی بیشتری را نیز به همراه دارد. برای توسعه دهندگان آماده برای مقابله با این چالش ها، GraphQL می تواند یک فناوری قدرتمند و پیشگام باشد.

اگر سؤال یا نظری در مورد GraphQL دارید، لطفاً نظر خود را بنویسید یا فقط به انجمن مراجعه کنید.

اگر پست‌های من را دوست دارید، خوب است اگر وبلاگ من را برای مطالب فنی بیشتر دنبال کنید.

query {
  user(id: "1") {
    name
    email
  }
}

// Benutzerinformationen abrufen
fetch('https://api.example.com/users/1')
  .then(response => response.json())
  .then(user => {
    console.log(user.name);
    console.log(user.email);
    // Weitere Details abrufen
    fetch(`https://api.example.com/users/1/posts`)
      .then(response => response.json())
      .then(posts => console.log(posts));
  });

const query = `
  query {
    user(id: "1") {
      name
      email
      posts {
        title
        content
      }
    }
  }
`;

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ query })
})
  .then(response => response.json())
  .then(data => {
    const user = data.data.user;
    console.log(user.name);
    console.log(user.email);
    console.log(user.posts);
  });

fetch('https://api.example.com/users/1', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'Neuer Name',
    email: 'neueemail@example.com'
  })
})
  .then(response => response.json())
  .then(user => console.log(user));

const mutation = `
  mutation {
    updateUser(id: "1", input: {
      name: "Neuer Name",
      email: "neueemail@example.com"
    }) {
      name
      email
    }
  }
`;

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ query: mutation })
})
  .then(response => response.json())
  .then(data => {
    const user = data.data.updateUser;
    console.log(user.name);
    console.log(user.email);
  });

mkdir graphql-server
cd graphql-server
npm init -y

npm install express apollo-server-express graphql

const { gql } = require('apollo-server-express');

// Definiere das GraphQL-Schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    user(id: ID!): User
  }

  type Mutation {
    updateUser(id: ID!, name: String!, email: String!): User
  }
`;

// Beispiel-Daten
const users = [
  { id: '1', name: 'Max Mustermann', email: 'max@example.com' },
];

// Definiere die Resolver
const resolvers = {
  Query: {
    user: (parent, args) => users.find(user => user.id === args.id),
  },
  Mutation: {
    updateUser: (parent, args) => {
      const user = users.find(user => user.id === args.id);
      if (user) {
        user.name = args.name;
        user.email = args.email;
      }
      return user;
    },
  },
};

module.exports = { typeDefs, resolvers };

const express = require('express');
const { ApolloServer } = require('apollo-server-express');
const { typeDefs, resolvers } = require('./schema');

const app = express();
const server = new ApolloServer({ typeDefs, resolvers });

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

node index.js