Как вернуть Highcharts в компоненте Apollo Query?

Question

Я пытаюсь вернуть данные graphql на старшей диаграмме.Как-то это не отображается.Смотрите демо-версию здесь .

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
  })
}

Три, используйте официальную библиотеку для реакции от команды Highcharts.

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>