创建新数据后，如何更新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前端详细信息

在YouTube上的

1- 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\"}}})": {

您可以看到所有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 Server的前端问题：https://polar-badlands-01357.herokuapp.com/admin/

GraphQL Playground

用户：管理员

密码： passw123

您可以看到GraphQL documentation

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

如果要使用邮递员或失眠症进行测试，可以使用；

• POST GraphQL查询URL：https://polar-badlands-01357.herokuapp.com/graphql
• 持票人令牌：eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTkwODI3MzE0LCJleHAiOjE1OTM0MTkzMTR9.WIK-f4dkwwYylPr>

---

注意：不要与$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错误，或者至少我应该阅读更多有关其真正含义的信息。

打字稿只是问我更具体的说法：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