Apollo Server এর মাধ্যমে Multiple File Upload পরিচালনা

Apollo Server এর মাধ্যমে Multiple File Upload পরিচালনা করার প্রক্রিয়া কিছুটা জটিল হতে পারে, কারণ গ্রাফকিউএল নিজে কোনো নির্দিষ্ট ফাইল আপলোড করার পদ্ধতি সরবরাহ করে না। তবে, Apollo Server এবং GraphQL ব্যবহার করে আপনি file upload ফিচার যুক্ত করতে পারেন। এর জন্য graphql-upload লাইব্রেরি ব্যবহার করা হয়, যা ফাইল আপলোডের জন্য প্রয়োজনীয় সরঞ্জাম প্রদান করে।

এখানে Apollo Server দিয়ে Multiple File Upload পরিচালনা করার ধাপে ধাপে গাইডলাইন দেওয়া হলো।

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

প্রথমে, আমরা কিছু প্যাকেজ ইনস্টল করব যা ফাইল আপলোডের জন্য দরকার:

npm install apollo-server graphql graphql-upload

এখানে:

• graphql-upload: এটি ফাইল আপলোড করতে সাহায্য করে এবং Apollo Server এর সাথে ইন্টিগ্রেট করা যায়।

ধাপ ২: Apollo Server এবং File Upload Setup করা

আমরা Apollo Server এর মাধ্যমে ফাইল আপলোডের জন্য graphql-upload ব্যবহার করব। এখানে, আমরা একটি ফাইল আপলোড কুয়েরি এবং রেজোলভার তৈরি করব যা একাধিক ফাইল আপলোড গ্রহণ করবে।

1. Apollo Server Setup:

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

// GraphQL Schema
const typeDefs = gql`
  scalar Upload

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

  type Query {
    hello: String
  }

  type Mutation {
    uploadFiles(files: [Upload!]!): [File]
  }
`;

// Resolvers for handling file upload
const resolvers = {
  Upload: GraphQLUpload, // Set GraphQLUpload as the Upload scalar type

  Query: {
    hello: () => "Hello, world!",
  },

  Mutation: {
    uploadFiles: async (_, { files }) => {
      const fileData = await Promise.all(
        files.map(async (file) => {
          const { createReadStream, filename, mimetype, encoding } = await file;

          // Create a write stream to save the file locally
          const stream = createReadStream();
          const pathName = path.join(__dirname, '/uploads', filename);

          // Write file to disk
          const out = fs.createWriteStream(pathName);
          stream.pipe(out);
          await new Promise((resolve, reject) => {
            out.on('finish', resolve);
            out.on('error', reject);
          });

          return { filename, mimetype, encoding };
        })
      );

      return fileData;
    },
  },
};

// Apollo Server Configuration
const server = new ApolloServer({
  typeDefs,
  resolvers,
  uploads: {
    maxFileSize: 10000000, // Maximum file size (in bytes)
    maxFiles: 10, // Maximum number of files that can be uploaded
  },
});

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

এখানে:

• Upload Scalar: Upload টাইপ ব্যবহার করে, আমরা গ্রাফকিউএল স্কিমায় ফাইল আপলোডের জন্য একটি scalar টাইপ যুক্ত করছি।
• uploadFiles Mutation: একাধিক ফাইল আপলোড করার জন্য একটি মিউটেশন তৈরি করা হয়েছে। এখানে, প্রতিটি ফাইলের তথ্য সংগ্রহ করা হচ্ছে (ফাইলের নাম, MIME টাইপ, ইত্যাদি) এবং লোকাল ডিস্কে সেই ফাইল সংরক্ষণ করা হচ্ছে।

ধাপ ৩: ফাইল আপলোড কুয়েরি (GraphQL Mutation)

এখন, আপনি GraphQL Mutation ব্যবহার করে একাধিক ফাইল আপলোড করতে পারবেন। এখানে একটি mutation উদাহরণ দেওয়া হলো:

mutation UploadFiles($files: [Upload!]!) {
  uploadFiles(files: $files) {
    filename
    mimetype
    encoding
  }
}

এখানে:

• $files ভেরিয়েবলটি Upload টাইপে ডেটা গ্রহণ করে, যা একাধিক ফাইল আপলোড করার জন্য ব্যবহৃত হবে।

কুয়েরি পাঠানোর উদাহরণ (GraphQL Client Example):

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

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

const UPLOAD_FILES = gql`
  mutation UploadFiles($files: [Upload!]!) {
    uploadFiles(files: $files) {
      filename
      mimetype
      encoding
    }
  }
`;

async function uploadFiles(files) {
  try {
    const { data } = await client.mutate({
      mutation: UPLOAD_FILES,
      variables: { files },
    });

    console.log(data.uploadFiles);
  } catch (error) {
    console.error('Error uploading files', error);
  }
}

এখানে:

• createUploadLink ব্যবহার করে, Apollo Client-কে ফাইল আপলোডের জন্য কনফিগার করা হয়েছে।

ধাপ ৪: File Upload ফর্ম তৈরি করা (Frontend)

এখন, ফ্রন্টএন্ডে ফাইল আপলোড ফর্ম তৈরি করতে হবে। এখানে একটি সিম্পল HTML ফর্ম দেখানো হলো:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>GraphQL File Upload</title>
</head>
<body>
  <form id="upload-form">
    <input type="file" name="files" id="fileInput" multiple />
    <button type="submit">Upload Files</button>
  </form>

  <script src="https://cdn.jsdelivr.net/npm/@apollo/client@3.5.8/core.js"></script>
  <script>
    document.getElementById('upload-form').addEventListener('submit', async (e) => {
      e.preventDefault();

      const files = document.getElementById('fileInput').files;
      const fileArray = Array.from(files);

      // Create a form data object to send the files
      const formData = new FormData();
      fileArray.forEach(file => {
        formData.append('files', file);
      });

      // Send the files to the server via GraphQL mutation
      await uploadFiles(fileArray); // Call the upload function defined earlier
    });
  </script>
</body>
</html>

এখানে:

• multiple attribute সহ ফাইল ইনপুট ব্যবহার করা হয়েছে, যাতে একাধিক ফাইল নির্বাচন করা যায়।
• ফর্ম সাবমিট হলে, uploadFiles মিউটেশন কল করা হচ্ছে যেটি ফাইলগুলো আপলোড করবে।

সারাংশ

Apollo Server এবং graphql-upload ব্যবহার করে Multiple File Upload পরিচালনা করা সম্ভব। আপনি ফাইলগুলো গ্রাফকিউএল Upload scalar টাইপের মাধ্যমে ক্লায়েন্ট থেকে সার্ভারে পাঠাতে পারেন, এবং সার্ভার সেই ফাইলগুলোকে ডিস্কে সেভ করে সঠিক ফর্ম্যাটে ডেটা ফেরত দিতে পারে। এই পদ্ধতিটি front-end এবং back-end এর মধ্যে সহজভাবে ফাইল আপলোড এবং ম্যানেজমেন্ট করার সুযোগ দেয়।