Wie lade ich ein Bild mit GraphQL in AWS S3 hoch?

Question

Ich lade eine Base64-Zeichenfolge hoch, aber GraphQL wird gehängt. Wenn ich die Zeichenfolge auf weniger als 50.000 Zeichen zerschneide, funktioniert es. Nach 50000 Zeichen macht graphQL nie die Auflösungsfunktion, gibt aber keinen Fehler. Auf den kleineren Saiten funktioniert es gut.

const file = e.target.files[0]; 
const reader = new FileReader(); 
reader.readAsDataURL(file); 
reader.onloadend =() => { 
    const imageArray = reader.result; 
    this.context.fetch('/graphql', { 
    body: JSON.stringify({ 
     query: `mutation s3Upload($img: String!) { 
     s3Upload(file: $img) { 
      logo, 
     } 
     }`, 
     variables: { 
     img: imageArray, 
     }, 
    }), 
    }).then(response => response.json()) 
    .then(({ data }) => { 
    console.log(data); 
    }); 
} 

const s3Upload = { 
    type: S3Type, 
    args: { 
     file: { type: new NonNull(StringType) }, 
    }, 
    resolve: (root, args, { user }) => upload(root, args, user), 
}; 

const S3Type = new ObjectType({ 
    name: 'S3', 
    fields: { 
    logo: { type: StringType }, 
    }, 
}); 

Answer 1

AWS AppSync (https://aws.amazon.com/appsync/) bietet diese mit Funktionalität als „Komplexen Objekte“ bekannt, wo Sie einen Typen für das S3-Objekt und den Eingang haben können:

type S3Object { 
    bucket: String! 
    key: String! 
    region: String! 
} 

input S3ObjectInput { 
    bucket: String! 
    key: String! 
    region: String! 
    localUri: String 
    mimeType: String 
} 

Sie könnten dann etwas tun dieses Objekt als Teil eines anderen Typs zu definieren:

type UserProfile { 
    id: ID! 
    name: String 
    file: S3Object 
} 

Und dann eine Mutation spezifizieren, um sie hinzuzufügen:

type Mutation { 
    addUser(id: ID! name: String file: S3ObjectInput): UserProfile! 
} 

Ihre Client-Operationen der entsprechenden Eimer angeben müssen, Schlüssel (mit der Dateierweiterung), eine Region, usw.

Mehr hier: https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-react.html#complex-objects