创建新数据后如何更新 Strapi GraphQL 缓存？

Question

创建新数据后如何更新缓存？

来自 Apollo 的错误消息

存储错误： 应用程序试图写入未提供 ID 的对象，但存储已包含此对象的 UsersPermissionsUser:1 ID。试图写入的 selectionSet 是：

{
  "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前端详解

1- 正在运行的 Watch Book 移动应用程序 在 YouTube 上：https://youtu.be/sBM-ErjXWuw

2- 在 YouTube 上观看问题视频了解详情：https://youtu.be/wqvrcBRQpZg

{N}-vueAddBook.vue文件

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);
        });

缓存中的这些 "Book:9": { 行是什么？

console.log 商店结果：

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

你可以看到全部front-end GitHub repo here

• Download Android apk file

我们的目标是更新缓存。 添加书籍方法在这里： https://github.com/kaanguru/mutate-question/blob/c199f8dcc8e80e83abdbcde4811770b766befcb5/nativescript-vue/app/components/AddBook.vue#L39

---

后端详细信息

但是，这是一个前端问题 运行 Strapi GraphQL 服务器在这里：https://polar-badlands-01357.herokuapp.com/admin/

GraphQL Playground

用户：管理员

密码： passw123

可以看到GraphQL documentation

我有这么多简单的 Strapi GrapQL 方案：

如果你想用postman或者insomnia来测试你可以用;

• POST GraphQL 查询 URL：https://polar-badlands-01357.herokuapp.com/graphql
• 不记名令牌：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTkwODI3MzE0LCJleHAiOjE1OTM0MTkzMTR9.WIK-f4dkwVAyIlP20v1PFoflpwGmRYgRrsQiRFgGdqg

---

注意：不要与$navigateTo()混淆，它只是nativescript-vue的自定义方法。

Answer 1

事实证明；

所有代码都正确接受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 提供了帮助

重点是；我不应该相信 TypeScript 错误，或者至少我应该阅读更多关于它真正说的内容。

Typescript 只是让我说得更具体些：Property 'push' does not exist on type 'unknown'

TypeScript 试图告诉我在调用 ROOT_MUTATION 数据时需要更具体。它说：Cannot find name 'createBook' 但我又忽略了它。

---

解决方案Github分支

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

来源

how to update cache