Question

以下是使用Apollo客户端的示例客户端代码。

我从nodemon express服务器提供数据。

我的查询在graphiQL中运行正常。

import React from "react"
import { graphql } from 'react-apollo'
import gql from "graphql-tag";

const CounterpartyQuery = gql`
  query data{
        counterparty {
         name
       }
      }
`;

export class ExchangeRates extends React.Component {
   
    render() {
        console.log(this.props.data) // Giving undefined
        return (
            <div>hiii{this.props.data.counterparty.map(x => x.name)}</div>  //Error
        )
    }
}

const counterpartyData = graphql(CounterpartyQuery, { name: 'data' })(ExchangeRates)

export default counterpartyData

Answer 1

这种情况正在发生，因为您的网络调用尚未结束，但使用不可用的变量呈现组件。

您需要使用networkStatus来查看网络调用是否结束，然后数据才可用于呈现。在那之前，你需要展示一个装载机。

所以替换

graphql（CounterpartyQuery，{name：'data'}）

通过

graphql(CounterpartyQuery, {
        name: 'data' ,
        props : ({data}) => {
            return {
                data,
                isLoading:data['networkStatus']==1 || data['networkStatus']==2 || data['networkStatus']==4
            }
        }
    }),

然后使用

this.props.isLoading

变量在render方法中决定是显示加载还是显示列表。

例如：

render() {
        console.log(this.props.data, this.props.isLoading)
        return (
            {this.props.isLoading ? <div>Loading Data</div>:<div>hiii{this.props.data.counterparty.map(x => x.name)}</div>
        }
    )
}

https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-networkStatus

Answer 2

Apollo客户端HOC将loading道具传递给您的每个查询，几乎在每种情况下都需要它，以便在呈现数据之前等待响应（您还需要处理请求错误）：

export class ExchangeRates extends React.Component {

    render() {
        if (this.props.data.loading) {
            return <div> Loading </div>; // rendering an animated loading indicator here is good practice to show an activity
        }
        if (this.props.data.error) {
            return <div> Error </div>;
        }
        return (
            <div>hiii{this.props.data.counterparty.map(x => x.name)}</div>
        )
    }
}

GraphQL + Apollo +反应：无法显示数据

2 个答案: