Next.js এবং GraphQL এর মাধ্যমে ডাইনামিক ডেটা হ্যান্ডলিং

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

এখানে আমরা দেখব কিভাবে Next.js এবং GraphQL এর মাধ্যমে ডাইনামিক ডেটা হ্যান্ডলিং করা যায়।

১. Next.js এবং GraphQL ইন্টিগ্রেশন

Next.js-এ GraphQL ইন্টিগ্রেট করার জন্য সাধারণত Apollo Client অথবা Relay এর মতো ক্লায়েন্ট লাইব্রেরি ব্যবহার করা হয়। এই লাইব্রেরিগুলি GraphQL কুয়েরি এবং মিউটেশন (queries and mutations) ব্যবস্থাপনা সহজ করে তোলে।

Apollo Client ব্যবহার করে GraphQL ইন্টিগ্রেশন:

Apollo Client হল একটি শক্তিশালী লাইব্রেরি যা React অ্যাপ্লিকেশনের সাথে সহজে GraphQL এর ইন্টিগ্রেশন সক্ষম করে। এটি ডেটা ফেচিং, কুয়েরি, মিউটেশন এবং ক্যাশিংয়ের জন্য উপযুক্ত।

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

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

npm install @apollo/client graphql

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

এখন Apollo Client কনফিগার করুন এবং এটি Next.js অ্যাপ্লিকেশনে ইনক্লুড করুন। সাধারণত, _app.js ফাইলে এটি করা হয়।

lib/apolloClient.js:

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-graphql-endpoint.com/graphql', // এখানে আপনার GraphQL API endpoint প্রদান করুন
  }),
  cache: new InMemoryCache(),
});

export default client;

_app.js ফাইলে Apollo Provider ব্যবহার করা:

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;

এখন, আপনার অ্যাপ্লিকেশনটি Apollo Client এর মাধ্যমে GraphQL API এর সাথে সংযুক্ত থাকবে এবং GraphQL কুয়েরি পরিচালনা করতে সক্ষম হবে।

২. GraphQL কুয়েরি ও ডেটা ফেচিং

Next.js এর মধ্যে ডাইনামিক ডেটা ফেচিং করতে আমরা Apollo Client এর useQuery হুক ব্যবহার করতে পারি। useQuery হুক একটি কুয়েরি পাঠায় এবং ফলস্বরূপ পাওয়া ডেটা এবং লোডিং স্টেট প্রাপ্তি দেয়।

GraphQL কুয়েরি ফেচিং উদাহরণ:

ধরা যাক আমাদের একটি GraphQL API আছে যা posts এর তালিকা রিটার্ন করে। আমরা এটি ফেচ করতে চাই।

pages/index.js:

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

// GraphQL কুয়েরি
const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

function Home() {
  const { loading, error, data } = useQuery(GET_POSTS);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {data.posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

এখানে, GET_POSTS কুয়েরি GraphQL API থেকে posts এর তালিকা নিয়ে আসে। useQuery হুকটি এই কুয়েরি চালায় এবং ডেটা, লোডিং, এবং ত্রুটি অবস্থাগুলির সাথে কাজ করতে সহায়তা করে।

• loading: যখন কুয়েরি ডেটা ফেচ করছে, তখন এটি true থাকবে।
• error: যদি কোনো ত্রুটি ঘটে, তবে এটি ত্রুটির বার্তা প্রদান করবে।
• data: সফলভাবে ডেটা পাওয়া গেলে এটি ডেটা রিটার্ন করবে, যা আপনি UI তে প্রদর্শন করতে পারবেন।

৩. Next.js এর Static Generation (SSG) এবং Server-side Rendering (SSR) ব্যবহার করা

Next.js GraphQL এর মাধ্যমে ডেটা ফেচিং করার জন্য Static Generation (SSG) এবং Server-side Rendering (SSR) দুটি পদ্ধতি ব্যবহার করতে সক্ষম।

Static Generation (SSG) with GraphQL:

Next.js এর getStaticProps ফাংশন ব্যবহার করে আপনি স্ট্যাটিক পেজ তৈরি করতে পারেন, যেটি কম্পাইল টাইমে একবার ফেচ করা হয় এবং পরে কেশ করা হয়।

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { gql } from 'graphql-tag';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

export async function getStaticProps() {
  const { data } = await client.query({
    query: GET_POSTS,
  });

  return {
    props: {
      posts: data.posts,
    },
  };
}

function Home({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

এখানে, getStaticProps ফাংশনটি GraphQL API থেকে ডেটা ফেচ করছে এবং এটি স্ট্যাটিকভাবে রেন্ডার করার জন্য পেজকে ডেটা প্রদান করছে।

Server-side Rendering (SSR) with GraphQL:

যদি আপনি পেজটি প্রতিটি রিকোয়েস্টে নতুন করে ফেচ করতে চান, তাহলে getServerSideProps ব্যবহার করতে পারেন, যা সার্ভার সাইড রেন্ডারিংয়ের জন্য ব্যবহৃত হয়।

import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
import { gql } from 'graphql-tag';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
    }
  }
`;

const client = new ApolloClient({
  uri: 'https://your-graphql-endpoint.com/graphql',
  cache: new InMemoryCache(),
});

export async function getServerSideProps() {
  const { data } = await client.query({
    query: GET_POSTS,
  });

  return {
    props: {
      posts: data.posts,
    },
  };
}

function Home({ posts }) {
  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

এখানে getServerSideProps ফাংশনটি সার্ভার সাইডে প্রতিবার রিকোয়েস্ট আসার সাথে সাথে GraphQL API থেকে ডেটা ফেচ করে, এবং সেই ডেটা রেন্ডারিংয়ের জন্য পেজকে প্রপস হিসাবে পাঠায়।

সারাংশ

Next.js এবং GraphQL এর মাধ্যমে ডাইনামিক ডেটা হ্যান্ডলিং অত্যন্ত শক্তিশালী এবং কার্যকরী একটি পদ্ধতি। Apollo Client ব্যবহার করে আপনি খুব সহজেই GraphQL API থেকে ডেটা ফেচ করতে পারেন এবং Next.js এর Static Generation বা Server-side Rendering পদ্ধতিতে সেই ডেটা ব্যবহার করতে পারেন। এভাবে, আপনি আপনার অ্যাপ্লিকেশনকে আরও দ্রুত, স্কেলেবল এবং ইন্টারঅ্যাকটিভ করতে পারেন।