— 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:

1. 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.
2. 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