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

Итак, я создаю компонент таблицы в своем проекте React, с помощью которого я отображаю список таких вещей, как Teams, Games, Players и т. д.

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

Дело в том, что я использую 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.

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