vue.js - 创建新数据后如何更新 Strapi GraphQL 缓存？

Question

创建新数据后如何更新缓存？
来自阿波罗的错误信息
存储错误:应用程序试图编写一个没有提供 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- 观看 Book Mobile 应用程序运行 在 YouTube 上: https://youtu.be/sBM-ErjXWuw
2- 观看问题视频了解详情 在 YouTube 上: https://youtu.be/wqvrcBRQpZg
{N} -vue AddBook.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
用户:行政
密码:密码123
你可以看到 GraphQL documentation
我有很多简单的 Strapi GrapQL 方案:

如果您想使用 postman 或失眠来测试它，您可以使用；

POST GraphQL 查询 URL:https://polar-badlands-01357.herokuapp.com/graphql

不记名代币:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTkwODI3MzE0LCJleHAiOjE1OTM0MTkzMTR9.WIK-f4dkwVAyIlP20qwlg1gRg8rg1grg8rgrgfgrg8rfgrfgrgfgrgfgrgfgrgfgrgfgr

注意:不要与 $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
Create interface for object Typescript