【问题标题】：How to update the Strapi GraphQL cache, after creating new data?创建新数据后如何更新 Strapi GraphQL 缓存？
【发布时间】：2020-09-13 14:43:38
【问题描述】：

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

来自 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- 在 YouTube 上观看 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 服务器的前端问题：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-f4dkwVAyIlP20v1PFoflpwGmRYgRrsQiRFgGdqgli>

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

【问题讨论】：

标签： vue.js apollo apollo-client strapi vue-apollo

【解决方案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 })
          },
        })