File Upload এর জন্য Scalar Type ব্যবহার

GraphQL-এ File Upload প্রক্রিয়া কিছুটা ভিন্ন, কারণ গ্রাফকিউএল ডিফল্টভাবে ফাইল হ্যান্ডলিং সমর্থন করে না। তবে, আপনি Scalar Type ব্যবহার করে গ্রাফকিউএল-এ ফাইল আপলোড পরিচালনা করতে পারেন। এখানে Scalar Type ব্যবহার করে ফাইল আপলোড করার প্রক্রিয়া ব্যাখ্যা করা হবে।

GraphQL File Upload Scalar Type

Scalar Types হল গ্রাফকিউএল-এ ডেটার মৌলিক ধরন (যেমন, String, Int, Float, Boolean, ID)। কিন্তু ফাইল আপলোডের জন্য গ্রাফকিউএল ডিফল্ট কোনও Scalar Type সরবরাহ করে না, তাই আমরা custom scalar type ব্যবহার করে ফাইল আপলোড পরিচালনা করতে পারি।

ফাইল আপলোডের জন্য গ্রাফকিউএল Upload নামক একটি বিশেষ Scalar Type ব্যবহার করে। এটি Apollo Server বা অন্য গ্রাফকিউএল সার্ভার ব্যবহার করার সময় ফাইল আপলোডের জন্য প্রয়োজনীয় পদ্ধতি সরবরাহ করে।

ফাইল আপলোডের জন্য Apollo Server Setup

ফাইল আপলোড করতে, আমরা Apollo Server এর সাথে graphql-upload প্যাকেজ ব্যবহার করতে পারি। এই প্যাকেজটি গ্রাফকিউএল-এ ফাইল আপলোডের জন্য Upload Scalar Type প্রদান করে এবং ফাইলটি সার্ভারে প্রসেস করার প্রক্রিয়া সহজ করে।

ধাপ ১: প্রয়োজনীয় প্যাকেজ ইনস্টল করা

প্রথমে, Apollo Server এবং graphql-upload প্যাকেজ দুটি ইন্সটল করতে হবে:

npm install apollo-server graphql graphql-upload

ধাপ ২: Apollo Server সেটআপ করা

এখন, Apollo Server এবং graphql-upload প্যাকেজ ব্যবহার করে একটি GraphQL সার্ভার তৈরি করুন যেখানে আমরা Upload Scalar Type ব্যবহার করব।

const { ApolloServer, gql } = require('apollo-server');
const { GraphQLUpload } = require('graphql-upload');
const path = require('path');
const fs = require('fs');

// Define GraphQL schema
const typeDefs = gql`
  scalar Upload

  type File {
    filename: String
    mimetype: String
    encoding: String
  }

  type Mutation {
    uploadFile(file: Upload!): File!
  }
`;

// Define resolvers
const resolvers = {
  Upload: GraphQLUpload,

  Mutation: {
    uploadFile: async (_, { file }) => {
      const { createReadStream, filename, mimetype, encoding } = await file;

      // Save the file to the server
      const stream = createReadStream();
      const out = fs.createWriteStream(path.join(__dirname, 'uploads', filename));
      stream.pipe(out);

      // Return file details
      return { filename, mimetype, encoding };
    },
  },
};

// Create Apollo Server
const server = new ApolloServer({
  typeDefs,
  resolvers,
  uploads: {
    maxFileSize: 10000000, // Maximum file size (10 MB)
    maxFiles: 10,          // Maximum number of files
  },
});

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

কোড ব্যাখ্যা:

1. Upload Scalar Type:
   • graphql-upload প্যাকেজটি একটি Upload Scalar Type সরবরাহ করে, যা ফাইল আপলোডের জন্য ব্যবহৃত হয়। আমরা এটি আমাদের গ্রাফকিউএল স্কিমাতে সংজ্ঞায়িত করেছি।
