FragmentContainer와 Reletch의 RefetchContainer를 결합하는 방법 modern

Question

일부 Relay 클래스 코드를 Relay modern로 마이그레이션 중입니다. 이제는 페이지 매김 구현을 마이그레이션하는 데 어려움을 겪고 있습니다. 페이지 및 오프셋 접근 방식을 사용하고 있습니다.

Game.jsx :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {QueryRenderer, createFragmentContainer, createRefetchContainer, graphql} from 'react-relay'; 
import Player from './Player'; 

class Game extends React.Component { 
    _loadPage(e) { 
     e.preventDefault(); 
     this.props.relay.refetch({page: parseInt(e.target.dataset.page)}, null); 
    } 

    render() { 
     return (
      <div> 
       <h1>{this.props.game.name}</h1> 
       <ul className="pagination"> 
        {this.props.game.pages.map((page) => { 
         <li key={page.page}> 
          <a href="#" data-page={page.page} onClick={this._loadPage}>{page.page}</a> 
         </li> 
        }) 
       </ul> 
       {this.props.game.players.map(player => 
        <Player key={player.id} /> 
       )} 
      </div> 
     ); 
    } 
} 

Game = createRefetchContainer(
    Game, 
    { 
     players: graphql` 
     fragment Game_players on Game 
     @argumentDefinitions(
      page: {type: "Int", defaultValue: 1}, 
      first: {type: "Int", defaultValue: 15} 
     ) 
     { 
      players(page: $page, first: $first) { 
      id 
      ...Player_player 
      } 
     } 
    ` 
    }, 
    graphql` 
    query GamePlayersRefetch_Query($page: Int!, $first: Int!) { 
     game(id: $id) { 
     ...Game_players @arguments(page: $page, first: $first) 
     } 
    } 
    ` 
); 


Game = createFragmentContainer(
    Game, 
    graphql` 
     fragment Game_game on Game 
      @argumentDefinitions(
      page: {type: "Int", defaultValue: 1}, 
      first: {type: "Int", defaultValue: 15} 
     ) { 
      id 
      name 
      pages { 
      page 
      } 
      ...game_players @arguments(page: $page, first: $first) 
     } 
    ` 
) 


$(document).on("load turbolinks:load DOMContentLoaded", e => { 
    let element = document.getElementById('game'); 
    ReactDOM.render(
      <QueryRenderer 
      environment={environment} 
      query={ 
       graphql` 
       query gameQuery(
        $id: ID! 
        $page: Int! 
        $first: Int! 
       ) { 
         game(id: $id) { 
         ...Game_game @arguments(page: $page, first: $first) 
         } 
        } 
      ` 
      } 
      variables={{ 
       id: element.dataset.id, 
       page: 1, 
       first: 15 
      }} 
      render={({error, props}) => { 
       if (props) { 
       return <Game /> 
       } else { 
       return <div>Loading.../div> 
       } 
      }} 
      />, 
      element 
     ); 
    } 

}); 

Player.jsx : 여기에 내가 지금 가지고있는 무엇

import React from 'react'; 
import {createFragmentContainer, graphql} from 'react-relay'; 

class Player extends React.Component { 
    render() { 
     <div className="player"> 
      <div class="player-name">{this.props.player.name}</div> 
     </div> 
    } 
} 


export default createFragmentContainer(
    Player, 
    graphql` 
    fragment Player_player on Player { 
     id 
    } 
    ` 
); 

나는 FragmentContainer 그들이 결합해야 RefetchContainer 또는 뭔가 잘못된 일을해야

하지만 내가 원하는 것을 성취 할 수있는 단서가 없습니다. 누군가가 나를 계몽 할 수 있습니까?

Answer 1

몇 시간의 시행 착오 끝에 나는 그것을 스스로 알아 냈습니다.

이

Game = createRefetchContainer(
    Game, 
    { 
     game: graphql` 
     fragment Game_game on Game 
     @argumentDefinitions(
      page: {type: "Int", defaultValue: 1}, 
      first: {type: "Int", defaultValue: 15} 
     ) 
     { 
      id 
      name 
      players(page: $page, first: $first) { 
      id 
      ...Player_player 
      } 
     } 
    ` 
    }, 
    graphql` 
    query GamePlayersRefetch_Query($page: Int!, $first: Int!) { 
     game(id: $id) { 
     ...Game_players @arguments(page: $page, first: $first) 
     } 
    } 
    ` 
); 

은 이제 더 FragmentContainer가 더 이상 필요하지 않습니다 : StackOverflow의 하나 게시물 뭔가 ...

이 내가해야 할 일을했을 것입니다 때 항상 발생합니다. 단편의 이름이 Game_game으로 바뀌 었음을 확인하십시오.