创建新数据后如何更新 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-在 YouTube 上运行的Watch Book Mobile 应用程序：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\"}}})": {

您可以在此处查看所有前端 GitHub 存储库

• 下载安卓apk文件

我们的目标是更新缓存。添加书籍方法在这里：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 游乐场

用户：管理员

密码： passw123

你可以看GraphQL 文档

我有很多简单的 Strapi GrapQL 方案：

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

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

---

注意：不要混淆$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

来源

如何更新缓存

为对象 Typescript 创建接口