Query component does not clear error after success

[vieira]

Intended outcome:

After invoking a GraphQL endpoint with some invalid variable an error is thrown and shown to the user. After the user inputs a new valid value as variable a new Query should be performed and the component should render properly.

Actual outcome:

After the first query errors, even when the user inputs a new valid value, the same error referencing the old value keeps being shown.

How to reproduce the issue:

I created a repository vieira/github-graphql-apollo where the issue can be seen.

In src/index.jsx replace <GITHUB_TOKEN_HERE> with a valid token (when generating the token you do not need to select any scopes).

To reproduce type an invalid Github username, e.g. slkçalfksçlfks and then type a valid username, like vieira. Your second try should return a list of repositories but instead will show the same error as the first one, including the invalid username you first typed.

Other notes:

Passing a key prop to the Query component with the typed username works around the issue and makes things work, however it is not practical when there are multiple variables.

See: 6b51be

Version

• [email protected]
• [email protected]

[zchwyng]

I'm having the same problem. Workaround proposed by @vieira worked though. (Used key={JSON.stringify(variables)} for the multiple variables case.)

Version

• [email protected]
• [email protected]

[rosskevin]

It would be great if you could submit a PR with a breaking test.

[JoviDeCroock]

I have been debugging this issue, with the newest versions of the libraries. It feels like something goes wrong in the render method of react-apollo since the error is being cleared the console warning states:

As you can see in this screenshot after refetch the error has been cleared.

So the thing seems to be it refetches, doesn't set loading to true and neither clears the error param.

[hwillson]

Fixed in #2718. Thanks!