GraphQL Queries এবং Mutations গাইড ও নোট

Next.js এবং GraphQL এর ইন্টিগ্রেশনটি একটি শক্তিশালী সমাধান প্রদান করে, যার মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনে ডাইনামিক ডেটা ফেচিং এবং মিউটেশন কার্যক্রম সহজেই পরিচালনা করতে পারেন। GraphQL হল একটি API কুয়েরি ভাষা, যা ক্লায়েন্টদেরকে নির্দিষ্ট ডেটা আহরণ এবং ম্যানিপুলেট করার জন্য খুবই নমনীয় ও কার্যকরী উপায় প্রদান করে।

এই টিউটোরিয়ালে GraphQL Queries এবং Mutations ব্যবহার করে Next.js অ্যাপ্লিকেশনে ডেটা ফেচিং ও ম্যানিপুলেশনের প্রক্রিয়া আলোচনা করা হবে।

১. GraphQL কী?

GraphQL একটি API ভাষা যা আপনাকে সার্ভার থেকে প্রয়োজনীয় ডেটা আহরণ করতে দেয়। এটি REST API এর তুলনায় আরও ফ্লেক্সিবল, কারণ আপনি যেকোনো সময় নির্দিষ্ট ডেটার অংশ নিয়ে আসতে পারেন এবং একাধিক রিকোয়েস্টের পরিবর্তে একটি একক রিকোয়েস্টে একাধিক রিসোর্স নিয়ে আসা সম্ভব।

• Queries: ডেটা ফেচ করতে ব্যবহৃত হয়।
• Mutations: ডেটা পরিবর্তন বা ম্যানিপুলেট করতে ব্যবহৃত হয়।

২. Next.js এ GraphQL এর সাথে ইন্টিগ্রেশন

Next.js অ্যাপ্লিকেশনে GraphQL ব্যবহার করার জন্য, প্রথমে আপনাকে GraphQL ক্লায়েন্ট লাইব্রেরি ইনস্টল করতে হবে। সাধারণত Apollo Client অথবা urql ব্যবহৃত হয়।

Apollo Client ইনস্টল করা

Apollo Client ব্যবহারের জন্য, আপনাকে প্রথমে নিচের প্যাকেজগুলো ইনস্টল করতে হবে:

npm install @apollo/client graphql

৩. GraphQL Query ব্যবহার করা

GraphQL queries ব্যবহার করে আপনি সার্ভার থেকে ডেটা ফেচ করতে পারেন। Apollo Client এর মাধ্যমে আপনি সহজেই এই কুয়েরি পাঠাতে এবং রিসিভ করতে পারেন।

উদাহরণ:

// pages/index.js
import { useQuery, gql } from '@apollo/client'

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`

export default function Home() {
  const { loading, error, data } = useQuery(GET_USERS)

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

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {data.users.map(user => (
          <li key={user.id}>
            {user.name} - {user.email}
          </li>
        ))}
      </ul>
    </div>
  )
}

এখানে:

• gql ট্যাগটি ব্যবহার করে GraphQL কুয়েরি তৈরি করা হয়েছে।
• useQuery হুক ব্যবহার করে কুয়েরি চালানো হয়েছে এবং তার রেসপন্স হিসেবে ডেটা, লোডিং স্টেট এবং এরর মেসেজ পাওয়া যাচ্ছে।

৪. GraphQL Mutation ব্যবহার করা

GraphQL mutations ব্যবহার করে আপনি ডেটা পরিবর্তন বা আপডেট করতে পারেন। এটি সাধারণত POST, PUT, DELETE প্রক্রিয়ায় ব্যবহৃত হয়।

উদাহরণ:

ধরা যাক, আপনি একটি নতুন ইউজার যোগ করতে চান। এজন্য একটি Mutation তৈরি করা হয়েছে।

// pages/add-user.js
import { useMutation, gql } from '@apollo/client'

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      id
      name
      email
    }
  }
`

export default function AddUser() {
  const [addUser, { loading, error, data }] = useMutation(ADD_USER)

  const handleSubmit = async (e) => {
    e.preventDefault()
    const name = e.target.name.value
    const email = e.target.email.value

    try {
      await addUser({ variables: { name, email } })
      alert('User added successfully!')
    } catch (err) {
      alert('Error: ' + err.message)
    }
  }

  return (
    <div>
      <h1>Add New User</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" name="name" placeholder="Name" required />
        <input type="email" name="email" placeholder="Email" required />
        <button type="submit">Add User</button>
      </form>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
    </div>
  )
}

এখানে:

• ADD_USER mutation তৈরি করা হয়েছে, যা ইউজারের নাম এবং ইমেইল নিয়ে একটি নতুন ইউজার যোগ করবে।
• useMutation হুক ব্যবহার করে আপনি mutation কল করতে পারেন এবং তার রেসপন্স দেখতে পারেন।

৫. Apollo Client Setup

Apollo Client এর সাথে Next.js ইন্টিগ্রেট করার জন্য, আপনাকে প্রথমে Apollo Client কনফিগার করতে হবে এবং অ্যাপ্লিকেশনের রুট স্তরে এটি ব্যবহার করতে হবে।

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

// lib/apolloClient.js
import { ApolloClient, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',  // আপনার GraphQL সার্ভারের URL
  cache: new InMemoryCache(),
})

export default client

Next.js এ Apollo Client ব্যবহার করা:

// pages/_app.js
import { ApolloProvider } from '@apollo/client'
import client from '../lib/apolloClient'

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

export default MyApp

এখানে ApolloProvider হুকের মাধ্যমে Apollo Client পুরো অ্যাপ্লিকেশনে উপলব্ধ হবে, এবং আপনি কোথাও useQuery বা useMutation হুক ব্যবহার করতে পারবেন।

৬. সারাংশ

Next.js এর সাথে GraphQL ব্যবহার করার মাধ্যমে আপনি শক্তিশালী ডেটা ফেচিং এবং ম্যানিপুলেশন অপারেশন সহজেই পরিচালনা করতে পারেন। Apollo Client ব্যবহার করে আপনি GraphQL queries এবং mutations পরিচালনা করতে পারবেন এবং ইন্টিগ্রেটেড ডেটা ম্যানিপুলেশন ফিচার যেমন ক্যাশিং, ডেটা ফেচিং, এবং রিফ্রেশিং সহজভাবে প্রয়োগ করতে পারবেন।

GraphQL Queries আপনাকে ডেটা ফেচ করতে সহায়তা করবে, আর Mutations ডেটা আপডেট বা ম্যানিপুলেট করতে সাহায্য করবে। Next.js এর সাথে GraphQL এর এই ইন্টিগ্রেশন আপনাকে অত্যন্ত স্কেলেবল এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সক্ষম করবে।