How to update the Strapi GraphQL cache, after creating new data?

Question

How to update the cache, after creating new data?

Error message from Apollo

Store error: 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:

{
  "kind": "Field",
  "name": { "kind": "Name", "value": "user" },
  "arguments": [],
  "directives": [],
  "selectionSet": {
    "kind": "SelectionSet",
    "selections": [
      { "kind": "Field", "name": { "kind": "Name", "value": "username" }, "arguments": [], "directives": [] },

      { "kind": "Field", "name": { "kind": "Name", "value": "__typename" } }
    ]
  }
}

Nativescript-vue Front-end Details

1- Watch Book Mobile app in action on YouTube: https://youtu.be/sBM-ErjXWuw

2- Watch Question video for details on YouTube: https://youtu.be/wqvrcBRQpZg

{N}-vue AddBook.vue file

apolloClient
        .mutate({
          // Query
          mutation: mutations.CREATE_BOOK,
          // Parameters
          variables: {
            name: this.book.name,
            year: this.book.year,
          },
           // HOW TO UPDATE
          update: (store, { data }) => {
            console.log("data   ::::>> ", 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 :>> ', 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) => {
          // I can even see ID in Result
          console.log("new data.data id  ::::: :>> ", data.data.createBook.book.id);
          this.$navigateTo(App);
        })
        .catch((error) => {
          // Error
          console.error(error);
        });

What are these "Book:9": { lines in the cache?

console.log store turns out:

"Book:9": {
        "id": "9",
        "name": "Hadi",
        "year": "255",
        "__typename": "Book"
      },
      "$ROOT_MUTATION.createBook({\"input\":{\"data\":{\"name\":\"Hadi\",\"year\":\"255\"}}})": {

You can see all front-end GitHub repo here

• Download Android apk file

Our goal is to update the cache. Add Book Method is in here: https://github.com/kaanguru/mutate-question/blob/c199f8dcc8e80e83abdbcde4811770b766befcb5/nativescript-vue/app/components/AddBook.vue#L39

---

Back-end details

However, this is a frontend question a running Strapi GraphQL Server is here: https://polar-badlands-01357.herokuapp.com/admin/

GraphQL Playground

USER: admin

PASSWORD: passw123

You can see GraphQL documentation

I have so much simple Strapi GrapQL Scheme:

If you want to test it using postman or insomnia you can use;

• POST GraphQL Query URL: https://polar-badlands-01357.herokuapp.com/graphql
• Bearer Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTkwODI3MzE0LCJleHAiOjE1OTM0MTkzMTR9.WIK-f4dkwVAyIlP20v1PFoflpwGmRYgRrsQiRFgGdqg

---

NOTE: Don't get confused with $navigateTo() it's just a custom method of nativescript-vue.

Spanos

Answer 1

It turns out;

all code was correct accept bookData.push(createBook);

          // HOW TO UPDATE
          update: (store, { data }) => {
            console.log("data   ::::>> ", 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 :>> ', 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 })
          },
        })

Typescipt was helping

The point is; I shouldn't trust TypeScript errors, or at least I should read more about what it really says.

Typescript just asked me to be more specific while saying: Property 'push' does not exist on type 'unknown'

TypeScript was trying to tell me I need to be more specific while calling ROOT_MUTATION data. It said: Cannot find name 'createBook' But again I ignored it.

---

Solution Github Branch

https://github.com/kaanguru/mutate-question/tree/solution

Sources

how to update cache

Create interface for object Typescript

Spanos