问题描述
我正在尝试使用 update: 在执行突变后更新查询.问题是商店中的查询应用了几个不同的变量,我想更新查询并使用相同的变量返回它.
I am trying to use update: to update a query after performing a mutation. The problem is that the query in the store has several different variables applied and I would like to update the query and return it with the same variables.
我在文档中发现 updateQueries 可以选择包含 queryVariables,这是执行查询时使用的最后一组变量.
I found in the docs that updateQueries has an option to include queryVariables which are the last set of variables that the query was executed with.
我没有找到任何描述如何从更新内部检索 queryVariables 或类似内容的内容.
I have not found anything that describes how to retrieve the queryVariables or something like it from inside of update.
更新内部:我可以使用
lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]
将返回类似 "userRecipes({"first":20,"minTime":0,"maxTime":500,"filterType":"Explore","searchTerm":""}) 的结果"
我现在这样做的hacky方法是解析该字符串以提取变量,以便我最终可以像这样使用readQuery:
The hacky way that I am doing this now is to parse that string to pull out the variables so I can finally use readQuery like so:
const lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]
const searchPosition = lastQuery.search("searchTerm")
const searchTerm = lastQuery.slice((searchPosition + 13),-3)
// also parsing the lastQuery string for filterType, minTime, maxTime
const data = store.readQuery({
query: QUERY_USER_RECIPES,
variables: {
filterType: filterType,
searchTerm: searchTerm,
minTime: minTime,
maxTime: maxTime,
}
});
这不是最好的方法.有没有更简单的方法来访问更新内部的变量?
This can't be the best way to do this. Is there a simpler way to access variables inside of update?
似乎应该有一种方法可以读取存储中的现有查询和变量,而无需使用 readQuery 传递变量.
It seems like there should be a way to read the existing query and variables that are in the store without passing variables with readQuery.
感谢您查看此问题!
版本
[email protected]@1.4.2
[email protected]@1.4.2
推荐答案
对于 apollo 2,但在 1.x 中应该是一样的
在文档中,您可以看到还将变量传递给 readQuery.
In the docs, you see that you can also pass variables to readQuery.
这里是一个例子,用户可以通过点击BookEvent组件来预定一个事件,如果突变成功,它会自动反映在上层组件EventDetail中.
Here is an example where a user can book an event clicking a BookEvent component, if the mutation succeeds, it is reflected automatically in the upper component EventDetail.
在触发突变的组件(BookEvent)中,我将 store
和 eventId
传递给在上层组件(EventDetail)中声明的函数,并通过子组件:
In the component that tiggers the mutation (BookEvent), I pass store
and eventId
to a function declared in the upper component (EventDetail) and passed through props of the child component:
const onClick = () => createEventTicketMutation({
variables: { eventId: event.id },
update: (store, { data: { createEventTicket } }) => {
updateStoreAfterBooking(store, event.id)
},
})
这里是在上层组件中执行缓存更新的函数:
Here is the function that performs the cache update in the upper component:
const updateCacheAfterBooking = (store, eventId) => {
const data = store.readQuery({
query: EVENT_DETAIL_QUERY,
variables: { id: eventId },
})
data.eventDetail.bookings += 1
store.writeQuery({
query: EVENT_DETAIL_QUERY,
variables: { id: eventId },
data,
})
}
它是这样传递的<BookEvent updateStoreAfterBooking={updateCacheAfterBooking} .../>
.
不要忘记将所需的变量也传递给 writeQuery.
Don't forget to pass also the needed variables to writeQuery.
这篇关于Apollo 无法在更新中访问 queryVariables:突变后的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!