List queries are not correctly generated for a one-to-many named connection

[VictoriaHunsaker]

Describe the bug When generating Graphql queries via amplify push, the queries are not generating valid nested one-to-many (bidirectional) connections, so the data I expect to be returned is not.

To Reproduce Graphql schema:

type Todo @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
  created: Int!
  goal: Goal @connection(name: "GoalTodos", keyField: "goalId")
}

type Goal @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  created: Int!
  title: String!
  todos: [Todo] @connection(name: "GoalTodos", keyField: "goalId")
}

Generated goal queries:

export const getGoal = `query GetGoal($id: ID!) {
  getGoal(id: $id) {
    id
    created
    title
    todos {
      items {
        id
        title
        created
      }
      nextToken
    }
  }
}
`;

export const listGoals = `query ListGoals(
  $filter: ModelGoalFilterInput
  $limit: Int
  $nextToken: String
) {
  listGoals(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      created
      title
      todos {
        nextToken
      }
    }
    nextToken
  }
}
`;

As shown, the getGoal query generates the correct items { ... } node under todos but this is not generated for the listGoals query. If I add the node by hand to the queries, then it works.

Commands used:

• amplify api add
• amplify push

I have tried generating both typescript and javascript and increasing the nested depth to 5 with the same result for each experiment.

Expected behavior I expect items { ... } to be generated on the "one" side of the 1:N connection.

Environment

