title: How to update the Strapi GraphQL cache, after creating new data?
body: <h1>How to update the cache, after creating new data?</h1>
  <h2>Error message from Apollo</h2>
  <p><strong>Store error:</strong> the application attempted to write an object with no provided id but the store already contains an id of UsersPermissionsUser:1 for this object. The selectionSet that was trying to be written is:</p>
  <pre class="lang-js prettyprint-override"><code>
  {
    &quot;kind&quot;: &quot;Field&quot;,
    &quot;name&quot;: { &quot;kind&quot;: &quot;Name&quot;, &quot;value&quot;: &quot;user&quot; },
    &quot;arguments&quot;: [],
    &quot;directives&quot;: [],
    &quot;selectionSet&quot;: {
      &quot;kind&quot;: &quot;SelectionSet&quot;,
      &quot;selections&quot;: [
        { &quot;kind&quot;: &quot;Field&quot;, &quot;name&quot;: { &quot;kind&quot;: &quot;Name&quot;, &quot;value&quot;: &quot;username&quot; }, &quot;arguments&quot;: [], &quot;directives&quot;: [] },
  
        { &quot;kind&quot;: &quot;Field&quot;, &quot;name&quot;: { &quot;kind&quot;: &quot;Name&quot;, &quot;value&quot;: &quot;__typename&quot; } }
      ]
    }
  }
  
  </code></pre>
  <h2>Nativescript-vue Front-end Details</h2>
  <p><a href="https://i.stack.imgur.com/R8I55.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R8I55.png" alt="enter image description here" /></a></p>
  <p>1- <strong>Watch Book Mobile app in action</strong> on YouTube: <a href="https://youtu.be/sBM-ErjXWuw" rel="nofollow noreferrer">https://youtu.be/sBM-ErjXWuw</a></p>
  <p>2- <strong>Watch Question video for details</strong> on YouTube: <a href="https://youtu.be/wqvrcBRQpZg" rel="nofollow noreferrer">https://youtu.be/wqvrcBRQpZg</a></p>
  <p><strong>{N}</strong>-vue  <strong>AddBook.vue file</strong></p>
  <pre class="lang-js prettyprint-override"><code>apolloClient
          .mutate({
            // Query
            mutation: mutations.CREATE_BOOK,
            // Parameters
            variables: {
              name: this.book.name,
              year: this.book.year,
            },
             // HOW TO UPDATE
            update: (store, { data }) =&gt; {
              console.log(&quot;data   ::::&gt;&gt; &quot;, data.createBook.book);
              const bookQuery = {
                query: queries.ALL_BOOKS,
              };
  // TypeScript detail: instead of creating an interface
  // I used any type access books property without compile errors.
              const bookData:any = store.readQuery(bookQuery);
              console.log('bookData :&gt;&gt; ', bookData);
  // I pin-pointed data objects
  // Instead of push(createBook) I've pushed data.createBook.book
              bookData.books.push(data.createBook.book);
              store.writeQuery({ ...bookQuery, data: bookData })
            },
          })
          .then((data) =&gt; {
            // I can even see ID in Result
            console.log(&quot;new data.data id  ::::: :&gt;&gt; &quot;, data.data.createBook.book.id);
            this.$navigateTo(App);
          })
          .catch((error) =&gt; {
            // Error
            console.error(error);
          });
  </code></pre>
  <h3>What are these <code>&quot;Book:9&quot;: {</code> lines in the cache?</h3>
  <p>console.log store  turns out:</p>
  <pre><code>&quot;Book:9&quot;: {
          &quot;id&quot;: &quot;9&quot;,
          &quot;name&quot;: &quot;Hadi&quot;,
          &quot;year&quot;: &quot;255&quot;,
          &quot;__typename&quot;: &quot;Book&quot;
        },
        &quot;$ROOT_MUTATION.createBook({\&quot;input\&quot;:{\&quot;data\&quot;:{\&quot;name\&quot;:\&quot;Hadi\&quot;,\&quot;year\&quot;:\&quot;255\&quot;}}})&quot;: {
  </code></pre>
  <p>You can see all <a href="https://github.com/kaanguru/mutate-question/tree/solution" rel="nofollow noreferrer">front-end GitHub repo here</a></p>
  <ul>
  <li><a href="https://sendgb.com/RTEzdXk9ync" rel="nofollow noreferrer">Download Android apk file</a></li>
  </ul>
  <p>Our goal is to update the cache. <em>Add Book Method</em> is in here:
  <a href="https://github.com/kaanguru/mutate-question/blob/c199f8dcc8e80e83abdbcde4811770b766befcb5/nativescript-vue/app/components/AddBook.vue#L39" rel="nofollow noreferrer">https://github.com/kaanguru/mutate-question/blob/c199f8dcc8e80e83abdbcde4811770b766befcb5/nativescript-vue/app/components/AddBook.vue#L39</a></p>
  <hr />
  <h3>Back-end details</h3>
  <p>However, this is a frontend question a running Strapi GraphQL Server is here: <a href="https://polar-badlands-01357.herokuapp.com/admin/" rel="nofollow noreferrer">https://polar-badlands-01357.herokuapp.com/admin/</a></p>
  <p><a href="https://polar-badlands-01357.herokuapp.com/graphql" rel="nofollow noreferrer">GraphQL Playground</a></p>
  <p><strong>USER:</strong> admin</p>
  <p><strong>PASSWORD:</strong> passw123</p>
  <p>You can see <a href="https://polar-badlands-01357.herokuapp.com/documentation/v1.0.0" rel="nofollow noreferrer">GraphQL documentation</a></p>
  I have so much simple Strapi GrapQL Scheme:
  <p><a href="https://i.stack.imgur.com/WiWnO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WiWnO.png" alt="simple Strapi GrapQL Scheme" /></a></p>
  <p>If you want to test it using postman or insomnia you can use;</p>
  <ul>
  <li>POST GraphQL Query URL: <a href="https://polar-badlands-01357.herokuapp.com/graphql" rel="nofollow noreferrer">https://polar-badlands-01357.herokuapp.com/graphql</a></li>
  <li>Bearer Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTkwODI3MzE0LCJleHAiOjE1OTM0MTkzMTR9.WIK-f4dkwVAyIlP20v1PFoflpwGmRYgRrsQiRFgGdqg</li>
  </ul>
  <hr />
  <p><strong>NOTE:</strong> Don't get confused with <code>$navigateTo()</code> it's just a custom method of nativescript-vue.</p>