React Amplify query with connection

Question

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.

Blkc · Accepted Answer · 2020-06-27 04:09:27Z

2

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

answered Jun 27, 2020 at 4:09

Blkc

6122 gold badges10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leanchav · Accepted Answer · 2020-04-05 17:17:30Z

1

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

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

answered Apr 5, 2020 at 17:17

leanchav

262 bronze badges

2 Comments

meck373 Over a year ago

projects: share: schemaPath: src/graphql/schema.json includes: - src/graphql/**/*.js excludes: - ./amplify/** extensions: amplify: codeGenTarget: javascript generatedFileName: '' docsFilePath: src/graphql extensions: amplify: version: 3 => no depth defined

leanchav Over a year ago

Then add the property and set it to a depth level to test if that fixes the problem for you. "maxDepth:10" should be enough.

Collectives™ on Stack Overflow

React Amplify query with connection

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related