Next.js এবং GraphQL এর একত্রিত ব্যবহার অনেক অ্যাডভান্সড ও স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়ক। GraphQL একটি শক্তিশালী API কুয়েরি ভাষা যা আপনাকে একক রিকোয়েস্টে নির্দিষ্ট ডেটা ফেচ করতে দেয়, এর ফলে কমপ্লেক্স অ্যাপ্লিকেশনগুলোর ডেটা ম্যানেজমেন্ট সহজ হয়ে ওঠে। Next.js এর সাথে GraphQL ইন্টিগ্রেশন করে আপনি আরো দক্ষ ও স্কেলেবল ডেটা ফেচিং কৌশল গ্রহণ করতে পারবেন।
এই টিউটোরিয়ালে Next.js এবং GraphQL এর ইন্টিগ্রেশন, সেটআপ এবং ডেটা ফেচিং দেখানো হবে।
১. GraphQL Setup এবং Installation
প্রথমে, আপনাকে আপনার Next.js প্রজেক্টে GraphQL এবং প্রয়োজনীয় লাইব্রেরি ইনস্টল করতে হবে। নিচে ইনস্টলেশন প্রক্রিয়া দেওয়া হল।
Step 1: প্রয়োজনীয় লাইব্রেরি ইনস্টল করা
আপনি graphql, apollo-client, এবং @apollo/react-hooks প্যাকেজগুলো ইনস্টল করতে হবে। এগুলোর মাধ্যমে আপনি GraphQL এর সাথে Next.js কে ইন্টিগ্রেট করতে পারবেন।
npm install @apollo/client graphql
Step 2: Apollo Client সেটআপ
Next.js অ্যাপ্লিকেশনে Apollo Client সেটআপ করতে হবে। Apollo Client হল একটি জনপ্রিয় GraphQL ক্লায়েন্ট যা আপনাকে GraphQL API এর সাথে ইন্টারঅ্যাক্ট করতে সাহায্য করে।
lib/apolloClient.js ফাইল তৈরি করুন এবং Apollo Client সেটআপ করুন:
// lib/apolloClient.js
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://your-graphql-api-url.com/graphql', // আপনার GraphQL API এর URL দিন
cache: new InMemoryCache(),
});
export default client;
২. Next.js এর সাথে Apollo Client ইন্টিগ্রেশন
এখন Next.js অ্যাপ্লিকেশনে Apollo Client ইন্টিগ্রেট করতে হবে। Next.js এর _app.js ফাইলে ApolloProvider কম্পোনেন্ট ব্যবহার করে অ্যাপ্লিকেশনে গ্রাফকিউএল সাপোর্ট এনাবল করতে হবে।
_app.js ফাইলে ApolloProvider যুক্ত করা:
// 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 কুয়েরি করতে পারবেন।
৩. GraphQL Query ব্যবহার করা
এখন আপনি Next.js পেজে গ্রাফকিউএল কুয়েরি করতে পারবেন। আপনি @apollo/client লাইব্রেরির useQuery হুক ব্যবহার করে গ্রাফকিউএল কুয়েরি চালাতে পারেন।
Example: GraphQL Query ব্যবহার করা
ধরা যাক, আপনার একটি ব্লগ API রয়েছে এবং আপনি পোস্টের তালিকা দেখাতে চান। নিচে একটি কুয়েরি এবং তার ফলাফল দেখানোর উদাহরণ দেওয়া হল।
// pages/index.js
import { useQuery, gql } from '@apollo/client';
// GraphQL কুয়েরি
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
content
}
}
`;
function HomePage() {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return <p>লোড হচ্ছে...</p>;
if (error) return <p>এরর: {error.message}</p>;
return (
<div>
<h1>ব্লগ পোস্ট</h1>
<ul>
{data.posts.map(post => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}
export default HomePage;
এখানে আমরা GET_POSTS কুয়েরি ব্যবহার করেছি, যা পোস্টের আইডি, শিরোনাম, এবং কন্টেন্ট নিয়ে আসবে। useQuery হুকটি কুয়েরির স্টেট যেমন লোডিং, এরর এবং ডেটা ম্যানেজ করতে ব্যবহৃত হয়েছে।
৪. Static Generation (SSG) এবং GraphQL
Next.js এর getStaticProps ফাংশন ব্যবহার করে আপনি স্ট্যাটিক সাইট জেনারেশন (SSG) এর মাধ্যমে GraphQL API থেকে ডেটা ফেচ করতে পারেন। এর মাধ্যমে আপনি প্রথমে ডেটা ফেচ করেন এবং তারপর সেই ডেটা দিয়ে একটি স্ট্যাটিক পেজ তৈরি করেন।
Example: getStaticProps এর মাধ্যমে GraphQL ডেটা ফেচ করা
// pages/index.js
import { gql } from '@apollo/client';
import client from '../lib/apolloClient';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
content
}
}
`;
export async function getStaticProps() {
const { data } = await client.query({ query: GET_POSTS });
return {
props: {
posts: data.posts,
},
revalidate: 10, // পেজটি প্রতি 10 সেকেন্ডে রি-জেনারেট হবে
};
}
function HomePage({ posts }) {
return (
<div>
<h1>ব্লগ পোস্ট</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}
export default HomePage;
এখানে getStaticProps ফাংশনটি GraphQL API থেকে ডেটা ফেচ করছে এবং তা প্রপস হিসেবে পেজ কম্পোনেন্টে পাঠাচ্ছে। এই কৌশলটি ডেটা স্ট্যাটিকভাবে পেজে রেন্ডার করতে সাহায্য করে।
৫. Dynamic Routes এবং GraphQL
আপনি যদি ডাইনামিক রাউটের জন্য GraphQL ব্যবহার করতে চান, তবে আপনাকে getServerSideProps বা getStaticPaths ফাংশন ব্যবহার করে কুয়েরি রেন্ডার করতে হবে।
Example: Dynamic Route - GraphQL Query
// pages/posts/[id].js
import { useRouter } from 'next/router';
import { gql } from '@apollo/client';
import client from '../../lib/apolloClient';
const GET_POST = gql`
query GetPost($id: ID!) {
post(id: $id) {
id
title
content
}
}
`;
export async function getStaticPaths() {
const { data } = await client.query({ query: gql`{ posts { id } }` });
const paths = data.posts.map(post => ({
params: { id: post.id },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: GET_POST,
variables: { id: params.id },
});
return {
props: {
post: data.post,
},
};
}
function PostPage({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export default PostPage;
এখানে getStaticPaths ফাংশনটি ডাইনামিক রাউটের জন্য প্রয়োজনীয় পাথ লিস্ট তৈরি করে এবং getStaticProps ডাইনামিক ডেটা ফেচ করে।
সারাংশ
Next.js এবং GraphQL এর ইন্টিগ্রেশন অ্যাপ্লিকেশন ডেভেলপমেন্টে একাধিক সুবিধা প্রদান করে। আপনি সহজেই GraphQL API এর মাধ্যমে ডেটা ফেচ করতে পারেন, এটি অ্যাপ্লিকেশনকে স্কেলেবল এবং দ্রুত বানায়। Apollo Client এর মাধ্যমে GraphQL ডেটা ফেচিং খুবই কার্যকরী, এবং স্ট্যাটিক ও ডাইনামিক রাউটিং কৌশলগুলো GraphQL এর সাথে মিলিয়ে ব্যবহার করা যায়।
Next.js এবং GraphQL একসাথে ব্যবহার করা অত্যন্ত শক্তিশালী একটি কৌশল, যা আপনাকে ডেটা ফেচিং, স্ট্যাটিক সাইট জেনারেশন (SSG), সার্ভার সাইড রেন্ডারিং (SSR), এবং ক্লায়েন্ট সাইডে ডায়নামিক ডেটা লোডিং সহজ করে। GraphQL একটি শক্তিশালী কুয়েরি ভাষা যা ক্লায়েন্টকে নির্দিষ্ট ডেটা অনুরোধ করতে দেয়, এবং Next.js এর সাথে একত্রিত হলে আপনি দ্রুত, স্কেলেবল এবং ডাইনামিক ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।
এই টিউটোরিয়ালে দেখানো হবে কিভাবে GraphQL এবং Next.js কে একসাথে ইন্টিগ্রেট করবেন এবং ডেটা ফেচিং এর জন্য Apollo Client ব্যবহার করবেন।
১. GraphQL এবং Apollo Client সেটআপ
Next.js এ GraphQL ইন্টিগ্রেশন করতে হলে প্রথমে Apollo Client এবং অন্যান্য প্রয়োজনীয় লাইব্রেরি ইনস্টল করতে হবে।
Step 1: প্রয়োজনীয় লাইব্রেরি ইনস্টল করুন
npm install @apollo/client graphql
এটি আপনার প্রজেক্টে Apollo Client এবং GraphQL এর জন্য প্রয়োজনীয় প্যাকেজ ইনস্টল করবে।
Step 2: Apollo Client কনফিগারেশন
Apollo Client সেটআপ করার জন্য একটি ফাইল তৈরি করুন যেখানে GraphQL API এ কানেকশন তৈরি হবে। উদাহরণস্বরূপ:
lib/apolloClient.js:
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://your-graphql-api-url.com/graphql', // আপনার GraphQL API URL দিন
cache: new InMemoryCache(), // Apollo Client cache setup
});
export default client;
এই ফাইলটি আপনার GraphQL API এ কানেক্ট করবে এবং Apollo Client ব্যবহার করতে প্রস্তুত করবে।
২. Next.js এ Apollo Client ইন্টিগ্রেট করা
এখন ApolloProvider ব্যবহার করে Apollo Client কে Next.js অ্যাপ্লিকেশনে ইন্টিগ্রেট করতে হবে। এটি pages/_app.js ফাইলে করতে হবে।
Step 3: ApolloProvider ব্যবহার করা
pages/_app.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 এর মাধ্যমে রেন্ডার করবে এবং GraphQL ডেটা ফেচিং সহজ করে তুলবে।
৩. GraphQL Query ব্যবহার করা
Next.js অ্যাপ্লিকেশনে GraphQL Query ফেচ করতে, Apollo Client এর useQuery হুক ব্যবহার করা হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে একটি ব্লগ পেজ তৈরি করা হয়েছে এবং সেখানে GraphQL এর মাধ্যমে পোস্টের তালিকা ফেচ করা হয়েছে।
Step 4: GraphQL Query ব্যবহার করা
pages/index.js ফাইলে GraphQL কুয়েরি ব্যবহার করুন:
// pages/index.js
import { useQuery, gql } from '@apollo/client';
// GraphQL কুয়েরি
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
content
}
}
`;
export default function HomePage() {
const { loading, error, data } = useQuery(GET_POSTS);
if (loading) return <p>লোড হচ্ছে...</p>;
if (error) return <p>এরর: {error.message}</p>;
return (
<div>
<h1>ব্লগ পোস্ট</h1>
<ul>
{data.posts.map(post => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}
এখানে, useQuery হুকটি GraphQL কুয়েরি চালিয়ে ডেটা ফেচ করছে এবং পেজে রেন্ডার করছে। যদি ডেটা লোড হচ্ছে থাকে, তাহলে লোডিং মেসেজ দেখানো হবে এবং যদি কোনো এরর হয়, তবে এরর মেসেজ দেখানো হবে।
৪. Static Generation (SSG) এবং GraphQL
Next.js এর getStaticProps ফাংশন ব্যবহার করে আপনি স্ট্যাটিক সাইট জেনারেশন (SSG) এর মাধ্যমে GraphQL API থেকে ডেটা ফেচ করতে পারেন। এটি এমন ডেটার জন্য উপযুক্ত, যেটি একবার ফেচ হলে, পুরো অ্যাপ্লিকেশন জুড়ে ব্যবহার করা যেতে পারে।
Step 5: getStaticProps ব্যবহার করা
pages/index.js ফাইলে getStaticProps ব্যবহার করুন:
// pages/index.js
import { gql } from '@apollo/client';
import client from '../lib/apolloClient';
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
content
}
}
`;
export async function getStaticProps() {
const { data } = await client.query({ query: GET_POSTS });
return {
props: {
posts: data.posts,
},
};
}
export default function HomePage({ posts }) {
return (
<div>
<h1>ব্লগ পোস্ট</h1>
<ul>
{posts.map(post => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
</div>
);
}
এখানে, getStaticProps ফাংশনটি GraphQL API থেকে ডেটা ফেচ করছে এবং props হিসেবে তা পেজ কম্পোনেন্টে পাঠাচ্ছে। Next.js এই ডেটাকে স্ট্যাটিকভাবে রেন্ডার করবে এবং পেজটি দ্রুত লোড হবে।
৫. Dynamic Routes এবং GraphQL
Next.js এর getStaticPaths এবং getStaticProps ফাংশন ব্যবহার করে আপনি ডাইনামিক রাউট তৈরি করতে পারেন এবং GraphQL API থেকে ডেটা ফেচ করতে পারেন।
Step 6: Dynamic Routes - GraphQL Query
pages/posts/[id].js ফাইলে ডাইনামিক রাউট এবং GraphQL কুয়েরি ব্যবহার করুন:
// pages/posts/[id].js
import { gql } from '@apollo/client';
import client from '../../lib/apolloClient';
const GET_POST = gql`
query GetPost($id: ID!) {
post(id: $id) {
id
title
content
}
}
`;
export async function getStaticPaths() {
const { data } = await client.query({ query: gql`{ posts { id } }` });
const paths = data.posts.map(post => ({
params: { id: post.id },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const { data } = await client.query({
query: GET_POST,
variables: { id: params.id },
});
return {
props: {
post: data.post,
},
};
}
export default function PostPage({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
এখানে, getStaticPaths এবং getStaticProps ব্যবহার করে ডাইনামিক রাউট এবং GraphQL API থেকে ডেটা ফেচ করা হয়েছে। getStaticPaths ডাইনামিক পাথ তৈরি করে এবং getStaticProps নির্দিষ্ট পোস্টের জন্য ডেটা ফেচ করে।
সারাংশ
Next.js এবং GraphQL এর ইন্টিগ্রেশন অ্যাপ্লিকেশন ডেভেলপমেন্টে সহজ, দ্রুত এবং কার্যকরী করে তোলে। আপনি Apollo Client ব্যবহার করে GraphQL API এর সাথে যোগাযোগ করতে পারেন, এবং Next.js এর getStaticProps এবং getServerSideProps ফাংশন ব্যবহার করে ডেটা ফেচিং পরিচালনা করতে পারেন। ডাইনামিক রাউট, স্ট্যাটিক সাইট জেনারেশন, এবং সার্ভার সাইড রেন্ডারিং সবই সহজেই GraphQL এর সাথে ইন্টিগ্রেট করা সম্ভব।
Next.js এ Apollo Client ব্যবহার করে আপনি GraphQL API থেকে ডেটা ফেচ করতে পারেন। Apollo Client হল একটি শক্তিশালী লাইব্রেরি যা GraphQL API এর সাথে ক্লায়েন্ট-সাইড ইন্টিগ্রেশন সহজ করে তোলে। এটি ডেটা ফেচিং, ক্যাশিং, এবং ম্যানেজমেন্টের জন্য একটি অত্যন্ত কার্যকরী উপায় প্রদান করে।
এই টিউটোরিয়ালে আমরা দেখব কিভাবে Next.js এ Apollo Client সেটআপ করবেন এবং GraphQL API থেকে ডেটা ফেচ করবেন।
১. Apollo Client সেটআপ করা
প্রথমে, আপনাকে Apollo Client এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।
প্রয়োজনীয় প্যাকেজ ইনস্টল করা
npm install @apollo/client graphql
এটি Apollo Client এবং GraphQL লাইব্রেরি ইনস্টল করবে, যা Next.js অ্যাপে GraphQL API থেকে ডেটা ফেচ করার জন্য প্রয়োজনীয়।
২. Apollo Client কনফিগারেশন
Apollo Client ব্যবহার করতে, আপনাকে একটি Apollo Client ইনস্ট্যান্স তৈরি করতে হবে এবং এটি আপনার অ্যাপ্লিকেশনে কনফিগার করতে হবে। আপনি এটি lib/apolloClient.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 এন্ডপয়েন্ট এখানে দেবেন
}),
cache: new InMemoryCache(),
})
export default client
এখানে:
HttpLink: এটি Apollo Client এর মাধ্যমে GraphQL API এর URL নির্ধারণ করে।InMemoryCache: এটি Apollo Client এর ক্যাশিং সিস্টেম ব্যবহার করে, যা ডেটা ক্যাশে রাখে এবং পরবর্তী রিকোয়েস্টে দ্রুত ডেটা রিটার্ন করে।
৩. Apollo Provider দিয়ে অ্যাপ্লিকেশন র্যাপ করা
এখন আপনাকে ApolloProvider দিয়ে আপনার অ্যাপ্লিকেশনটি র্যাপ করতে হবে, যাতে পুরো অ্যাপ্লিকেশন Apollo Client এর সাথে যোগাযোগ করতে পারে। এটি সাধারণত pages/_app.js ফাইলে করা হয়।
উদাহরণ:
// 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 এর ইনস্ট্যান্স (যা আমরা আগেই তৈরি করেছি) অ্যাপ্লিকেশনে ইনজেক্ট করে।
৪. GraphQL Data Fetching করতে useQuery হুক ব্যবহার করা
এখন, আপনি Apollo Client এর useQuery হুক ব্যবহার করে আপনার পেজ বা কম্পোনেন্টে GraphQL API থেকে ডেটা ফেচ করতে পারবেন। useQuery হুকটি একটি GraphQL কুয়েরি গ্রহণ করে এবং ফলস্বরূপ ডেটা, লোডিং, এবং এরর স্টেট রিটার্ন করে।
উদাহরণ:
// pages/index.js
import { useQuery, gql } from '@apollo/client'
const GET_POSTS = gql`
query GetPosts {
posts {
id
title
content
}
}
`
export default function HomePage() {
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>
)
}
এখানে:
gql: GraphQL কুয়েরি বা মিউটেশন ডিফাইন করার জন্য ব্যবহৃত ট্যাগ।useQuery: GraphQL কুয়েরি চালানোর জন্য ব্যবহার হয়। এটি তিনটি মূল স্টেট রিটার্ন করে:loading,error, এবংdata।
৫. Apollo Client এর ক্যাশিং সুবিধা
Apollo Client স্বয়ংক্রিয়ভাবে ফেচ করা ডেটা ক্যাশে রাখে, যাতে পরবর্তী রিকোয়েস্টে একই ডেটা পুনরায় ফেচ না করতে হয়। আপনি এটি কনফিগারেশন অনুযায়ী কাস্টমাইজ করতে পারেন।
উদাহরণ: ক্যাশ নীতি পরিবর্তন করা
const client = new ApolloClient({
uri: 'https://your-graphql-endpoint.com/graphql',
cache: new InMemoryCache({
typePolicies: {
Query: {
fields: {
posts: {
merge(existing = [], incoming) {
return [...existing, ...incoming]
},
},
},
},
},
}),
})
এখানে merge ফাংশনটি আগের এবং নতুন ডেটাকে একত্রিত করতে ব্যবহৃত হয়।
৬. Pagination সহ Data Fetching
আপনি যদি পেজিনেশন সমর্থিত GraphQL API ব্যবহার করেন, তাহলে Apollo Client এর মাধ্যমে পেজিনেটেড ডেটা ফেচ করাও সম্ভব।
উদাহরণ:
const GET_POSTS = gql`
query GetPosts($cursor: String) {
posts(cursor: $cursor) {
id
title
content
cursor
}
}
`
export default function HomePage() {
const { loading, error, data, fetchMore } = useQuery(GET_POSTS)
const loadMorePosts = () => {
fetchMore({
variables: { cursor: data.posts[data.posts.length - 1].cursor },
})
}
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>
<button onClick={loadMorePosts}>Load More</button>
</div>
)
}
এখানে fetchMore ফাংশনটি ব্যবহার করে আপনি নতুন ডেটা ফেচ করতে পারেন, যেমন পেজিনেশন ডেটা।
সারাংশ
Next.js এ Apollo Client ব্যবহার করে আপনি সহজেই GraphQL API থেকে ডেটা ফেচ করতে পারেন। Apollo Client এর useQuery হুক এবং অন্যান্য ফিচার (যেমন ক্যাশিং, pagination) ব্যবহার করে আপনি শক্তিশালী, দ্রুত এবং স্কেলেবল ডেটা ফেচিং সিস্টেম তৈরি করতে পারবেন।
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_USERmutation তৈরি করা হয়েছে, যা ইউজারের নাম এবং ইমেইল নিয়ে একটি নতুন ইউজার যোগ করবে।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 এর এই ইন্টিগ্রেশন আপনাকে অত্যন্ত স্কেলেবল এবং কার্যকরী অ্যাপ্লিকেশন তৈরি করতে সক্ষম করবে।
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 পদ্ধতিতে সেই ডেটা ব্যবহার করতে পারেন। এভাবে, আপনি আপনার অ্যাপ্লিকেশনকে আরও দ্রুত, স্কেলেবল এবং ইন্টারঅ্যাকটিভ করতে পারেন।
Read more
