代码之家  ›  专栏  ›  技术社区  ›  nachocab

如何在Apollo中从分页列表中删除项目?

  •  1
  • nachocab  · 技术社区  · 7 年前

    我想知道如何删除分页列表中的项目,以便始终显示相同数量的项目。我目前的方法不起作用(每次删除后列表会变小):

    const GET_PAGINATED_POSTS = gql`
      query postsBySize($page: Int!, $pageSize: Int!) {
        postsPage(page: $page, size: $pageSize) {
          _id
          title
        }
      }
    `;
    
    deletePost() {
      this.$apollo.mutate({
        mutation: DELETE_POST,
        variables: {
          postId: this.post._id,
          commentIds: this.post.comments.map(x => x._id)
        },
        update: (cache, { data: { deletePost } }) => {
          const query = {
            query: GET_PAGINATED_POSTS,
            variables: {
              page: 0,
              pageSize: 10
            },
          };
    
          const data = cache.readQuery({ ...query });
          data.postsPage = data.postsPage.filter(post => post._id != this.post._id)
          cache.writeQuery({ ...query, data })
        }
      })
    }
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   Daniel Rearden    7 年前

    由于您的响应是分页的,客户机不知道下一篇文章应该是什么——它用初始查询获取了10篇文章,这就是您的存储中的内容。

    而不是通过利用 update ,您应该改为使用 refetchQueries :

    deletePost() {
      this.$apollo.mutate({
        mutation: DELETE_POST,
        variables: {
          postId: this.post._id,
          commentIds: this.post.comments.map(x => x._id)
        },
        refetchQueries: [
          {
            query: GET_PAGINATED_POSTS,
            variables: {
              page: 0,
              pageSize: 10,
            },
          },
        ],
      })
    }
    

    这将迫使阿波罗为您的 GET_PAGINATED_POSTS ,相应地更新商店和用户界面。