CODEWITHSUNDEEP
reactjsgraphqlaws-amplifyaws-appsync
meck373
meck373

Reputation: 1124

React Amplify query with connection

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);
        });

enter image description here

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.

Upvotes: 0

Views: 996

Answers (2)

Blkc
Blkc

Reputation: 612

The query depth can be configured via cli with amplify configure codegen. It is now covered in the official documentation

Upvotes: 2

leanchav
leanchav

Reputation: 26

Do you have a .graphqlconfig.yml file? Please, check the depth for Amplify.

projects:
  <YOUR_PROJECT_NAME>:
    extensions:
      amplify:
        maxDepth: <CHANGE_THIS>

Upvotes: 1

Related Questions