Apollo Client দিয়ে Subscription পরিচালনা

Apollo Client দিয়ে GraphQL Subscription পরিচালনা একটি গুরুত্বপূর্ণ টেকনিক্যাল দিক, বিশেষত যখন আপনি রিয়েল-টাইম ডেটা ফিচার বা অ্যাপ্লিকেশন তৈরি করতে চান। গ্রাফকিউএল Subscription হল একটি মেকানিজম যা সার্ভার থেকে ক্লায়েন্টে রিয়েল-টাইম ডেটা আপডেট পাঠানোর জন্য ব্যবহৃত হয়। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে একটি দীর্ঘস্থায়ী কানেকশন তৈরি করে, যাতে ডেটাতে কোনো পরিবর্তন হলে তা অবিলম্বে ক্লায়েন্টকে জানানো হয়।

Apollo Client গ্রাফকিউএল Subscription এর জন্য WebSocket অথবা HTTP এর মাধ্যমে কানেকশন তৈরি করতে সহায়ক। এখানে আমরা দেখব কীভাবে Apollo Client দিয়ে Subscription পরিচালনা করতে হয় এবং এর জন্য প্রয়োজনীয় পদক্ষেপ গুলি কী কী।

Apollo Client দিয়ে Subscription ব্যবহারের জন্য প্রাথমিক সেটআপ

গ্রাফকিউএল Subscription ব্যবহারের জন্য, Apollo Client এবং Apollo Server উভয় পক্ষের কিছু কনফিগারেশন প্রয়োজন। চলুন আগে Apollo Client সেটআপ করি, যাতে আমরা Subscription চালাতে পারি।

ধাপ ১: Apollo Client ইনস্টল করা

প্রথমে, Apollo Client এবং WebSocket-এর জন্য অতিরিক্ত লাইব্রেরি @apollo/client এবং subscriptions-transport-ws ইনস্টল করতে হবে।

npm install @apollo/client subscriptions-transport-ws

ধাপ ২: Apollo Client কনফিগারেশন

Apollo Client ব্যবহার করতে, আমরা ApolloClient এবং InMemoryCache কনফিগার করব, এবং WebSocketLink তৈরি করে Subscription পরিচালনা করব।

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

// WebSocket URL (Subscription এর জন্য)
const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`, // Apollo Server এর WebSocket URL
  options: {
    reconnect: true, // কানেকশন রিকনেক্ট হবে যদি হারিয়ে যায়
  },
});

// HTTP Link যদি Query এবং Mutation করার জন্য থাকে
const httpLink = new HttpLink({
  uri: 'http://localhost:4000/graphql',
});

// Apollo Client তৈরি করা
const client = new ApolloClient({
  link: wsLink, // যদি শুধুমাত্র Subscription ব্যবহৃত হয় তবে WebSocketLink ব্যবহার করুন
  cache: new InMemoryCache(),
});

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        {/* অ্যাপ্লিকেশনের অন্যান্য উপাদান */}
      </div>
    </ApolloProvider>
  );
}

export default App;

এখানে:

• WebSocketLink এর মাধ্যমে Subscription পরিচালনা হচ্ছে।
• HttpLink শুধুমাত্র Queries এবং Mutations এর জন্য ব্যবহৃত হচ্ছে, তবে যদি Subscription এর পাশাপাশি Query বা Mutation ব্যবহার করতে চান তবে দুটি লিংক একসাথে কনফিগার করা যেতে পারে।

ধাপ ৩: Subscription কুয়েরি তৈরি করা

এখন, গ্রাফকিউএল Subscription কুয়েরি তৈরি করতে হবে। ধরে নিন আমাদের একটি messageAdded নামক Subscription আছে যা নতুন মেসেজ আসলে ক্লায়েন্টকে জানাবে।

subscription {
  messageAdded {
    id
    content
    sender {
      name
    }
  }
}

এটি সার্ভার থেকে messageAdded সাবস্ক্রাইব করবে এবং নতুন মেসেজের id, content, এবং sender নাম ফিরিয়ে আনবে।

ধাপ ৪: Apollo Client দিয়ে Subscription সাবস্ক্রাইব করা

আপনার অ্যাপ্লিকেশন কোডে Apollo Client দিয়ে গ্রাফকিউএল Subscription কুয়েরি সাবস্ক্রাইব করতে হবে।

import React from 'react';
import { useSubscription } from '@apollo/client';
import gql from 'graphql-tag';

// Subscription কুয়েরি
const MESSAGE_ADDED_SUBSCRIPTION = gql`
  subscription {
    messageAdded {
      id
      content
      sender {
        name
      }
    }
  }
