File rỗng sau khi upload bằng apollo server

[giadat99 (Trương Gia Đạt)]

Em đọc doc files upload của apollo server và làm theo . Sau khi upload thành công, file đã được gửi lên server nhưng file bị rỗng. Em mong mọi người chỉ em cách fix và giải thích cho em phần này, em cảm ơn mọi người nhiều

React (App.js) :

import React from 'react';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';
import UploadForm from './UploadForm';

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

function App() {
  return (
    <ApolloProvider client={client}>
      <UploadForm/>
    </ApolloProvider>
  );
}

export default App;

React(UploadForm.js) :

import React from 'react';
import { useMutation, gql } from '@apollo/client';

const UPLOAD_FILE = gql`
    mutation uploadFile($file: Upload!){
        upload(file: $file) {
            url
        }
    }
`

function UploadForm() {

    const [uploadFile] = useMutation(UPLOAD_FILE, {
        onCompleted: data => console.log(data)
    });

    const handleFileChange = e => {
        const [file] = e.target.files;
        uploadFile({
            variables: { file: file }
        });
    };

    return (
        <div>
            <h1>Upload files</h1>
            <input type="file" onChange={handleFileChange} />
        </div>
    )
}

export default UploadForm

Apollo server :

const { ApolloServer, gql } = require('apollo-server-express');
const express = require('express');
const path = require('path');
const fs = require('fs');
const cors = require('cors');

function generateRandomString(length) {
    var result           = '';
    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
 }
 

const typeDefs = gql`
  type File {
    url: String!
  }

  type Query {
    hello: String!
  }

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

const resolvers = {
  Query: {
    hello: () => 'Upload file ...'
  },
  Mutation : {
      upload: async (parent , { file }) => {
        const { createReadStream, filename, mimetype } = await file;
        
        const { ext } = path.parse(filename);
        const randomName = generateRandomString(12) + ext;
        const pathName = path.join(__dirname, `/public/images/${randomName}`);
        await createReadStream().pipe(fs.createWriteStream(pathName));
        return {
            url: `http://localhost:4000/images/${randomName}`
        }
      }
  }
};

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

const app = express();

server.applyMiddleware({ app });
app.use(express.static('public'));
app.use(cors());

app.listen({ port: 4000 }, () => {
    console.log(`🚀 Server ready at http://localhost:4000`);
});

[Lovemagic]

Code của bạn lạ lắm, không giống trong bài, mình không rõ bạn lấy ở đâu nữa
Bạn clone repo này về rồi chạy thử xem https://github.com/jaydenseric/apollo-upload-examples