پیاده‌سازی GraphQL Subscriptions در React برای بروزرسانی لحظه‌ای داده‌ها

سلام به همه دوستان عزیز! من صادق جعفری هستم و امروز می‌خواهم در مورد یکی از جذاب‌ترین ویژگی‌های GraphQL، یعنی Subscriptions و نحوه پیاده‌سازی آن در React صحبت کنم. اگر شما هم مثل من علاقه‌مند به بروزرسانی لحظه‌ای داده‌ها در اپلیکیشن‌های وب خود هستید، این مقاله دقیقاً برای شماست.

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

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

ابتدا نیاز است که کتابخانه‌های مورد نیاز را نصب کنیم. برای این کار می‌توانید از کامندهای زیر استفاده کنید:

npm install @apollo/client graphql subscriptions-transport-ws
 

این کتابخانه‌ها به شما امکان می‌دهند که به سادگی Subscriptions را در اپلیکیشن React خود پیاده‌سازی کنید. حالا که کتابخانه‌ها نصب شده‌اند، بیایید به سراغ پیکربندی Apollo Client برای پشتیبانی از WebSocket برویم.

پیکربندی Apollo Client برای استفاده از Subscriptions بسیار ساده است. ابتدا باید یک WebSocketLink ایجاد کنید و سپس آن را به Apollo Client اضافه کنید. به کد زیر توجه کنید:

import { ApolloClient, InMemoryCache, HttpLink, split } from '@apollo/client';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from '@apollo/client/utilities';

// ایجاد WebSocketLink
const wsLink = new WebSocketLink({
  uri: 'ws://localhost:4000/graphql',
  options: {
    reconnect: true
  }
});

// ایجاد HttpLink
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql'
});

// استفاده از split برای استفاده همزمان از HttpLink و WebSocketLink
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache()
});
 

در اینجا، ما از split استفاده می‌کنیم تا مشخص کنیم که برای Subscriptions از WebSocketLink و برای Queries و Mutations از HttpLink استفاده شود.

حالا که Apollo Client پیکربندی شده است، بیایید به سراغ ایجاد Subscription و استفاده از آن در کامپوننت‌های React برویم. به عنوان مثال، فرض کنید که ما یک اپلیکیشن چت داریم و می‌خواهیم پیام‌های جدید را به صورت لحظه‌ای دریافت کنیم. ابتدا باید یک Subscription تعریف کنیم:

subscription {
  messageAdded {
    id
    content
    author
  }
}
 

سپس می‌توانیم از این Subscription در کامپوننت React خود استفاده کنیم:

import React from 'react';
import { useSubscription, gql } from '@apollo/client';

const MESSAGE_ADDED = gql`
  subscription OnMessageAdded {
    messageAdded {
      id
      content
      author
    }
  }
`;

const MessageList = () => {
  const { data, loading, error } = useSubscription(MESSAGE_ADDED);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <ul>
      {data.messageAdded.map(({ id, content, author }) => (
        <li key={id}>
          <p>{content}</p>
          <p><strong>{author}</strong></p>
        </li>
      ))}
    </ul>
  );
};

export default MessageList;

در این مثال، ما از useSubscription برای استفاده از Subscription در کامپوننت خود استفاده کردیم. این هوک به صورت خودکار به تغییرات داده‌ها گوش می‌کند و زمانی که پیام جدیدی اضافه می‌شود، رابط کاربری را بروزرسانی می‌کند.

به همین سادگی! با استفاده از GraphQL Subscriptions و Apollo Client، شما می‌توانید بروزرسانی‌های لحظه‌ای داده‌ها را به راحتی در اپلیکیشن‌های React خود پیاده‌سازی کنید. این قابلیت به شما این امکان را می‌دهد که تجربه کاربری بسیار بهتری را برای کاربران خود فراهم کنید و آن‌ها را همواره در جریان آخرین تغییرات قرار دهید.

امیدوارم این مقاله برای شما مفید بوده باشد و توانسته باشید نحوه پیاده‌سازی GraphQL Subscriptions در React را به خوبی درک کنید. اگر سوالی دارید یا نیاز به راهنمایی بیشتر دارید، خوشحال می‌شوم که به شما کمک کنم. با من از طریق وب سایت شخصی‌ام https://sadeghjafari.ir در ارتباط باشید.

امیدوارم که از این مطلب لذت برده باشید و به شما در پروژه‌های آینده‌تان کمک کند. موفق باشید!