`;

function MessageList() {
  // Apollo Client দিয়ে Subscription সাবস্ক্রাইব
  const { data, loading, error } = useSubscription(MESSAGE_ADDED_SUBSCRIPTION);

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

  return (
    <div>
      <h3>New Messages</h3>
      <ul>
        {data.messageAdded.map((message) => (
          <li key={message.id}>
            <strong>{message.sender.name}: </strong>
            {message.content}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default MessageList;

এখানে:

• useSubscription hook ব্যবহৃত হয়েছে messageAdded Subscription কুয়েরি সাবস্ক্রাইব করার জন্য।
• Subscription কুয়েরির ফলাফল হিসেবে নতুন মেসেজগুলো data এর মধ্যে আসবে, যা আমরা render করছি।

ধাপ ৫: Apollo Server এ Subscription কনফিগারেশন

যেহেতু আমরা ক্লায়েন্টের Subscription কার্যকর করছি, আমাদের Apollo Server-এও Subscription কনফিগার করতে হবে। এখানে একটি সাধারণ Apollo Server সেটআপ দেখানো হলো যেখানে WebSocket কনফিগারেশন ব্যবহৃত হচ্ছে।

const { ApolloServer, gql } = require('apollo-server');
const { PubSub } = require('graphql-subscriptions');

const pubsub = new PubSub();

// Schema Definition
const typeDefs = gql`
  type Message {
    id: ID!
    content: String
    sender: User
  }

  type User {
    id: ID!
    name: String
  }

  type Subscription {
    messageAdded: Message
  }

  type Mutation {
    addMessage(content: String, sender: String): Message
  }

  type Query {
    messages: [Message]
  }
`;

// Resolvers
const resolvers = {
  Query: {
    messages: () => [{ id: '1', content: 'Hello', sender: { name: 'John' } }],
  },
  Mutation: {
    addMessage: (_, { content, sender }) => {
      const message = { id: String(Date.now()), content, sender: { name: sender } };
      pubsub.publish('MESSAGE_ADDED', { messageAdded: message });
      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator('MESSAGE_ADDED'),
    },
  },
};

// Apollo Server setup
const server = new ApolloServer({
  typeDefs,
  resolvers,
  subscriptions: {
    path: '/subscriptions', // WebSocket URL for subscriptions
  },
});

server.listen().then(({ url }) => {
  console.log(`Server is running at ${url}`);
});

এখানে:

• PubSub ব্যবহার করা হয়েছে রিয়েল-টাইম ডেটা ট্রান্সমিশনের জন্য।
• addMessage মিউটেশন নতুন মেসেজ অ্যাড করবে এবং সেই পরিবর্তন messageAdded Subscription এর মাধ্যমে ক্লায়েন্টে পাঠানো হবে।

ধাপ ৬: Apollo Client Subscription সঙ্গে Error Handling

গ্রাফকিউএল Subscription ব্যবহারের সময় error handling গুরুত্বপূর্ণ। আপনি Subscription সাবস্ক্রাইব করার সময় যদি কোনো ত্রুটি ঘটে, তবে আপনি error প্রপার্টি ব্যবহার করে ত্রুটি দেখতে পারেন।

const { data, loading, error } = useSubscription(MESSAGE_ADDED_SUBSCRIPTION);

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

এখানে error.message ত্রুটির বিস্তারিত দেখাবে।

সারাংশ

Apollo Client দিয়ে GraphQL Subscription পরিচালনা করার মাধ্যমে আপনি রিয়েল-টাইম ডেটা পেতে পারেন। এটি সহজ এবং কার্যকরী উপায়ে গ্রাফকিউএল API এর মাধ্যমে রিয়েল-টাইম কমিউনিকেশন সম্ভব করে তোলে। Apollo Client এবং Apollo Server এর WebSocket এবং PubSub ব্যবহারের মাধ্যমে Subscription বাস্তবায়ন করা যায়, এবং আপনার অ্যাপ্লিকেশনকে উন্নত এবং দ্রুত প্রতিক্রিয়া সহ করতে সহায়ক।