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) ব্যবহার করে আপনি শক্তিশালী, দ্রুত এবং স্কেলেবল ডেটা ফেচিং সিস্টেম তৈরি করতে পারবেন।
Read more
