GraphQL AppSync S3 Upload with Complex Objects

** Which Category is your question related to? **

GraphQL AppSync, and S3 Uploads with Complex Objects.

** What AWS Services are you utilizing? **

GraphQL AppSync, and S3 Uploads with Complex Objects.

** Provide additional details e.g. code snippets **

I have set up a simple Blog, but each article will require a single Feature Image, so I set up my schema as follows…

enum Visibility {
  public
  private
}
type Post @model {
  id: ID!
  title: String!
  content: String!
  feature: S3Object
  gallery: S3Object
  comments: [Comment] @connection(name: "PostComments")
  author: [Author] @connection(name: "PostAuthor")
}
type S3Object {
  bucket: String!
  key: String!
  region: String!
  localUri: String
  mimeType: String
}
type Author @model {
  id: ID!
  username: String!
  email: String!
  post: Post @connection(name: "PostAuthor")
}
type Comment @model {
  id: ID!
  content: String
  post: Post @connection(name: "PostComments")
}
input S3ObjectInput {
  id: ID
  name: String!
  description: String
  file: S3ObjectInput
}

I have read the articles about complex objects, but the mutation looks like it needs some extra structure that looks to be missing in the documentation.

      if (this.props.currentMethod === 'add') {
        await API.graphql(graphqlOperation(createPost, { input: this.state }))
          .then(result => {
            console.log(result);
            this.props.onChangeMethod('listing');
          })
          .catch(err => console.log(err));
      }

Thats my existing createPost mutation, without the S3 Upload added… this.state doesn’t have the feature object yet… I need to add ‘feature’ to my state.

If I add feature as

      feature = {
        bucket,
        key,
        region,
        localUri: selectedFile,
        mimeType,
      };

Where do I upload the file? Do I add feature to the mutation state, to send it up to AWS… Do I do the S3 Upload separately with something else, and just store the key and such locally?

[ayappaP]

Same issue here as well. You cannot upload images to S3 using aws amplify graphql client. Must use the Appsync SDK which has a huge size just like every other AWS package, bloating your app. The documentation should make it clear that you cannot use complexobjects at the beginning so that people don’t have to rewrite a significant portion of the app just because they used the graphql client. 👎

[bishonbopanna]

@dabit3 can you please comment.

Starting from this tutorial - https://github.com/aws-samples/aws-amplify-graphql

I have run into a similar requirement where I have to upload an image and do it while creating/updating an object (appsync + dynamo) as an atomic operation but the below just puts an entry into dynamo and not upload to S3. Does amplify-js does not have this capability to deal with complex objects ?

await API.graphql(graphqlOperation(createPicture,
            {
                input: {
                            name,
                            owner,
                            visibility,
                            id: uuid(),
                            createdAt: new Date().toISOString(),
                            file: { bucket,
                                    region,
                                    key,
                                    localUri, 
                                    mimeType
                                }
                        }
            }))
            .then(res => {
                console.log("Done");
            });

Schema -

type Picture @model @auth(rules: [{allow: owner}]) {
  id: ID!
  name: String
  owner: String
  visibility: Visibility
  file: S3ObjectInput
  createdAt: String
}

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

enum Visibility {
  public
  private
}