2. Mutation:
   • আমরা একটি Mutation uploadFile তৈরি করেছি যা ফাইল আপলোড গ্রহণ করে এবং সার্ভারে সেই ফাইলটি সংরক্ষণ করে। file: Upload! অ্যারগুমেন্টে ফাইল গ্রহণ করে এবং এর মধ্যে ডেটা থাকে যেমন createReadStream, filename, mimetype, এবং encoding।
3. File Saving:
   • createReadStream ফাংশনটি ফাইলের স্ট্রীম দেয় এবং আমরা সেটি 'uploads' ফোল্ডারে সংরক্ষণ করেছি।
   • fs.createWriteStream ব্যবহার করে ফাইলটি লোকাল ফোল্ডারে সেভ করা হয়েছে।
4. Upload Configuration:
   • আপলোডের জন্য আমরা কিছু কনফিগারেশন সেট করেছি, যেমন maxFileSize (যা ১০MB পর্যন্ত সীমাবদ্ধ) এবং maxFiles (যা সর্বাধিক ১০টি ফাইল আপলোড করতে পারে)।

ধাপ ৩: ফাইল আপলোডের জন্য GraphQL কুয়েরি

এখন, আপনি একটি GraphQL Mutation ব্যবহার করে ফাইল আপলোড করতে পারবেন। একটি ক্লায়েন্ট ফাইল আপলোড করার জন্য নিচের মতো কুয়েরি করতে পারে:

mutation($file: Upload!) {
  uploadFile(file: $file) {
    filename
    mimetype
    encoding
  }
}

এখানে:

• $file হল ফাইলের জন্য একটি variable যা ফাইল ডেটা গ্রহণ করে।
• ফাইল আপলোডের পর, সার্ভার ফাইলের বিস্তারিত (যেমন filename, mimetype, encoding) ফেরত পাঠায়।

ধাপ ৪: Apollo Client দিয়ে ফাইল আপলোড করা

আপনি Apollo Client ব্যবহার করে এই Mutation চালাতে পারেন। এখানে একটি উদাহরণ দেওয়া হলো কিভাবে ফাইল ক্লায়েন্ট সাইড থেকে আপলোড করা যাবে:

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

// Apollo Client Setup
const client = new ApolloClient({
  link: createUploadLink({ uri: 'http://localhost:4000' }),
  cache: new InMemoryCache(),
});

// GraphQL Mutation
const UPLOAD_FILE = gql`
  mutation($file: Upload!) {
    uploadFile(file: $file) {
      filename
      mimetype
      encoding
    }
  }
`;

// File Upload Function
const uploadFile = async (file) => {
  const { data } = await client.mutate({
    mutation: UPLOAD_FILE,
    variables: { file },
  });
  console.log(data.uploadFile);
};

// Example of using the file input
const fileInput = document.getElementById("fileInput");
fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  uploadFile(file);
});

এখানে:

• Apollo Client ব্যবহার করে গ্রাফকিউএল সার্ভারে ফাইল আপলোড করা হয়েছে।
• createUploadLink ব্যবহার করা হয়েছে যাতে ফাইল আপলোড সঠিকভাবে হ্যান্ডল করা যায়।
• ক্লায়েন্টের মাধ্যমে fileInput ব্যবহার করে ফাইল নির্বাচন করা হয় এবং পরে সেই ফাইলটি uploadFile ফাংশনের মাধ্যমে গ্রাফকিউএল সার্ভারে আপলোড করা হয়।

সারাংশ

গ্রাফকিউএল ফাইল আপলোডের জন্য Scalar Type ব্যবহার একটি শক্তিশালী উপায়, যেখানে Upload Scalar Type এবং graphql-upload প্যাকেজ ব্যবহার করে সহজেই ফাইল আপলোড পরিচালনা করা যায়। Apollo Server এবং Apollo Client এর মাধ্যমে গ্রাফকিউএল-এ ফাইল আপলোড করা সহজ এবং কার্যকরী।