refetchQueries no longer working after upgrading to 3.1.3 from 2.5.8 (with example repo)

[publicJorn]

Intended outcome:

When using refetchQueries in the options of a mutation, I expect the listed queries to refetch and my UI being updated.

this.props.mutate({
      variables: {
        ...this.state
      },
      refetchQueries: ['BookList'],
      awaitRefetchQueries: true
    })

Actual outcome:

No queries are refetched.

When debugging, I can see that the QueryManager doesn't have the query that I expect it to have. It does have an entry, but the observableQuery property is null.

How to reproduce the issue:

I have made this demo repo: https://github.com/publicJorn/apollo-refetchqueries-bug

Please follow the instructions to run it on your local machine.

(Sorry I made this repo before I created this issue, so it's not using the react-apollo-error-template)

Version

Note that this error DID NOT occur with [email protected].
You can downgrade in the demo repo to see it working as intended: yarn upgrade [email protected]

npx envinfo@latest --preset apollo --clipboard

  System:
    OS: macOS Mojave 10.14.6
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.12.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 13.0.2

[HathTech]

I am facing the same issue with 3.1.3

[santiagofm]

Any ideas on how to workaround this?

[varmakarthik12]

This seems to happen only for those components using graphQL as HOC. RenderProps and hooks seems to have no impact. Here is an workaround to use as a render prop... <Mutation mutation={mutation}> {(addBook, { data }) => ( <form onSubmit={(ev)=>this.submit(ev, addBook)}> <label> Title: <input name="title" value={title} onChange={this.change('title')} /> </label> <br /> <label> Author: <input name="author" value={author} onChange={this.change('author')} /> </label> <br /> <button type="submit">Add</button> </form>)} </Mutation>

[publicJorn]

@varmakarthik12 I already tested this, but tried again with your example. Unfortunately it doesn't work. Not with 3.1.3 anyway.

If you check out the demo repo and replace the AddBook file with the following:

import React from 'react'
import { graphql, Mutation } from 'react-apollo'
import gql from 'graphql-tag'

import { Link } from 'react-router-dom'

const mutation = gql`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      guid
    }
  }
`

class AddBook extends React.Component {
  state = {
    title: '',
    author: '',
  }

  submit = addBookMutation => evt => {
    evt.preventDefault()

    addBookMutation({
      variables: {
        ...this.state,
      },
      refetchQueries: () => ['BookList'],
      awaitRefetchQueries: true,
    }).then(() => {
      this.props.history.push('/')
    })
  }

  change = name => evt => {
    this.setState({
      [name]: evt.target.value,
    })
  }

  render() {
    const { title, author } = this.state

    return (
      <Mutation mutation={mutation}>
        {(addBookMutation, { data }) => (
          <>
            <h2>Add a book</h2>

            <form onSubmit={this.submit(addBookMutation)}>
              <label>
                Title: <input name="title" value={title} onChange={this.change('title')} />
              </label>
              <br />
              <label>
                Author: <input name="author" value={author} onChange={this.change('author')} />
              </label>
              <br />
              <button type="submit">Add</button>
            </form>

            <p>
              <Link to="/">Back to book list</Link>
            </p>
          </>
        )}
      </Mutation>
    )
  }
}

export default graphql(mutation)(AddBook)

[ferasAbdulazem]

any Update / Workaround for this issue?

[mhuconcern]

This occurs even in 4.0.0beta. This is a bit annoying if we want to migrate to apollo client 3.1 you need to migrate all the way to react-hooks and some bugs still exist. There is no support and many similar bugs pop up over different versions.

[mhuconcern]

I fixed this by removing all refetchQueries and relying on the local state update to refresh the related queries. Thankfully most of the refetchQueries relied on that in our codebase

[gabrielsch]

Same issue here, we can't update our react-apollo package because of this.