Sorting results in AWS Amplify GraphQL without filtering

Question

Provided a very simple model in graphql.schema, how would I perform a simple sort query?

type Todo @model
  id: ID!
  text: String!
}

Which generates the following in queries.js.

export const listTodos = /* GraphQL */ `
  query ListTodos(
    $filter: ModelTodoFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        text
      }
      nextToken
    }
  }
`;

I have found multiple sources pointing me in the direction of the @key directive. This similar question addresses that approach (GraphQL with AWS Amplify - how to enable sorting on query).

While that may seem promising and successfully generates new queries I can use, all the approaches I have tried require that I filter the data before sorting it. All I want to do is sort my todo results on a given column name, with a given sort direction (ASC/DESC).

This is how I would perform a simple (unsorted) query: const todos = await API.graphql(graphqlOperation(listTodos));

I would be looking to do something along the lines of: const todos = await API.graphql(graphqlOperation(listTodos, {sortField: "text", sortDirection: "ASC"} )).

MTran MTran · Accepted Answer · 2020-09-08T10:16:12

Decorate your model with the @searchable directive, like so:

type Todo @model @searchable
{
  id: ID!
  text: String!
}

After that, you can query your data with sorting capabilities like below:

import { searchToDos } from '../graphql/queries';
import { API, graphqlOperation } from 'aws-amplify';

const toDoData = await API.graphql(graphqlOperation(searchToDos, {
  sort: {
    direction: 'asc',
    field: 'text'
  }
}));
console.log(toDoData.data.searchToDos.items);

For more information, see

Sorting results in AWS Amplify GraphQL without filtering

2 Answers