сделать компонент запроса apollo повторно используемым в React - PullRequest
Новая
       12

сделать компонент запроса apollo повторно используемым в React

0 голосов
/ 21 апреля 2019

Итак, я создаю табличный компонент в своем React Project, с помощью которого я отображаю список таких вещей, как Team s, Game s, Player s и т. Д.

Я хочу получитьодин компонент для этой таблицы, и я могу использовать его столько раз, сколько я хочу, чтобы отображать различные виды данных.

Дело в том, что я использую Apollo & GraphQL для извлечения этих данных из моей БД, и каждый запрос имеет свое имя данных: например, если я получу все свои команды, у меня будет data.allTeams, но если я получу все своиигры у меня будут data.allGames: 

class SectionTable extends React.Component<SectionTableProps, {}> {
  constructor(props: SectionTableProps) {
    super(props);
  }
  render() {
    return (
          <SectionTableQuery query={this.props.query} >
          {({ data: { allTeams = [] } = {}, error, loading }) => {
            if (loading) {
              return <tbody><tr><td>LOADING</td></tr></tbody>
            };
            if (error !== undefined) {
              return <tbody><tr><td>ERROR</td></tr></tbody>
            };
            return (
              <tbody>
                {allTeams.map((elem) => (
                    <tr key={elem.id}>
                      <th scope="row">{elem.id}</th>
                      {Object.keys(elem).map((k, i) => {
                        if (k !== "id" && k !== "__typename") {
                          return (<td key={elem[k]}>{elem[k]}</td>)
                        }
                      })}
                    </tr>
                ))}
              </tbody>
            );
          }}
        </SectionTableQuery>
    )
  }
}

В одном случае я захочу отобразить через allTeams, но в другом случае я хочу сопоставить через allGames.

Как я могу изменить свой код, чтобы он мог принимать имя данных в качестве аргумента?

1 Ответ

1 голос
/ 21 апреля 2019

может быть, просто отправив реквизит, чтобы указать, какой список нужно зациклить 

class SectionTable extends React.Component<SectionTableProps, {}> {
  ...
  render() {
    const { listName, query } = this.props;
    return (
      <SectionTableQuery query={query}>
        {({ data = {}, error, loading }) => {
          if (loading) {
            ...
          }
          if (error !== undefined) {
            ...
          }
          return (
            <tbody>
              {(data[listName]||[]).map(elem => (
                <tr key={elem.id}>
                  <th scope="row">{elem.id}</th>
                  {Object.keys(elem).map((k, i) => {
                    if (k !== 'id' && k !== '__typename') {
                      return <td key={elem[k]}>{elem[k]}</td>;
                    }
                  })}
                </tr>
              ))}
            </tbody>
          );
        }}
      </SectionTableQuery>
    );
  }
}
<SectionTable query={...} listName="allTeams" />
<SectionTable query={...} listName="allGames" />

, если вы хотите иметь другую строку, тогда добавьте даже функцию рендера для настройки строки

...