我们正在使用graphQL和React Apollo 2.1来进行一些查询。该查询有三个嵌套组件。查询在graphiql中工作正常,我们得到所有字段的结果。一旦我们将它放入应用程序并进行调用,我们将获得除嵌套字段之外的所有字段返回null。在DeviceList下面调用查询连接器调用查询。有什么想法吗?
export const mapDeviceQuery = gql
query mapDeviceQuery($input: String, $type: DeviceSearchEnum) {
devices(input: $input, type: $type) {
id
client
productKey
alias
imei
subFleet
warranty
isActive
locate{
latitude
longitude
speed
heading
date
time
}
address{
full
street_address
city
state
zip
}
}
}
deviceList.hoc.js
render = ({loading, error, data} = this.props) => {
let deviceList = [];
if(data.devices){
console.log(data.devices);
for(let i=0; i<data.devices.length; i++){
if(data.devices[i].isActive){
let d = data.devices[i];
deviceList.push({
key : i,
alias : d.alias,
driver : d.driver,
subFleet : d.subFleet,
imei : d.imei,
address : d.address.full,
date : d.locate.date,
time : d.locate.time
});
}
}
}
queryconnector.js
import React, { Component } from 'react';
import { Query } from "react-apollo";
const queryConnector = (queryGQL) => WrappedComponent => {
class QueryConnector extends Component {
render = () => {
return (
<Query query={queryGQL}>
{({ loading, error, data }) => {
console.log(loading)
console.log(data)
return (
<WrappedComponent
runQuery={queryGQL} loading={loading} error={error} data={data}
{...this.props}
/>
)
}}
</Query>
)
}
}
return QueryConnector
}
export default queryConnector