``` npx: installed 1 in 2.963s System: OS: macOS 10.15.1 CPU: (4) x64 Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz Memory: 106.11 MB / 8.00 GB Shell: Unknown - /usr/local/bin/fish Binaries: Node: 11.0.0 - /usr/local/bin/node Yarn: 1.10.1 - /usr/local/bin/yarn npm: 6.4.1 - /usr/local/bin/npm Browsers: Chrome: 78.0.3904.108 Firefox: 70.0.1 Safari: 13.0.3 npmPackages: @apollo/react-hooks: ^3.0.0 => 3.1.3 @aws-amplify/analytics: ^1.3.2 => 1.3.4 @aws-amplify/api: ^1.2.2 => 1.2.4 @aws-amplify/auth: ^1.2.2 => 1.5.0 @aws-amplify/core: ^1.2.2 => 1.2.4 @aws-amplify/interactions: ^1.1.0 => 1.1.4 @aws-amplify/pubsub: ^1.2.2 => 1.2.4 @aws-amplify/storage: ^1.2.2 => 1.2.4 @aws-amplify/ui: ^1.1.3 => 1.1.3 @aws-amplify/xr: ^0.2.4 => 0.2.4 @babel/cli: ^7.5.5 => 7.7.0 @babel/core: ^7.5.5 => 7.7.2 @babel/plugin-proposal-class-properties: ^7.5.5 => 7.7.0 @babel/plugin-proposal-numeric-separator: ^7.2.0 => 7.2.0 @babel/plugin-proposal-object-rest-spread: ^7.5.5 => 7.6.2 @babel/preset-env: ^7.5.5 => 7.7.1 @babel/preset-react: ^7.0.0 => 7.7.0 @babel/preset-typescript: ^7.6.0 => 7.7.2 @types/enzyme: ^3.10.3 => 3.10.3 @types/enzyme-adapter-react-16: ^1.0.5 => 1.0.5 @types/is-hotkey: ^0.1.1 => 0.1.1 @types/jest: ^24.0.17 => 24.0.22 @types/lodash: ^4.14.146 => 4.14.146 @types/react: ^16.8.25 => 16.9.11 @types/react-datepicker: ^2.8.1 => 2.9.4 @types/react-dom: ^16.8.5 => 16.9.4 @types/react-router-dom: ^4.3.4 => 4.3.5 @types/react-stripe-elements: ^1.3.0 => 1.3.5 @types/slate: ^0.47.4 => 0.47.4 @types/slate-react: ^0.22.8 => 0.22.8 @types/webpack-env: ^1.14.0 => 1.14.1 apollo-boost: ^0.4.3 => 0.4.4 apollo-server-lambda: ^2.8.1 => 2.9.7 aws-amplify-react: ^2.5.4 => 2.5.4 bfj: 6.1.1 => 6.1.1 case-sensitive-paths-webpack-plugin: 2.1.2 => 2.1.2 chalk: 2.4.1 => 2.4.1 copy-webpack-plugin: ^4.5.2 => 4.6.0 cross-fetch: ^3.0.4 => 3.0.4 css-loader: 1.0.0 => 1.0.0 dinero.js: ^1.5.0 => 1.6.0 dotenv: 6.0.0 => 6.0.0 dotenv-expand: 4.2.0 => 4.2.0 emotion: ^10.0.23 => 10.0.23 eslint: ^5.9.0 => 5.16.0 eslint-config-airbnb: ^17.1.0 => 17.1.1 eslint-config-react-app: ^3.0.5 => 3.0.8 eslint-loader: 2.1.1 => 2.1.1 eslint-plugin-flowtype: 2.50.1 => 2.50.1 eslint-plugin-import: ^2.14.0 => 2.18.2 eslint-plugin-jsx-a11y: ^6.1.2 => 6.2.3 eslint-plugin-react: ^7.11.1 => 7.16.0 eslint-plugin-react-hooks: ^1.7.0 => 1.7.0 file-loader: 2.0.0 => 2.0.0 flatpickr: ^4.6.3 => 4.6.3 fork-ts-checker-webpack-plugin: ^1.5.0 => 1.6.0 formik: ^1.5.8 => 1.5.8 fs-extra: 7.0.0 => 7.0.0 graphql: ^14.0.2 => 14.5.8 graphql-tag: ^2.10.0 => 2.10.1 html-webpack-plugin: ^4.0.0-alpha.2 => 4.0.0-beta.8 identity-obj-proxy: 3.0.0 => 3.0.0 immutable: ^4.0.0-rc.12 => 4.0.0-rc.12 jest: ^24.0.0 => 24.9.0 jest-pnp-resolver: 1.0.1 => 1.0.1 jest-resolve: 23.6.0 => 23.6.0 mini-css-extract-plugin: 0.4.3 => 0.4.3 moment: ^2.22.2 => 2.24.0 node-sass: ^4.12.0 => 4.13.0 optimize-css-assets-webpack-plugin: 5.0.1 => 5.0.1 pnp-webpack-plugin: 1.1.0 => 1.1.0 postcss-flexbugs-fixes: 4.1.0 => 4.1.0 postcss-loader: 3.0.0 => 3.0.0 postcss-preset-env: 6.0.6 => 6.0.6 postcss-safe-parser: 4.0.1 => 4.0.1 prettier: ^1.18.2 => 1.19.1 prop-types: latest => 15.7.2 query-string: ^6.8.2 => 6.8.3 react: ^16.9.0 => 16.11.0 react-apollo: ^2.5.8 => 2.5.8 react-app-polyfill: ^0.1.3 => 0.1.3 react-datepicker: ^2.8.0 => 2.9.6 react-day-picker: ^7.3.2 => 7.4.0 react-dev-utils: ^6.1.1 => 6.1.1 react-dom: ^16.6.3 => 16.11.0 react-inlinesvg: ^1.1.7 => 1.1.7 react-router-dom: ^5.1.0 => 5.1.2 react-stripe-elements: ^2.0.3 => 2.0.3 reselect: ^4.0.0 => 4.0.0 resolve: 1.8.1 => 1.8.1 sass-loader: 7.1.0 => 7.1.0 semantic-ui-css: ^2.4.1 => 2.4.1 semantic-ui-react: ^0.83.0 => 0.83.0 serverless-webpack: ^5.2.0 => 5.3.1 slate: ^0.47.9 => 0.47.9 slate-html-serializer: ^0.8.11 => 0.8.11 slate-react: ^0.22.10 => 0.22.10 source-map-loader: ^0.2.4 => 0.2.4 stripe: ^6.20.0 => 6.36.0 style-loader: 0.23.0 => 0.23.0 terser-webpack-plugin: 1.1.0 => 1.1.0 ts-jest: ^24.0.2 => 24.1.0 tslint: ^5.18.0 => 5.20.1 tslint-config-prettier: ^1.18.0 => 1.18.0 tslint-react: ^4.0.0 => 4.1.0 tslint-react-hooks: ^2.2.1 => 2.2.1 typescript: ^3.5.3 => 3.7.2 url-loader: 1.1.1 => 1.1.1 victory: ^33.1.2 => 33.1.3 webpack: ^4.17.1 => 4.41.2 webpack-cli: ^3.1.0 => 3.3.10 webpack-dev-server: ^3.1.5 => 3.9.0 webpack-node-externals: ^1.6.0 => 1.7.2 whatwg-fetch: ^3.0.0 => 3.0.0 npmGlobalPackages: @aws-amplify/cli: 1.10.0 bower: 1.3.2 browser-sync: 2.11.1 browserify-incremental: 3.1.1 browserify: 13.0.1 coffee-script-redux: 2.0.0-beta7 create-react-app: 2.0.4 generator-react-gulp-browserify: 0.0.41 grunt-cli: 0.1.13 grunt: 0.4.4 gulp-cli: 1.2.1 mocha: 5.2.0 npm-check-updates: 2.12.1 npm: 6.4.1 serverless: 1.35.0 stryker-cli: 0.1.3 typescript: 3.5.3 yo: 1.8.3 ```

Sample code If the above schema is not enough to reproduce, please let me know.

[undefobj]

Hi the above schema with keyField is older behavior, could you try using the latest functionality defined in the documentation (keyName and fields): https://aws-amplify.github.io/docs/cli-toolchain/graphql#connection

[yshterev]

@Clairly Try --max-depth option and GraphQL statements.

[kaustavghosh06]

@Clairly Please let us know if @undefobj's response didn't resolve your issue. Closing this for now.

[mvogttech]

@Clairly Did you ever figure this out? I am running into the same issue while using the most up-to-date schema.

[VictoriaHunsaker]

@mvogttech I'm not seeing it currently, but when I was, I just manually edited the queries after generation. :/ Less than ideal. Sorry I'm not more help. I don't know what I did that fixed it.

[spachore]

@mvogttech I was facing the same issue and it got resolved after I changed the max-depth from default 2 to 4.

$ amplify configure codegen
? Choose the code generation language target javascript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
? Enter maximum statement depth [increase from default if your schema is deeply nested] 4

$ amplify codegen
â Downloaded the schema
â Generated GraphQL operations successfully and saved at src/graphql

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels for those types of questions.