update mutation doesn't work

[masoud-moghini]

Intended outcome:
updated list of recipes be rendered

Actual outcome:
the old list get rendered

How to reproduce the issue:
follow what comes here !!!!

Versions

hi I have the following client

import React ,{Component}from 'react'
import { Mutation } from "react-apollo";
import {ADD_RECIPE} from '../../mutations';
import Error from '../Error';
import {withRouter} from 'react-router-dom';
import {GET_ALL_RECIPIES} from '../../queries'

class AddRecipe extends Component {
  ...
  onSubmit(event,addRecipe){
    event.preventDefault();
    addRecipe().then(
      ({data})=>
        {
          this.props.history.push("/")
        }
      )
  }
  render (){
    const{name,category,description,instruction,username} = this.state;
    return(<div className="App">
      <h2>Add recipe</h2>
      <Mutation
             mutation={ADD_RECIPE} 
             variables={{name,category,description,instruction,username}} 
             update={(cache, {data:{addRecipe}}) => {
                  const {getAllRecipes} = cache.readQuery({ query: GET_ALL_RECIPIES });
                  console.log(cache)
                  //console.log('get all recipes',getAllRecipes)
                  //console.log('add recipe',addRecipe)
                  cache.writeQuery({
                    query:GET_ALL_RECIPIES,
                    data:{getAllRecipes:getAllRecipes.concat[addRecipe]}
                  })
                  console.log(cache)
              }} >
      {(addRecipe, {data,loading,error})=>
        
           (<form className="form" onSubmit={event=>this.onSubmit(event,addRecipe)}>
                  <input type="text" name="name" onChange={this.handleChange.bind(this)} placeholder="recipe name" value={name}/>
                  <select name="category" value="breakfast" id="" onChange={this.handleChange.bind(this)} value={category}>
                    <option value="breakfast">breakfast</option>
                    <option value="lunch">lunch</option>
                    <option value="dinner">dinner</option>
                    <option value="snack">snack</option>
                  </select>
                  <input type="text" name="description" onChange={this.handleChange.bind(this)} placeholder="recipe description" value={description}/>
                  <textarea name="instruction" id="instruction" cols="30" rows="10" onChange={this.handleChange.bind(this)} value={instruction}> </textarea>
                  <button type="submit" className="button-primary" disabled = {loading || this.validateForm()}>submit</button>
                  {error && <Error error={error}/>}
            </form>)
        
      }
      </Mutation>
    </div>)
  }
}
export default withRouter(AddRecipe)

and for get Recipe is:

import gql from 'graphql-tag';


//RECIPE QUERY
export const GET_ALL_RECIPIES =gql`
query {
    getAllRecipes{
        name
        _id
        category
        
    }
}
`

and get recipe item is :

import gql  from "graphql-tag";

export const GET_RECIPE_ITEM =gql`
query($id:ID!){
        getRecipeItem(_id:$id){
    				
          _id
          name
          category
          description
          instruction
          createdDate
          likes
          username
		}
}`

[OurMajesty]

I think this is the same as #3992
Try apollo-cache-inmemory 1.2.10

[benjamn]

Please try updating to the latest apollo-cache-inmemory and apollo-client:

npm install apollo-client@latest apollo-cache-inmemory@latest

[masoud-moghini]

npm install apollo-client@latest apollo-cache-inmemory@latest

tried it and no result achieved.

[vu-bui]

same problem with apollo-client 2.4.3.
reverting back to 2.4.2 works for me.

[bogdansoare]

having the same issue

[masoud-moghini]

have the same problem in optimistic ui about delete mutation.
real time page refreshing doesn't work for react-apollo and this is a great shortcoming.

[Akryum]

With the latest apollo-client packages, I still have this issue where the watchQuery observer isn't firing a next result call after using writeQuery in a mutation.

I'm using those packages:

apollo-cache-inmemory@1.3.7
apollo-client@2.4.4

I have found a workaround: I need to create a new data object and clone the array and then it works correctly (as demonstrated below).

Here is a reproduction: https://codesandbox.io/s/42lqq8m9q9

[Akryum]

Note that it also works for me if I just create a new array using the same data object:

const data = store.readQuery({ query: WIDGETS })
data.widgets = data.widgets.filter(w => w.id !== this.widget.id)
store.writeQuery({ query: WIDGETS, data })

Edit: my bad, it doesn't work. A new data object needs to be created.

[Akryum]

It seems sometimes adding an optimistic response fixes the issue: vuejs/apollo#436

[benjamn]

@Akryum Thanks for the reproduction! Interestingly, the problem disappears for me when I apply #4069, though I don't have a complete theory as to why that makes a difference.