AWS AppSync React: how to work with “complex” GraphQL schema?
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
add a comment |
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
add a comment |
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
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
reactjs amazon-dynamodb graphql aws-appsync aws-amplify
asked Nov 12 at 19:39
ssc
5,60983966
5,60983966
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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