BUG/FEATURE? Cache always returns "error" and "data" even when variables change

[juanmagalhaes]

The application that I am currently working on has a page that lists some data from the server in a table.
In order to achieve this, first the user fills some form fields that will be the variables to filter the query and then press the search button.

The query looks something like this:

  query carPlateQuery(
    $account: Int!
    $plate: String!
    $location: String!
    $initDate: String!
    $endDate: String!
  ) {
    comercialStablishment(account: $account) {
      id
      plate(plate: $plate, location: $location, initDate: $initDate, endDate: $endDate) {
        status
        processedDate
        plate
      }
    }
  }

The component tha calls the Query looks like this:

export default ({ formValues: { plate, account, location, initDate, endDate } }) => {
  return (
    <Query
      query={query}
      variables={{
        account,
        plate,
        location,
        initDate,
        endDate,
      }}
    >
      {({ loading, error, data }) => {
        if (loading) return <Spinner />
        if (error) {
          return <ErrorMessage>{error.message}</ErrorMessage>
        }
        return <Car data={data.comercialStablishment.plate} />
      }}
    </Query>
  )
}

I don't know if what is happening is a bug or an intentional feature.

How to reproduce the issue:

• The first time the query is called all variables are valid, the query returns no errors, only data.
  Data is cached by apollo and Query component calls child render prop with the desired result on data prop.
• The second time I call the query with an invalid value on variable plate on purpose so that the server will return handled errors for that field. The query returns error prop, apollo caches it and the Query component will call children render prop with error prop from server and the last data cached (Is that suposed to happen?)...
• The third time I call the query with the same variables called in the first time, valid values. But now I am stuck on that if (error) because the Query component renders with error and data both from the cache.

Intended outcome:

I believe that every time the query result is returned from cache it should only return data or error the same way it did when it was first called for that variables.

Actual outcome:

After both results error and data are cached, each subsequent call to these queries with the same variables will return error and data

Version:

• [email protected]
• [email protected]

[tobobo]

@juanmagalhaes I believe I've encountered the same issue. I made a minimal repo to demonstrate it. I think it has to do with the fact that the Query component is re-used (rather than initializing a new instance).

Here's my demo repo: https://github.com/tobobo/apollo-sandbox/tree/9fa96f2fcc2447badbbbc417ab5f7a56ef540772

You can try it by running

npm install
node index.js

If you visit http://localhost:4200, you'll see a Query component that loads some data with id: 1. If you click "show data 2," you'll see an error. When clicking "show data 1," you'll continue to see the error.

Interestingly, if you visit http://localhost:4200#2 to show the error first, you can successfully click "show data 1" and load the data with id: 1 (however, the loading state is never entered :/ ), but after clicking "show data 2" again, the error persists and does not go away.

[BrettStatman]

Utilizing a key on the Query component solves as a workaround. i.e.

let key = 0;
...
<Query key={key++}>

[juanmagalhaes]

I might be wrong but aren't you always forcing the component to rerender with this approach @BrettStatman ? It might be bad for performance.

I ran your sample here @tobobo and that is indeed the same problem I had back then. Sorry about the delay I'm caught up in several projects lately...

[hwillson]

This was an error and was fixed in #2718 (and released in react-apollo 2.5.3). Thanks!