如何显示从GraphQL服务器到npm react-table的数据? [英] How to show data from GraphQL server to npm react-table?

问题描述

我已经开始使用 GraphQL服务器和 Apollo客户端.该代码是用 Reactjs 编写的.现在，我想使用任何查询从GraphQL服务器获取数据，并将数据显示到UI中的表.我将npm react-table 用于表.

表格可能看起来像这样:

如果查询响应没有数组，我可以轻松获取并显示数据.例如，我在下面输入了查询输入字符串:

  {帐户 {名姓ID}} 

查询结果没有数组

  {数据": {帐户": {"firstName":"Marlen"，"lastName":"Marquardt"，"id":2}}} 

在ReactTable组件中，我只是使用 data.account.firstName

来获取数据

 < ReactTable数据= {[{firstName:data.account.firstName，lastName:data.account.lastName，id:data.account.id，}]}列= {columns}/> 

但是，如果查询结果中包含数组，我将不知道如何获取数据.请看图片带有数组的查询结果

那么我如何在桌子上显示所有5个玩具的 title ?这是我的旧代码:

  import从'react'导入React；从'./Test.css'导入s；从"apollo-client"导入{ApolloClient}；从'apollo-link-http'导入{HttpLink};从"apollo-cache-inmemory"导入{InMemoryCache}；从'node-fetch'导入获取；从'react-apollo'导入{graphql};从'graphql-tag'导入gql;从'react-table'导入ReactTable导入'react-table/react-table.css';const localURL ='http://localhost:3000/graphql';const client = new ApolloClient({链接:新的HttpLink({uri:localURL，fetch})，缓存:新的InMemoryCache()});const列= [{标头:"ID"，访问者:"id"}，{标题:名字"，访问者:名字"}，{标头:姓氏"，访问者:"lastName"}]类表扩展了React.Component {使成为() {让{数据} = this.props;返回 (< div>< h2>ADMIN</h2><反应表数据= {[{firstName:data.account.firstName，lastName:data.account.lastName，id:data.account.id，}]}列= {columns}defaultPageSize = {10}/></div>);}}const queryAccountList = gql`询问 {帐户{名姓ID}}}`const AccountListWithData = graphql(queryAccountList)(Table);导出默认的AccountListWithData; 

解决方案

如您所见，ReactTable的数据属性需要一个数组(或者至少在您的示例中，将其传递一个1个对象的数组)./p>

还请注意，您的GraphQL返回的数据对象的格式为

  {帐户{名，姓，ID}} 

因此您可以使用具有相同结果的 data = {[data.account]} 定义ReactTable数据.

现在假设您执行玩具查询，那么返回的数据将采用以下格式

  {allToy [{ID，标题}，{ID，标题}，...]} 

因此，如果您对数据的定义保持不变( const {data} = this.props; )，则 data.allToy 将是的数组{id，title} 对象.

因此，您可以将Toy ReactTable定义为:

 < ReactTable数据= {data.allToy}列= {columns}defaultPageSize = {10}/> 

I've been starting working with GraphQL server and Apollo client. The code is written in Reactjs. Now I want to get data from GraphQL server using any queries, and show data to the table in the UI. I use npm react-table for table.

The table could look like this:

I can easily get and show data if the query response has no array. For example, I have the query input string below:

{
  account {
    firstName
    lastName
    id
  }
}

And query result with no array

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

In ReactTable component, I just fetch the data using data.account.firstName

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

However, if query result has array I don't know how to fetch the data. Please take a look the picture query result with array

So how can I show all 5 toy's title to table ? This is my old code:

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;

解决方案

As you can see, your ReactTable's data prop expects an array (or at least, in your example you're passing it an array of 1 object).

Note also that the data object returned by your GraphQL is of the form

  {
    account
    {
      firstName,
      lastName,
      id
    }
  }

So you could have defined your ReactTable data with data={[ data.account ]} with the same result.

Now let's say you perform your Toys query, then the data returned will be of the form

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

so if your definition of data remains the same (const { data } = this.props;), then data.allToy will be an array of { id, title } objects.

So you can define your Toy ReactTable as:

<ReactTable
  data={ data.allToy }
  columns={columns}
  defaultPageSize={10}
/>

这篇关于如何显示从GraphQL服务器到npm react-table的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！