リレー最近の入れ子になったページネーション

Question

私はsongsのルートクエリを持っています。これはページ区切りコンテナにあります。 その後、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私はコメントをconnectionConfigを書くにはどうすればよい

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

？私はこれを試した：

しかし、コメントは、曲にネストされているため、クエリがルート上に存在しないというエラーをスローします。

Answer 1

SongsContainer.js

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

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

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