0

我正在将一些中继类代码迁移到现代中继。现在我很难迁移分页实现。我正在使用页面和偏移方法。这是我现在拥有的：

游戏.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
        );
    }

});

播放器.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 上做错了，它们应该被组合起来，但我不知道如何实现我想要的。有人可以启发我吗？

4

1 回答 1

0

经过数小时的反复试验，我自己弄清楚了。当有人在 StackOverflow 上发布内容时，总会发生这种情况......

这是我必须做的：

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 了。请注意，片段的名称已重命名为 Game_game。

于 2017-11-29T13:26:32.257 回答