Apollo 无法在更新中访问 queryVariables:突变后

2024-05-01

我正在尝试使用 update: 在执行突变后更新查询。问题是商店中的查询应用了多个不同的变量,我想更新查询并使用相同的变量返回它。

我在文档中发现 updateQueries 有一个包含 queryVariables 的选项,它们是执行查询时使用的最后一组变量。

我还没有找到任何描述如何从更新内部检索 queryVariables 或类似内容的内容。

更新内部:我可以使用

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 传递变量。

感谢您关注这个问题!

Version

[电子邮件受保护] /cdn-cgi/l/email-protection [电子邮件受保护] /cdn-cgi/l/email-protection


适用于 apollo 2,但在 1.x 中应该相同

在文档中 https://www.apollographql.com/docs/react/basics/caching.html#readquery,您会发现还可以将变量传递给 readQuery。

下面是一个示例,用户可以单击 BookEvent 组件来预订活动,如果突变成功,则会自动反映在上层组件 EventDetail 中。

在触发突变(BookEvent)的组件中,我通过store and 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,
  })
}

它是这样通过的<BookEvent updateStoreAfterBooking={updateCacheAfterBooking} ... />.

不要忘记将所需的变量传递给 writeQuery。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Apollo 无法在更新中访问 queryVariables:突变后 的相关文章

随机推荐