AWS AppSync React: how to work with “complex” GraphQL schema?

Question

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! :-)

Shankar Raju Shankar Raju · Accepted Answer · 2018-11-30T19:02:09

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:

Once you create a new GraphQL API using AWS Amplify, you can still go to your AppSync schema (on the AWS Console), and add a new mutation type and custom resolver to handle this single mutation. Since your datasource for the types are all in DynamoDB, you can use BatchWrite across multiple tables.
We introduced a concept of pipeline resolvers in the last week. Using this, you can attach a pipeline resolver to the mutation type by passing Blog, Post and Comments to a chain of functions, which update the corresponding DynamoDB tables accordingly.
Use a Lambda datasource which updates all 3 tables in one go.
Update the CloudFormation document generated by AWS Amplify, or create a new child CF stack for the same
Add your own transformer to model your custom resolvers that update all 3 tables in one go, using one of the above approaches.

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.

AWS AppSync React: how to work with “complex” GraphQL schema?

1 Answers