Function executes before component is updated

Question

I am very new to react and I find it a bit confusing to put together my first application given the prevalence of different code styles in react.

The purpose of the application is to execute a GraphQL query with a dynamic query based on form input. On first render it should use data provided in the state. When the user changes the standard value, a new GrapQl should be executed. However, upon trying to change the input value, a new request is released as soon as I press a button and before(!) updating the value.

I have tried different approaches, but none did yield any change.

Here is my code and application

Since my GraphQL server is running locally, you should expect this return:

{
"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/components/charts/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;

My expected behavior is that a new GraphQL request is made after pressing the submit button.

The actual behavior is that right now, as soon as I attemp to change the input fields, a new request is made with the existing input. It is not possible to change the input values.

score 1 · Accepted Answer · answered Aug 23 '19 at 10:13

1

You query is being sent whenever you render the Timeseries component, and the Timeseries component is being rendered right away (the initial value of you App component is truthy).
Another thing is that you don't seem to give your inputs actual names, so how should they know which value to update?

answered Aug 23 '19 at 10:13

Dor Shinar

1,474
2
11
17

I understand. It appears my form is setup incorrectly. I wrongly assumed it had different reasons. I will try to fix that. Thank you @Dor Shinar. – lammy Aug 23 '19 at 10:39
Dor you are of course right, I assumed that react retrieves the key-value relationship automatically, but of course I need to specify the name attribute. The code works now. Thank god it's already Friday. Now I only need to figure out how I can make sure the request only runs after pressing submit. – lammy Aug 23 '19 at 10:50

Function executes before component is updated

1 Answers1