Amplify-js: React Amplify query with @connection

[mkaschke]

I am currently building a React application with Amplify Cli.

The schema.graphql

type Ticket @auth(rules: [{ allow: owner, operations: [create, update, delete] }]) @model @searchable  {
  id: ID!
  location: String
  city: String
  comment: String
  owner: String
  startDate: String
  endDate: String
  status: String
  request: [Request] @connection(keyName: "byRequest", fields: ["id"])
}

type Request @auth(rules: [{ allow: owner, operations: [create, update, delete] }]) @model @searchable @key(name: "byRequest", fields: ["ticketID"]) {
  id: ID!
  ticketID: ID!
  requester: String
}

The generated code from amplify for the relevant searchTickets query

export const searchTickets = /* GraphQL */ `
  query SearchTickets(
    $filter: SearchableTicketFilterInput
    $sort: SearchableTicketSortInput
    $limit: Int
    $nextToken: String
  ) {
    searchTickets(
      filter: $filter
      sort: $sort
      limit: $limit
      nextToken: $nextToken
    ) {
      items {
        id
        location
        city
        comment
        owner
        startDate
        endDate
        status
        request {
          nextToken 
        }
      }
      nextToken
      total
    }
  }
`;

When I am trying to query the data in Appsync, the result includes the requester's array, as expected.

query {
  searchTickets {
     items{
      location
      owner
      request {
        items{
          requester // <-
        } 
      }
    }
  }
}

Now I am struggling with the React code because the requester's array is not included. The rest of the code is working fine and I get all data from Ticket (location, city...) but not the data from the "Request" type.

React query code:

 await API.graphql(
        graphqlOperation(queries.searchTickets, {
          limit, // limit is set in a const
          sort: {
            field: 'startDate',
            direction: 'asc'
          },
          filter: {
            location: {
              eq: location
            },
            city: {
              eq: city
            }
          }
        })
      )
        .then(payload => {
          const data = payload.data.searchTickets.items;
          setTickets(tickets => tickets.concat(data)); 
        })
        .catch(err => {
          console.log('error: ', err);
        });

Any idea why the "Request" array is empty or how I can access the "Request" type data via the searchTickets query?

THX!

PS: I am happy to provide more if code/information if needed.

[RossWilliams]

The generated code for graphql queries is meant as a template starting point to help you write your own queries. In general, don't use them as-is. When you created your project, you can select the 'depth' you want for the autogenerated queries. In your case the depth is greater than the request { items {} } level, so its not in the autogenerated query.

Copy and paste the autogenerated query into your own file, modify it to just return the values you need, or instead use the query string you used inside of AppSync.

[ericclemmons]

@mkaschke I've run into the same situation! When you run amplify push, it asks about "maximum depth" (defaults to 2) of queries.

As @RossWilliams has mentioned, you will likely need to use these auto-generated queries as a starting point and update to meet your UI's needs. (Especially if it means making multiple round-trips for a collection!)

If you want to re-generate with deeper queries, check out:

https://docs.amplify.aws/cli/graphql-transformer/codegen#statement-depth

$ amplify codegen statements --max-depth 3