Функция выполняется до обновления компонента

Question

Вы можете найти CodeSandbox здесь

Я очень новичок в реагировании, и мне кажется немного странным собирать мое первое приложение, учитывая преобладание различных стилей кода в реагировании.

Цель приложения - выполнить запрос GraphQL с динамическим запросом на основе ввода формы. При первом рендеринге он должен использовать данные, предоставленные в состоянии. Когда пользователь изменяет стандартное значение, новый GrapQl должен быть выполнен. Тем не менее, при попытке изменить значение ввода, новый запрос сбрасывается, как только я нажимаю кнопку и до (!) Обновления значения.

Я пробовал разные подходы, но ни один не принес никаких изменений.

Вот мой код и приложение

Так как мой сервер GraphQL работает локально, вы должны ожидать этого возврата:

{
"data": {
    "sensorDataTimeSeriesCurve": [
    {
        "timestamp": "2019-06-12T04:00:00",
        "value": 31.01
    },
    {
        "timestamp": "2019-06-12T05:00:00",
        "value": 33.08
    },
    {
        "timestamp": "2019-06-12T06:00:00",
        "value": 34.28
    }
    ]
}
}

SRC /index.js

import React, { Component } from "react";
import { render } from "react-dom";

import ApolloClient from "apollo-boost";
import { ApolloProvider, useQuery } from "@apollo/react-hooks";
import gql from "graphql-tag";
import Chart from "./components/charts/chart";

const client = new ApolloClient({
  uri: `https://GRAPHQLENDPOINT`
});

const timeseriesQuery = gql`
  query test0($id1: ID!, $from: DateTime!, $to: DateTime!) {
    sensorDataTimeSeriesCurve(id: $id1, from: $from, to: $to) {
      timestamp
      value
    }
  }
`;

function Timeseries({ id1, from, to }) {
  const { loading, error, data, refetch, networkStatus } = useQuery(
    timeseriesQuery,
    {
      variables: { id1, from, to },
      notifyOnNetworkStatusChange: true
      // pollInterval: 500
    }
  );

  if (networkStatus === 4) return "Refetching!";
  if (loading) return null;
  if (error) return `Error!: ${error}`;
  console.log("Data:", data);

  return (
    <div>
      <Chart data={data.sensorDataTimeSeriesCurve} />
      <button onClick={() => refetch()}>Refetch!</button>
    </div>
  );
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id1: 20742,
      from: "2019-06-12 03:56:13.567",
      to: "2019-06-22 04:56:13.567"
    };
  }
  handleChange = event => {
    let name = event.target.name;
    let value = event.target.value;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <ApolloProvider client={client}>
        <div>
          <form onSubmit={this.handleSubmit}>
            <label>
              Name:
              <input
                type="text"
                value={this.state.id1}
                onChange={this.handleChange}
              />
            </label>
            <label>
              From:
              <input
                type="text"
                value={this.state.from}
                onChange={this.handleChange}
              />
            </label>
            <label>
              To:
              <input
                type="text"
                value={this.state.to}
                onChange={this.handleChange}
              />
            </label>
            <input type="submit" value="Submit" />
          </form>
          {this.state.id1 && (
            <Timeseries
              id1={this.state.id1}
              from={this.state.from}
              to={this.state.to}
            />
          )}
        </div>
      </ApolloProvider>
    );
  }
}

render(<App />, document.getElementById("root"));

SRC / компоненты / графики /charts.js

import { LineChart, Line } from "recharts";
import React from "react";

class Chart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  render() {
    return (
      <LineChart width={400} height={400} data={this.state.data}>
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    );
  }
}

export default Chart;

Мое ожидаемое поведение заключается в том, что новый запрос GraphQL выполняется после нажатия кнопки отправки.

Реальное поведение таково, что как только я пытаюсь изменить поля ввода, делается новый запрос с существующим вводом. Невозможно изменить входные значения.

Answer 1

Ваш запрос отправляется всякий раз, когда вы отображаете Timeseries компонент, а Timeseries компонент визуализируется сразу (начальная стоимость вас App компонент правдивый).
Другое дело, что вы, кажется, не называете свои входные данные действительными именами, так как они должны знать, какое значение обновлять?