如何将来自 GraphQL 服务器的数据显示到 npm react-table?
How to show data from GraphQL server to npm react-table?
我已经开始使用 GraphQL server
和 Apollo client
。代码写在Reactjs
。现在我想使用任何查询从 GraphQL 服务器获取数据,并将数据显示到 UI 中的 table。我将 npm react-table
用于 table。
The table could look like this:
如果查询响应没有数组,我可以轻松获取和显示数据。例如,我有以下查询输入字符串:
{
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}
/>
但是,如果查询结果有数组,我不知道如何获取数据。请看图片
query result with array
那么我怎样才能将所有 5 个玩具的 title
显示给 table?
这是我的旧代码:
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;
如您所见,您的 ReactTable 数据道具需要一个数组(或者至少,在您的示例中,您向它传递了一个包含 1 个对象的数组)。
另请注意,您的 GraphQL 返回的数据对象的形式为
{
account
{
firstName,
lastName,
id
}
}
所以您可以使用 data={[ data.account ]}
定义 ReactTable 数据并得到相同的结果。
现在假设您执行玩具查询,则返回的数据将采用以下形式
{
allToy [
{
id,
title
},
{
id,
title
},
...
]
}
因此,如果您对数据的定义保持不变 (const { data } = this.props;
),则 data.allToy
将是 { id, title }
个对象的数组。
因此您可以将 Toy ReactTable 定义为:
<ReactTable
data={ data.allToy }
columns={columns}
defaultPageSize={10}
/>
我已经开始使用 GraphQL server
和 Apollo client
。代码写在Reactjs
。现在我想使用任何查询从 GraphQL 服务器获取数据,并将数据显示到 UI 中的 table。我将 npm react-table
用于 table。
The table could look like this:
如果查询响应没有数组,我可以轻松获取和显示数据。例如,我有以下查询输入字符串:
{
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}
/>
但是,如果查询结果有数组,我不知道如何获取数据。请看图片 query result with array
那么我怎样才能将所有 5 个玩具的 title
显示给 table?
这是我的旧代码:
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;
如您所见,您的 ReactTable 数据道具需要一个数组(或者至少,在您的示例中,您向它传递了一个包含 1 个对象的数组)。
另请注意,您的 GraphQL 返回的数据对象的形式为
{
account
{
firstName,
lastName,
id
}
}
所以您可以使用 data={[ data.account ]}
定义 ReactTable 数据并得到相同的结果。
现在假设您执行玩具查询,则返回的数据将采用以下形式
{
allToy [
{
id,
title
},
{
id,
title
},
...
]
}
因此,如果您对数据的定义保持不变 (const { data } = this.props;
),则 data.allToy
将是 { id, title }
个对象的数组。
因此您可以将 Toy ReactTable 定义为:
<ReactTable
data={ data.allToy }
columns={columns}
defaultPageSize={10}
/>