operationName not updating when query is changed

I'm running into a problem where the `operationName` field isn't being updated when the query body is modified via the `query` prop when using the React `` component.

```

```

`query` can be set to any handful of _named_ predefined queries. It is initially set to a default value. `query` is a state variable that is updated when an option is selected from a dropdown.

Sometimes when I change `query` from the default option to an alternative the `operationName` is not updated. I.e. if we start with a default value of

```graphql
query Foo {
foo(name: "test") {
bar
}
}
```

and then change `query` to

```graphql
query Bar {
bar(name: "test") {
baz
}
}
```

The editor re-renders with the second `Bar` query correctly but if I press the play button I get back "Unknown operation named `Foo`".

I looked at the network request tab and it looks like the `query` payload field is the correct `Bar` query but the `operationName` field is lagging behind and still pointing to the initial `Foo` query.

I only run into this issue intermittently if I change the `query` prop value and then quickly press the play button. If I change the query and wait for a few seconds before clicking play it sends the correct updated `operationName`. This makes me think there might be a race condition issue present.

I believe this has something to do with the way that:
- Named queries are parsed and stored
- The `operationName` is updated when the `query` text changes (either via a prop or text editing)
- The `operationName` is sent to the API (if there is only one named query it seems to automatically choose that name)