如何在 Apollo Query 组件中返回 Highcharts？

Question

我正在尝试在 Highchart 中返回 graphql 数据。不知何故，它没有被显示。观看现场演示here。

import React from "react";
import { Query } from "react-apollo";
import Highcharts from "highcharts";

import { ExchangeRates, client } from "./query";

class OtherComponentTest extends React.Component {
  componentDidMount() {
    <Query query={ExchangeRates} client={client}>
      {({ loading, error, data }) => {
        if (error) return <h1>Error...</h1>;
        if (loading || !data) return <h1>Loading...</h1>;

        return Highcharts.chart("production", {
          ...
        });
      }}
    </Query>;
  }
  render() {
    return (
      <div>
        <div id="production">loading </div>
      </div>
    );
  }
}

export default OtherComponentTest;

我错过了什么？

Answer 1

您不能像这样将 JSX 添加到您的 componentDidMount 方法中并期望它做某事。您的代码只会被转译为对React.createElement 的调用，但元素本身将永远不会被渲染。有几种不同的方法可以做到这一点：

一，为你的 highcharts 容器创建一个包装器组件。

// elsewhere...
class HighchartsComponent extends React.Component {
  componentDidMount () {
    Highcharts.chart("production", {
      series: this.props.series,
      // other config
    })
  }

  render () {
    return <div id="production">loading</div>
  }
}

// inside whatever render method
<Query query={ExchangeRates} client={client}>
  {({ loading, error, data }) => {
    if (error) return <h1>Error...</h1>;
    if (loading || !data) return <h1>Loading...</h1>;

    return <HighchartsComponent series={data.someQuery.someField}/>
  }}
</Query>

两个，使用ApolloConsumer 组件或withApollo HOC 直接访问您的 Apollo 客户端实例。在componentDidMount 内部，您可以直接调用query 方法并使用结果。比如：

const { data } = await this.props.client.query({ query: ExchangeRates })
if (data && data.someQuery) {
  Highcharts.chart("production", {
    series: data.someQuery.someField,
    // other config
  })
}

三，使用 official library 来自 Highcharts 团队的 React。

import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

<Query query={ExchangeRates} client={client}>
  {({ loading, error, data }) => {
    if (error) return <h1>Error...</h1>;
    if (loading || !data) return <h1>Loading...</h1>;

    return (
      <HighchartsReact
        // your props here
      />
    )
  }}
</Query>