{"id":8512,"date":"2025-01-21T09:30:51","date_gmt":"2025-01-21T04:00:51","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8512"},"modified":"2025-01-21T09:37:54","modified_gmt":"2025-01-21T04:07:54","slug":"using-graphql-to-create-blogs-with-image-uploads-in-mongodb","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/using-graphql-to-create-blogs-with-image-uploads-in-mongodb\/","title":{"rendered":"Using GraphQL to Create Blogs with Image Uploads in MongoDB"},"content":{"rendered":"\n

Using GraphQL to Create Blogs with Image Uploads in MongoDB<\/strong><\/p>\n\n\n\n

To implement blog creation with image uploads, we\u2019ll use Apollo Server<\/strong> for GraphQL, MongoDB<\/strong> for data storage, and GridFS<\/strong> for handling binary file storage. Follow the steps below for seamless integration.<\/p>\n\n\n\n

\n\n\n\n

Prerequisites<\/strong><\/h3>\n\n\n\n

Install the required dependencies using Yarn:<\/p>\n\n\n\n

yarn add apollo-server graphql multer graphql-upload mongodb<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Enable file uploads in Apollo Server with the graphql-upload package.<\/p>\n\n\n\n

\n\n\n\n

Implementation<\/strong><\/h3>\n\n\n\n

1. Setup Apollo Server with File Uploads<\/strong><\/h4>\n\n\n\n
const<\/strong> resolvers = {
  Upload: GraphQLUpload,
  Mutation: {
    createBlog: async<\/strong> (
      _: any,
      { title, content, image }: { title: string; content: string; image?: FileUpload }
    ) => {
      let<\/strong> imageId = null;

      if<\/strong> (image) {
        const<\/strong> { createReadStream, filename, mimetype } = await<\/strong> image;
        const<\/strong> stream = createReadStream();

        imageId = await<\/strong> new<\/strong> Promise((resolve, reject) => {
          const<\/strong> uploadStream = bucket.openUploadStream(filename, { contentType: mimetype });
          stream.pipe(uploadStream);
          uploadStream.on(“finish”, () => resolve(uploadStream.id.toString()));
          uploadStream.on(“error”, reject);
        });
      }

      const<\/strong> blog = {
        title,
        content,
        imageId,
        createdAt: new<\/strong> Date().toISOString(),
      };

      \/\/ Assume `saveBlog` is a function to insert data into MongoDB or another database<\/em>
      const<\/strong> result = await<\/strong> saveBlog(blog);

      return<\/strong> { id: result.id, …blog };
    },
  },
};
<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\n\n\n\n

Explanation<\/strong><\/h3>\n\n\n\n

GraphQL Schema<\/strong><\/h4>\n\n\n\n