Save files with Apollo Server and React JS in 3 steps

const express = require("express"); const { ApolloServer, gql } = require("apollo-server-express"); const app = express(); const { createWriteStream } = require("fs"); const cors = require("cors"); app.use(cors()); const typeDefs = gql` type Query { welcome: String } type Mutation { singleUpload(file: Upload): String } `; const saveImagesWithStream = ({ filename, mimetype, stream }) => { const path = `images/${filename}`; return new Promise((resolve, reject) => stream .pipe(createWriteStream(path)) .on("finish", () => resolve({ path, filename, mimetype })) .on("error", reject) ); }; const resolvers = { Query: { welcome: () => "Hello"; }, Mutation: { singleUpload: async (_, args) => { const { filename, mimetype, createReadStream } = await args.file; const stream = createReadStream(); await saveImagesWithStream({ filename, mimetype, stream }); return "success"; }, }, }; const server = new ApolloServer({ typeDefs: typeDefs, resolvers: resolvers }); server.applyMiddleware({ app }); app.listen({ port: 4000 }, () => console.log(`http://localhost:4000${server.graphqlPath}`)); 

import { ApolloProvider } from "@apollo/client"; import { client } from "./graphql/ApolloClient"; import { ApolloClient, InMemoryCache } from "@apollo/client"; import { createUploadLink } from "apollo-upload-client"; function App() { const link = createUploadLink({ uri: "http://localhost:4000/graphql" }); const client = new ApolloClient({ link, cache: new InMemoryCache(), }); return ( <div> <ApolloProvider client={client}> <h1>Hello</h1>  </ApolloProvider>  </div>  ); } export default App; 

import React, { useState } from "react"; import { useMutation, gql } from "@apollo/client"; function UploadImages() { const [newImage, setnewImage] = useState(null); const [uploadImage, { data }] = useMutation(gql` mutation singleUpload($file: Upload) { singleUpload(file: $file) } `); console.log(data); return ( <div> <input type="file" onChange={(e) => setnewImage(e.target.files[0])} /> <button onClick={() => { uploadImage({ variables: { file: newImage, }, }); }} > SEND IMAGE </button> </div> ); } export default UploadImages;