Мутация React-Apollo не обновляется

У меня есть компонент RecipeList и еще один AddRecipe. После добавления рецепта он должен быть перенаправлен в RecipeList, и все элементы будут отображаться. вот код компонента AddRecipe.

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 });
                  cache.writeQuery({
                    query:GET_ALL_RECIPIES,
                    data:{getAllRecipes:getAllRecipes.concat[addRecipe]}
                  })
              }} >
      {(addRecipe, {data,loading,error})=>

           (<form className = "form" onSubmit = {event=>this.onSubmit(event,addRecipe)}>
                  <input type = "text" name = "name" onChange = {this.handleChangeEvent.bind(this)} placeholder = "recipe name" value = {name}/>
                  <select name = "category" value = "breakfast" id = "" onChange = {this.handleChangeEvent.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.handleChangeEvent.bind(this)} placeholder = "recipe description" value = {description}/>
                  <textarea name = "instruction" id = "instruction" cols = "30" rows = "10" onChange = {this.handleChangeEvent.bind(this)} value = {instruction}> </textarea>
                  <button type = "submit" className = "button-primary" disabled = {loading || this.validateForm()}>submit</button>
                  {error && <Error error = {error}/>}
            </form>)

      }
      </Mutation>
    </div>)
  }

моя добавленная мутация рецепта:

import gql from 'graphql-tag';


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

    }
}
`

и, наконец, запрос списка рецептов:

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
        }
}`

после отправки формы и добавления рецепта я ожидаю, что Компонент первый перенаправляется в список рецептов и Компонент второй список рецептов включает вновь добавленный рецепт. но я вижу старый список, который не содержит новых добавленных рецептов, и для отображения новых компонентов я должен обновить страницу.