Apollo Client দিয়ে GraphQL Query এবং Mutation পরিচালনা

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

এখানে Apollo Client ব্যবহার করে GraphQL Query এবং Mutation পরিচালনা করার প্রক্রিয়া এবং এর উদাহরণ দেওয়া হয়েছে।

Apollo Client সেটআপ

Apollo Client ব্যবহার করতে প্রথমে আপনার প্রকল্পে এটি ইন্সটল করতে হবে। নিচের কমান্ড ব্যবহার করে Apollo Client ইন্সটল করুন:

npm install @apollo/client graphql

এবার Apollo Client ব্যবহার করতে, আপনাকে একটি ApolloProvider তৈরি করতে হবে, যা আপনার অ্যাপ্লিকেশনকে গ্রাফকিউএল API-এর সাথে সংযুক্ত করবে।

import React from 'react';
import { ApolloProvider, InMemoryCache } from '@apollo/client';
import App from './App';

// Apollo Client সেটআপ
const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql', // আপনার API endpoint
  cache: new InMemoryCache(),
});

function Root() {
  return (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
}

export default Root;

এখানে:

• uri: এটি আপনার গ্রাফকিউএল API এর endpoint।
• cache: InMemoryCache গ্রাফকিউএল ডেটা ক্যাশিংয়ের জন্য ব্যবহৃত হয়, যাতে একই ডেটার জন্য বারবার রিকোয়েস্ট না পাঠানো হয়।

GraphQL Query পরিচালনা

Apollo Client দিয়ে GraphQL Query পরিচালনা করতে আপনি useQuery হুক ব্যবহার করবেন। এটি একটি React হুক যা গ্রাফকিউএল কুয়েরি চালাতে এবং রেসপন্স পাওয়ার পর ডেটা ব্যবহার করতে সাহায্য করে।

Query উদাহরণ

ধরা যাক, আপনি একটি getUser কুয়েরি চালাতে চান, যা একটি ইউজারের তথ্য ফেরত আনে:

# GraphQL Query
query getUser($id: ID!) {
  user(id: $id) {
    id
    name
    email
  }
}

এখন, Apollo Client দিয়ে useQuery হুক ব্যবহার করে এই কুয়েরি চালানোর উদাহরণ:

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

// GraphQL কুয়েরি
const GET_USER = gql`
  query getUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

function User({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId }, // কুয়েরিতে আর্গুমেন্ট পাঠানো
  });

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

  return (
    <div>
      <h3>{data.user.name}</h3>
      <p>Email: {data.user.email}</p>
    </div>
  );
}

export default User;

এখানে:

• useQuery হুক গ্রাফকিউএল কুয়েরি চালায় এবং তার ফলাফল দেয়।
• variables প্রপসের মাধ্যমে কুয়েরির আর্গুমেন্ট পাঠানো হয়।

Query Response Handling

• loading: যদি কুয়েরি এখনও চলমান থাকে, তাহলে এটি true হবে।
• error: যদি কুয়েরিতে কোনো সমস্যা হয়, তবে ত্রুটি (error) অবজেক্ট প্রদান করা হবে।
• data: কুয়েরির সফল ফলাফল যেখানে ডেটা রাখা হবে।

GraphQL Mutation পরিচালনা

Apollo Client দিয়ে GraphQL Mutation পরিচালনা করতে useMutation হুক ব্যবহার করা হয়। মিউটেশন সাধারণত ডেটা তৈরি, আপডেট বা মুছে ফেলতে ব্যবহৃত হয়।

Mutation উদাহরণ

ধরা যাক, আপনি একটি নতুন ইউজার তৈরি করার জন্য একটি mutation চালাতে চান:

# GraphQL Mutation
mutation addUser($name: String!, $email: String!) {
  addUser(name: $name, email: $email) {
    id
    name
    email
  }
}

এখন, Apollo Client দিয়ে useMutation হুক ব্যবহার করে এই মিউটেশন চালানোর উদাহরণ:

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

// GraphQL Mutation
const ADD_USER = gql`
  mutation addUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`;

function AddUser() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [addUser, { data, loading, error }] = useMutation(ADD_USER);

  const handleSubmit = (e) => {
    e.preventDefault();
    addUser({ variables: { name, email } });
  };

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

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Name"
        />
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
        />
        <button type="submit">Add User</button>
      </form>

      {data && (
        <div>
          <h3>{data.addUser.name}</h3>
          <p>Email: {data.addUser.email}</p>
        </div>
      )}
    </div>
  );
}

export default AddUser;

এখানে:

• useMutation হুক মিউটেশন চালানোর জন্য ব্যবহৃত হয় এবং variables প্রপসের মাধ্যমে ডেটা প্রেরণ করা হয়।
• loading এবং error হ্যান্ডলিংয়ের মাধ্যমে, ইউজারের জন্য একটি সুগম অভিজ্ঞতা নিশ্চিত করা হয়।

Query and Mutation Error Handling

Apollo Client তে Error Handling খুবই গুরুত্বপূর্ণ। আপনি কুয়েরি বা মিউটেশন এর সময় loading, error, এবং data অবজেক্ট ব্যবহার করে ত্রুটিগুলি পরিচালনা করতে পারেন।

const { loading, error, data } = useQuery(SOME_QUERY);

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

এটি নিশ্চিত করবে যে ইউজারের কাছে যথাযথ তথ্য এবং ত্রুটি বার্তা প্রদর্শিত হচ্ছে।

Apollo Client এর সুবিধা

1. Caching: Apollo Client ইন-বিল্ট ক্যাশিং সিস্টেম দিয়ে আসে, যা একই ডেটা বারবার রিকোয়েস্ট না করতে দেয়, ফলে অ্যাপ্লিকেশন দ্রুত কাজ করে।
2. Error Handling: Apollo Client তে ডিফল্টভাবে কার্যকরী ত্রুটি পরিচালনা এবং রেসপন্স ম্যানেজমেন্ট রয়েছে।
3. Real-time Updates: Apollo Client সাবস্ক্রিপশন সাপোর্ট করে, যা রিয়েল-টাইম ডেটা আপডেট করতে সক্ষম।
4. Optimistic UI: মিউটেশন করার সময়, আপনি UI-কে optimistically আপডেট করতে পারেন, যাতে ব্যবহারকারী অবিলম্বে ফলাফল দেখতে পায়।

সারাংশ

Apollo Client ব্যবহার করে গ্রাফকিউএল কুয়েরি এবং মিউটেশন পরিচালনা করা খুবই সহজ এবং কার্যকরী। এটি ক্লায়েন্ট সাইডে ডেটা ফেচিং, আপডেট এবং রিয়েল-টাইম ডেটা ম্যানিপুলেশনকে আরও কার্যকরী করে তোলে। useQuery এবং useMutation হুক ব্যবহার করে আপনি গ্রাফকিউএল কুয়েরি এবং মিউটেশন পরিচালনা করতে পারবেন, আর Apollo Client এর ইন-বিল্ট ক্যাশিং এবং ত্রুটি হ্যান্ডলিংয়ের মাধ্যমে অ্যাপ্লিকেশনটির পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে পারবেন।