Как показать данные с сервера GraphQL в реагирующей таблице npm?

Я начал работать с GraphQL server и Apollo client. Код написан на Reactjs. Теперь я хочу получать данные с сервера GraphQL с помощью любых запросов и отображать данные в таблице в пользовательском интерфейсе. Я использую npm react-table для таблицы.

Таблица может выглядеть так:

Я могу легко получить и показать данные, если в ответе на запрос нет массива. Например, у меня есть строка ввода запроса ниже:

{
  account {
    firstName
    lastName
    id
  }
}

И результат запроса без массива

{
  "data": {
    "account": {
      "firstName": "Marlen",
      "lastName": "Marquardt",
      "id": 2
    }
  }
}

В компоненте ReactTable я просто извлекаю данные, используя data.account.firstName

<ReactTable
  data={[
    {
      firstName: data.account.firstName,
      lastName: data.account.lastName,
      id: data.account.id,
    }
  ]}
  columns={columns}
/>

Однако, если результат запроса имеет массив, я не знаю, как получить данные. Пожалуйста, взгляните на картинку результат запроса с массивом

Итак, как я могу показать все 5 игрушек title в таблице? Это мой старый код:

import React from 'react';
import s from './Test.css';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import fetch from 'node-fetch';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import ReactTable from 'react-table'
import 'react-table/react-table.css';

const localURL = 'http://localhost:3000/graphql';
const client = new ApolloClient({
  link: new HttpLink({ uri: localURL, fetch }),
  cache: new InMemoryCache()
});
const columns = [
  {
    Header: "ID",
    accessor: "id"
  },
  {
    Header: "First Name",
    accessor: "firstName"
  },
  {
    Header: "Last Name",
    accessor: "lastName"
  }
]

class Table extends React.Component {
  render() {
    let { data } = this.props;
    return (
      <div>
        <h2> ADMIN </h2>
        <ReactTable
          data={[
            {
              firstName: data.account.firstName,
              lastName: data.account.lastName,
              id: data.account.id,
            }
          ]}
          columns={columns}
          defaultPageSize={10}
        />
      </div>
    );
  }
}

const queryAccountList = gql`
  query {
    account{
      firstName
      lastName
      id
      }
    }
  }
`

const AccountListWithData = graphql(queryAccountList)(Table);

export default AccountListWithData;

reactjs graphql react-apollo react-table
person Khanh Tran    schedule 09.01.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Как видите, реквизит данных вашего ReactTable ожидает массив (или, по крайней мере, в вашем примере вы передаете ему массив из 1 объекта).

Также обратите внимание, что объект данных, возвращаемый вашим GraphQL, имеет вид

  {
    account
    {
      firstName,
      lastName,
      id
    }
  }

Таким образом, вы могли бы определить свои данные ReactTable с помощью data={[ data.account ]} с тем же результатом.

Теперь предположим, что вы выполняете запрос Toys, тогда возвращаемые данные будут иметь форму

{
  allToy [
    {
      id,
      title
    },
    {
      id,
      title
    },
    ...
  ]
}

поэтому, если ваше определение данных останется прежним (const { data } = this.props;), то data.allToy будет массивом из { id, title } объектов.

Таким образом, вы можете определить свою игрушку ReactTable как:

<ReactTable
  data={ data.allToy }
  columns={columns}
  defaultPageSize={10}
/>
person Thomas Hennes    schedule 09.01.2018
comment
Если мой ответ на запрос содержит подмассив. Как я могу получить данные? Пожалуйста, взгляните на картинку: imgur.com/a/abOj4 - person Khanh Tran; 10.01.2018
comment
Настоящая проблема здесь в том, принимает ли ReactTable массив в качестве значения для ячейки данных. Если это так, вам не нужно делать ничего конкретного, вы можете просто передать data.allToys в свою ReactTable. Если это не так, вам нужно найти другой способ отображения ваших данных. Я пытаюсь сказать здесь, что доступ к данным — это не проблема, это скорее проблема представления, с которой вы имеете дело: как отображать вложенные массивы в двумерной таблице. - person Thomas Hennes; 10.01.2018