0

Vue和中的菜鸟GraphQL，我有两个页面，分别称为Listpage 和Addpage ，我在其中显示列表或添加新项目。如果我在Angular项目中，我将service负责订阅listobservable，以便Add页面可以向其添加新项目，并且List页面可以访问页面导航之间的新更新列表。

现在我实际上正在研究nuxt使用apollo模块与graphql服务器一起工作的项目，我设法使每个页面都按预期工作 -list页面进行查询调用并显示列表，Add页面进行突变调用并获取新列表作为响应和回到列表页面，我喜欢在不进行另一个查询调用的情况下显示新项目 - 但想知道上面的相同方法是否可以在这里工作。我花了一些时间阅读Vuex，apollo-cache但apollo-subscription不知道如何解决这种情况。

4

1 回答 1

1

有三种 Apollo-ey 方法可以做到这一点。首先，您可以重新获取列表查询，现在应该包含您的新项目：

this.$apollo.mutate({
  mutation: MY_LIST_CREATE_MUTATION,
  variables: {
    name: this.name
  },
  refetchQueries: [
    {
      query: MY_LISTS_QUERY
    }
  ],
  awaitRefetchQueries: true
})

或者，您可以根据突变的结果直接更新缓存：

this.$apollo.mutate({
  mutation: MY_LIST_CREATE_MUTATION,
  variables: {
    name: this.name
  },
  update: (store, { data: { listCreate } }) => {
    const data = store.readQuery({ query: Lists });
    data.lists = [ ...lists, listCreate];
    store.writeQuery({ query: Lists, data });
  }
})

或者最后一种方法是您可以简单地告诉您的列表页面在您使用该选项浏览到该页面时始终重新获取，以便它始终拥有新数据：fetchPolicy

apollo: {
  lists: {
    query: MY_LISTS_QUERY,
    fetchPolicy: 'network-only'
  }
}

就个人而言，我总是选择最终的选择。当我的应用程序变得更加复杂时，如果有多个页面我正在加载列表怎么办。假设有一个主索引，但每个用户都有一个他们创建的列表的特定列表，或者其他什么。然后您需要返回并更新您LIST_CREATE_MUTATION的帐户以解决所有这些新查询。

注意：我上面链接的文档是 React 和 Angular Apollo 文档的混合。我发现 Vue Apollo 文档在解释选项方面并不总是像fetchPolicy其他refetchQueriesApollo 框架的文档一样好。一般来说，我发现这些选项在框架之间是可以互换的。

于 2020-05-09T05:09:27.827 回答