I am trying to get started with AWS AppSync and AWS Amplify.
So far, I managed to follow the AWS documentation (especially here and here) to successfully create a sample TODO app (third code snippet) and enable the AppSync GraphQL API like so:
$ amplify add api
? Please select from one of the below mentioned services GraphQL
? Provide API name: MySampleTodoAPI
? Choose an authorization type for the API API key
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? true
? What best describes your project: Single object with fields (e.g., “Todo” with ID, name, description)
This generates this "trivial" schema.graphql
(i.e. containing only a single object):
type Todo @model {
id: ID!
name: String!
description: String
}
amplify push
generates a much more involved, secondary schema.graphql
from the file above, creates JavaScript code with objects for mutations, queries, etc. and also sets up AWS resources (i.e. DynamoDB table, S3 buckets, etc.). The app seems to have bugs, but essentially works - including adding data entered in the UI to the DynamoDB table.
I have created a second sample Blog app in the same way as above, only this time choosing Single object with fields (e.g., “Todo” with ID, name, description)
instead of Single object with fields ...
.
This generates this "complex" schema.graphql
(i.e. containing multiple, connected objects):
type Blog @model {
id: ID!
name: String!
posts: [Post] @connection(name: "BlogPosts")
}
type Post @model {
id: ID!
title: String!
blog: Blog @connection(name: "BlogPosts")
comments: [Comment] @connection(name: "PostComments")
}
type Comment @model {
id: ID!
content: String
post: Post @connection(name: "PostComments")
}
Question: How do I deal with "complex" objects in a React application when talking to the AWS AppSync GraphQL backend ?
As a (contrived) example, assuming I want to add a new Blog
object with one Post
and one Comment
object, can I somehow pass all objects to a single mutation in a single Connect
React component ? Or do I have to first trigger a Blog
mutation, followed by the other two ? Or do I have to look into customizing the (secondary) schema.graphql
and JavaScript files that Amplify generates for me ?
Unfortunately, the AWS sample code only deals with "trivial" schemas, not "complex" ones - and Amplify seems to be so fresh out of the box that all the third party posts and sample projects use other technologies...
Thank you very much for your consideration! :-)
Just to distinguish, Complex Objects is a term used by AWS AppSync to denote working with S3 metadata. In your question by complex, you mean non-trivial schemas.
As I understand this, you would like to to save a bunch of related types using a single mutation. AWS AppSync lets you manage your GraphQL schema, attach datasources to the fields, write custom logic via the VTL resolvers. It also exposes a context variable that holds your query arguments, result from the parent resolvers, utility functions, etc. So you can use these to get what you want. Otherwise, like you had mentioned, you would from your React app first make a mutation to save a blog, followed by other types.
Here are some of the ways you can write a single mutation for related GraphQL types:
AWS Amplify would not be able to provide this functionality out of the box, as this will then be too opinionated and use case driven. In many cases it may not be a good idea to write to multiple tables in one go without thinking about making this transactional and apply proper error handling.
We are figuring out several ways to improve the Developer Experience, and you should see some updates in the near future.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With