FragmentContainerとRefetchContainerをRelayで組み合わせる方法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

数時間の試行錯誤の末、私はそれを自分で考え出しました。これはいつも...

をStackOverflowの上の時に1つのポスト何かを起こるこれは私がやっていたものです：今、何FragmentContainerはもう必要ありません

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

。フラグメントの名前はGame_gameに変更されています。