中继或阿波罗反应如何解决涉及多重关系的突变？
中继或阿波罗反应如何解决涉及多重关系的突变？
提问于 2017-03-19 00:06:32
假设我在一页上有一个具有以下特性的react应用程序:新书，作者xyz编写的图书，创建新书
现在假设我创建了一本作者xyz的新书。页面在两个地方更新，另外还有一本新书，还有一本作者xyz的书。
阿波罗反应和接力在解决这个问题的方法上有何不同？他们如何解决这个问题？我看到的大多数例子只显示了基本的突变。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-03-22 05:27:59
下面是如何在阿波罗号上解决这个问题。
假设我们正在为UI的这一部分处理以下查询：
query AllBooks {
newBooks {
title
author { name }
}
author(id: "stubailo") {
id
books {
title
}
}
}当然，在现实中，您可能有一些分页、变量等。但是在这个示例中，我只使用一些简单的内容。
现在，让我们编写一个突变来创建那本新书，它看起来可能是：
mutation CreateBook($book: BookInput!) {
createBook(book: $book) {
title
author { name }
}
}现在，我们在阿波罗有两个主要的选择来处理这个问题。
第一个选项是简单地重新获取整个查询：
client.mutate(CreateBookMutation, {
variables: { book: newBook },
refetchQueries: [ { query: AllBooksQuery } ],
})这是简单而有效的，但如果由于某种原因，查询结果计算起来非常昂贵，则可能并不有效。
第二个选项是通过更新整个查询结果来合并结果。您可以使用updateQueries，但最近引入的最新方法是在突变时使用update回调和新命令式写API
client.mutate(CreateBookMutation, {
variables: { book: newBook },
update: (proxy, mutationResult) => {
// Get data we want to update, in the shape of the query
const data = proxy.readQuery({ query: AllBooksQuery });
// It's fine to mutate here since this is a copy of the data
data.newBooks.push(mutationResult.createBook);
data.author.books.push(mutationResult.createBook);
// Write the query back to the store with the new items
proxy.writeQuery({ query: AllBooksQuery, data });
},
})正如您所看到的，使用GraphQL并不比在其他数据加载解决方案中更容易保持UI更新。API并没有给你多少关于新数据应该去哪里的信息，所以你必须告诉阿波罗该如何处理它。
值得注意的是，这种情况只适用于添加和删除项--更新现有项自动工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42881377
复制相关文章
相似问题
腾讯云开发者
