title: AWS AppSync React: how to work with "complex" GraphQL schema?
body: <p>I am trying to get started with <a href="https://aws.amazon.com/appsync" rel="noreferrer">AWS AppSync</a> and <a href="https://aws-amplify.github.io" rel="noreferrer">AWS Amplify</a>.</p>
  
  <p>So far, I managed to follow the AWS documentation (especially <a href="https://aws-amplify.github.io/docs/js/api" rel="noreferrer">here</a> and <a href="https://aws-amplify.github.io/docs/js/react" rel="noreferrer">here</a>) to successfully create a <a href="https://aws-amplify.github.io/docs/js/api#react-components" rel="noreferrer">sample TODO app</a> (third code snippet) and enable the AppSync GraphQL API like so:</p>
  
  <pre><code>$ 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)
  </code></pre>
  
  <p>This generates this "trivial" <code>schema.graphql</code> (i.e. containing only a single object):</p>
  
  <pre><code>type Todo @model {
    id: ID!
    name: String!
    description: String
  }
  </code></pre>
  
  <p><code>amplify push</code> generates a much more involved, secondary <code>schema.graphql</code> 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.</p>
  
  <p>I have created a second sample Blog app in the same way as above, only this time choosing <code>Single object with fields (e.g., “Todo” with ID, name, description)</code> instead of <code>Single object with fields ...</code>.</p>
  
  <p>This generates this "complex" <code>schema.graphql</code> (i.e. containing multiple, connected objects):</p>
  
  <pre><code>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")
  }
  </code></pre>
  
  <p><strong>Question:</strong> How do I deal with "complex" objects in a React application when talking to the AWS AppSync GraphQL backend ?</p>
  
  <p>As a (contrived) example, assuming I want to add a new <code>Blog</code> object with one <code>Post</code> and one <code>Comment</code> object, can I somehow pass all objects to a single mutation in a single <code>Connect</code> React component ? Or do I have to first trigger a <code>Blog</code> mutation, followed by the other two ? Or do I have to look into customizing the (secondary) <code>schema.graphql</code> and JavaScript files that Amplify generates for me ?</p>
  
  <p>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...</p>
  
  <p>Thank you very much for your consideration! :-)</p>