使用AWS S3和GraphQL上载文件

Question

1。上下文

此代码在“创建帖子”页面中使用，在该页面中，用户上传图像，添加标题和他们的名字，以后我将使用AWS Cognito，而不是让用户指定他们的名字。

onSubmit，应将文件上传到S3存储桶，并将S3中的文件URL设置为imageUrl，然后将其作为变体发送到GraphQL端点以存储在数据库中。

2。问题

当设置了突变所需的值时，该突变执行得很好，但是当尝试从S3输入imageUrl时，它返回一个空值，并返回以下错误：“错误：GraphQL错误：一个或多个参数值无效：AttributeValue不得包含空字符串“

3。所有其他源代码

https://github.com/pimp-my-book/insta-clone/tree/feature/createPost

4。代码

import React, { useState } from "react";
import { s3Upload } from "../resources/libs/awsLib";
import { Mutation } from "react-apollo";
import { Create_Post } from "../graphql/Mutations";
import { Box, Heading, Input, Button, FormControl, FormLabel } from "@chakra-ui/core";
import config from "../../src/config";

const CreatePost = ( ) => {
    const [ caption, setCaption ] = useState("");
    const [ postedBy, setPostedBy ] = useState("");
    const [ imageUrl, setImageUrl ] = useState("");
    let [ file, setFile ] = useState(null);

    const handleFileChange = async e => {
        file = e.target.files[0];
        console.log(file);
        alert("File added :)")    
    }

    const handleSubmit = async e => {
        //e.preventDefault();

        if ( file && file.size > config.s3.SIZE ) {
            alert(
                `Please pick a file smaller than ${config.MAX_ATTACHMENT_SIZE/1000000} MB.`
            );
            return;
        }

        //setState(true);

        try {
            const attachment = file
            ? await s3Upload(file)
            : null;

            console.log(file);
            console.log(attachment);
            alert(`${attachment} was sent to s3`)
        }
        catch (e) {
            alert(e);
            //setState(false)
        }
    }

    return(
        <Box display="block" w="100%" pr="35%" pl="35%">
            <Heading>Create Your Post</Heading>
                <Mutation
                    variables={{
                        caption,
                        postedBy,
                        imageUrl
                    }}
                    mutation={ Create_Post }
                >
                {(createPost, {data}) =>(
                    <form
                        onSubmit={
                            async e => {
                                e.preventDefault();
                                handleSubmit();
                                await createPost()
                            }
                        }
                    >
                        <FormControl size="md">
                            <FormLabel>Caption</FormLabel>
                                <Input
                                    type="text" 
                                    id="caption"
                                    value={ caption }
                                    onChange = { e => setCaption( e.target.value ) }
                                />
                            <FormLabel>Who are you?</FormLabel>
                                <Input 
                                    type="text" 
                                    id="caption"
                                    value={ postedBy }
                                    onChange = { e => setPostedBy( e.target.value ) }
                                />
                                <Input
                                    type="file"
                                    id="postFile"
                                    onChange={ handleFileChange }
                                />
                            <Button
                                type="submit"
                                mt={4}
                            >
                                Post
                            </Button>
                        </FormControl>
                    </form>
                )}
                </Mutation>
        </Box>
    )
}

export default CreatePost