— Summary
I am working through the AWS Amplify ‘Todo’ related example. I can successfully run a custom query on AppSync web portal that returns data from DynamoDB sorted by createdAt date. But I cannot figure out how to run this query in my Amplify React app.
Using the default query I can display the data (list the ‘Todo’ items) in the React UI app but it is default random sort order.
I have failed to run my custom query inside my React javascript app. I cannot find any examples / demos on AWS sources or documentation that demonstrates how to run a custom query.
Two tasks I am stuck on:
- edit queries.js file, adding my custom query. Some reformatting of the query that successfully runs in AppSync is required, but I cannot find examples to learn from.
- edit App.js (my React javascript app) to invoke the custom query.
— my code
I updated the data model of graphQL (this is the schema.graphql file in my Amplify React app)
schema.graphql:
type Todo @model @auth(rules:[{allow: owner}]) {
id: ID! @primaryKey(sortKeyFields: ["createdAt"])
createdAt: String!
updatedAt: String!
owner: String! @index(name: "ownerTodo", queryField: "ownerTodo", sortKeyFields: ["createdAt"])
name: String
description: String
}
Inside AppSync I also successfully tested a custom query that does correctly outputs sorted data:
query OwnerTodo {
ownerTodo(owner: "XXX", sortDirection: DESC) {
items {
createdAt
description
id
name
owner
updatedAt
}
}
}
This is a copy of the default listTodos query inside the file queries.js. This query runs fine, but it does not sort the data. I need to edit this so it outputs the same as the query above in AppSync. It should be easy, but I cannot find examples to learn from.
export const ownerTodo = /* GraphQL */ `
query OwnerTodo(
$filter: ModelTodoFilterInput
$limit: Int
$nextToken: String
) {
ownerTodo(filter: $filter, limit: $limit, nextToken: $nextToken) {
items {
id
name
description
createdAt
updatedAt
owner
__typename
}
nextToken
__typename
}
}
`;
I also have my app.js code which calls/invokes the query. It currently works find for the default query (named listTodos), so I think I just need to replace the name of the query for the new custom query (ownerTodo), assuming i can get this new custom query to run correctly.
// asynchronous function to Get data from DynamoDB
async function listTodoItem() {
const var_put_todo = await var_api_client.graphql(
{ query: listTodos,
variables: var_query_variables,
});
// console.log(var_put_todo);
console.log(var_put_todo.data.listTodos.items);
var_Putitems(var_put_todo.data.listTodos.items);
}
I hope that makes sense, thanks in advance. Tim
There is a lack of documentation on graphql queries.js