Javascript 中继嵌套分页

我有一个

歌曲的根查询

，它位于分页容器中。 然后，我在歌曲上有一个名为

comments

的嵌套属性，我也希望对其进行分页，因为我不希望一次为每首歌曲加载10k个注释

songsContainer.js：

fragment songsContainer on Query {
    songs(
      first: $count
      after: $cursor
      genre: $genre
      filter: $filter
    ) @connection(key: "songsContainer_songs") {
      edges {
        node {
          audioId
          name
          coverImageUrl
          artist
          likes
          dislikes
          ...commentsContainer
        }
      }
    }
  }

const connectionConfig = {
  direction: 'forward',
  query: graphql`
    query songsContainerForwardQuery(
      $count: Int!
      $cursor: String
      $genre: String
      $filter: FilterInput
    ) {
      ...songsContainer
    }
  `,
  getVariables: (_, { count, cursor }) => ({
    count,
    cursor,
  }),
};

paginationContainer(fragments, connectionConfig);

commentsContainer.js

  fragment commentsContainer on Audio {
    comments(
      first: $count
      after: $cursor
      getReplies: $getReplies
    ) @connection(key: "commentsContainer_comments") {
      edges {
        node {
          commentId
          body
          date
          likes
          dislikes
          repliesCount
          originalComment {
            id
          }
          user {
            userName
          }
        }
      }
    }
  }

createPaginationContainer(
  SongsContainer,
  {
    viewer: graphql`
      fragment SongsContainer_viewer on Query {
        id
        songs(first: $count, after: $cursor)
          @connection(key: "SongsContainer_songs", filters: []) {
          edges {
            cursor
            node {
              id
              ...SongItem_song
            }
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.viewer && props.viewer.songs;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor
      };
    },
    query: graphql`
      query SongsContainerQuery($count: Int!, $cursor: String) {
        viewer {
          ...SongsContainer_viewer
        }
      }
    `
  }
);

createPaginationContainer(
  CommentsContainer,
  {
    song: graphql`
      fragment CommentsContainer_song on Audio {
        id
        comments(first: $count, after: $cursor)
          @connection(key: "CommentsContainer_comments", filters: []) {
          edges {
            id
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.song && props.song.comments;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor,
        id: props.song.id
      };
    },
    query: graphql`
      query CommentsContainerQuery($id: ID!, $count: Int!, $cursor: String) {
        song(id: $id) {
          ...CommentsContainer_song
        }
      }
    `
  }
);

如何为注释编写连接配置？我试过这个：

const connectionConfig = {
  direction: 'forward',
  query: graphql`
    query commentsContainerForwardQuery(
      $count: Int!
      $cursor: String
    ) {
      ...commentsContainer
    }
  `,
  getVariables: (_, { count, cursor }) => ({
    count,
    cursor,
  }),
};

但是，由于注释嵌套在歌曲上，因此它会抛出一个错误，指出该查询在根目录上不存在。

SongsContainer.js

  fragment commentsContainer on Audio {
    comments(
      first: $count
      after: $cursor
      getReplies: $getReplies
    ) @connection(key: "commentsContainer_comments") {
      edges {
        node {
          commentId
          body
          date
          likes
          dislikes
          repliesCount
          originalComment {
            id
          }
          user {
            userName
          }
        }
      }
    }
  }

createPaginationContainer(
  SongsContainer,
  {
    viewer: graphql`
      fragment SongsContainer_viewer on Query {
        id
        songs(first: $count, after: $cursor)
          @connection(key: "SongsContainer_songs", filters: []) {
          edges {
            cursor
            node {
              id
              ...SongItem_song
            }
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.viewer && props.viewer.songs;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor
      };
    },
    query: graphql`
      query SongsContainerQuery($count: Int!, $cursor: String) {
        viewer {
          ...SongsContainer_viewer
        }
      }
    `
  }
);

createPaginationContainer(
  CommentsContainer,
  {
    song: graphql`
      fragment CommentsContainer_song on Audio {
        id
        comments(first: $count, after: $cursor)
          @connection(key: "CommentsContainer_comments", filters: []) {
          edges {
            id
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.song && props.song.comments;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor,
        id: props.song.id
      };
    },
    query: graphql`
      query CommentsContainerQuery($id: ID!, $count: Int!, $cursor: String) {
        song(id: $id) {
          ...CommentsContainer_song
        }
      }
    `
  }
);

SongItem.js

createRefetchContainer(
  SongItem,
  {
    song: graphql`
      fragment SongItem_song on Audio
        @argumentDefinitions(
          count: { type: "Int", defaultValue: 20 }
          cursor: { type: "String", defaultValue: null }
        ) {
        id
        ...CommentsContainer_song
        # ...more pagination container other_song
      }
    `
  },
  graphql`
    query SongItemQuery($id: ID!, $count: Int!, $cursor: String) {
      song(id: $id) {
        ...SongItem_song @arguments(count: $count, cursor: $cursor)
      }
    }
  `
);

CommentsContainer.js

  fragment commentsContainer on Audio {
    comments(
      first: $count
      after: $cursor
      getReplies: $getReplies
    ) @connection(key: "commentsContainer_comments") {
      edges {
        node {
          commentId
          body
          date
          likes
          dislikes
          repliesCount
          originalComment {
            id
          }
          user {
            userName
          }
        }
      }
    }
  }

createPaginationContainer(
  SongsContainer,
  {
    viewer: graphql`
      fragment SongsContainer_viewer on Query {
        id
        songs(first: $count, after: $cursor)
          @connection(key: "SongsContainer_songs", filters: []) {
          edges {
            cursor
            node {
              id
              ...SongItem_song
            }
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.viewer && props.viewer.songs;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor
      };
    },
    query: graphql`
      query SongsContainerQuery($count: Int!, $cursor: String) {
        viewer {
          ...SongsContainer_viewer
        }
      }
    `
  }
);

createPaginationContainer(
  CommentsContainer,
  {
    song: graphql`
      fragment CommentsContainer_song on Audio {
        id
        comments(first: $count, after: $cursor)
          @connection(key: "CommentsContainer_comments", filters: []) {
          edges {
            id
          }
        }
      }
    `
  },
  {
    direction: 'forward',
    getConnectionFromProps(props) {
      return props.song && props.song.comments;
    },
    getFragmentVariables(prevVars, totalCount) {
      return {
        ...prevVars,
        count: totalCount
      };
    },
    getVariables(props, { count, cursor }, fragmentVariables) {
      return {
        count,
        cursor,
        id: props.song.id
      };
    },
    query: graphql`
      query CommentsContainerQuery($id: ID!, $count: Int!, $cursor: String) {
        song(id: $id) {
          ...CommentsContainer_song
        }
      }
    `
  }
);