Reactjs 阿波罗能';t访问更新中的查询变量:在变异后
我正在尝试使用update:在执行变异后更新查询。问题是存储中的查询应用了几个不同的变量,我想更新查询并返回相同的变量 我在文档中发现UpdateSeries有一个选项,可以包括queryVariables,这是执行查询时使用的最后一组变量 我没有找到任何描述如何从更新内部检索queryVariables或类似内容的内容 内部更新:我可以使用Reactjs 阿波罗能';t访问更新中的查询变量:在变异后,reactjs,apollo,react-apollo,apollo-client,Reactjs,Apollo,React Apollo,Apollo Client,我正在尝试使用update:在执行变异后更新查询。问题是存储中的查询应用了几个不同的变量,我想更新查询并返回相同的变量 我在文档中发现UpdateSeries有一个选项,可以包括queryVariables,这是执行查询时使用的最后一组变量 我没有找到任何描述如何从更新内部检索queryVariables或类似内容的内容 内部更新:我可以使用 lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0] 它将返回一个结果,如“userR
lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]
它将返回一个结果,如“userRecipes({“first”:20,“minTime”:0,“maxTime”:500,“filterType”:“Explore”,“searchTerm”:“})”
我现在做这件事的方法是解析该字符串以提取变量,这样我最终可以像这样使用readQuery:
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,
}
});
这不是最好的办法。有没有更简单的方法来访问更新内部的变量
似乎应该有一种方法可以读取存储中的现有查询和变量,而不必使用readQuery传递变量
感谢您关注这个问题
版本
阿波罗-client@1.4.0
反应-apollo@1.4.2用于阿波罗2号,但在1.x中应相同
,您可以看到还可以将变量传递给readQuery
下面是一个示例,用户可以单击BookEvent组件预订事件,如果变异成功,它将自动反映在上面的组件EventDetail中
在触发突变的组件(BookEvent)中,我将store
和eventId
传递给在上部组件(EventDetail)中声明的函数,并传递子组件的props:
const onClick = () => createEventTicketMutation({
variables: { eventId: event.id },
update: (store, { data: { createEventTicket } }) => {
updateStoreAfterBooking(store, event.id)
},
})
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,
})
}
下面是在上部组件中执行缓存更新的函数:
const onClick = () => createEventTicketMutation({
variables: { eventId: event.id },
update: (store, { data: { createEventTicket } }) => {
updateStoreAfterBooking(store, event.id)
},
})
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,
})
}
它是这样传递的
不要忘记将所需的变量也传递给writeQuery