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












2














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










share|improve this question



























    2














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










    share|improve this question

























      2












      2








      2







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










      share|improve this 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! :-)







      reactjs amazon-dynamodb graphql aws-appsync aws-amplify






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 12 at 19:39









      ssc

      5,60983966




      5,60983966
























          1 Answer
          1






          active

          oldest

          votes


















          2














          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.






          share|improve this answer





















          • Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
            – ssc
            Dec 15 at 17:52











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268991%2faws-appsync-react-how-to-work-with-complex-graphql-schema%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          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.






          share|improve this answer





















          • Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
            – ssc
            Dec 15 at 17:52
















          2














          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.






          share|improve this answer





















          • Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
            – ssc
            Dec 15 at 17:52














          2












          2








          2






          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.






          share|improve this answer












          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.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 30 at 19:02









          Shankar Raju

          2,15842348




          2,15842348












          • Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
            – ssc
            Dec 15 at 17:52


















          • Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
            – ssc
            Dec 15 at 17:52
















          Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
          – ssc
          Dec 15 at 17:52




          Thank you very much for your response! It seems there is a lot of valuable information in it, but for the moment, I had to halt work on the GraphQL API and postpone that until I have learned more about Amplify, React and JavaScript in general. I will get back to this eventually.
          – ssc
          Dec 15 at 17:52


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268991%2faws-appsync-react-how-to-work-with-complex-graphql-schema%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Bressuire

          Vorschmack

          Quarantine