중계 현대 중첩 페이지 매김

Question

루트 쿼리가 songs입니다.이 페이지 매김 컨테이너에 있습니다. 그런 다음 comments이라는 노래에 중첩 된 속성이 있으므로 한 번에 각 노래에 대해 10k 개의 의견을로드하고 싶지 않기 때문에 페이지 매김을하고 싶습니다.

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

가 어떻게 의견의 connectionConfig을 쓰는가

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

? 나는 이것을 시도 :

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

그러나 의견이 노래에 중첩되어 있기 때문에 쿼리가 루트에 존재하지 않는다는 오류가 발생합니다.

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