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

Posted 2023-03-10

【中文标题】Apollo 无法在更新中访问 queryVariables：突变后

【英文标题】：Apollo can't access queryVariables in update: after a mutation

【发布时间】：2018-01-24 23:19:50

【问题描述】：

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

我在文档中发现 updateQueries 可以选择包含 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 传递变量。

感谢您查看此问题！

版本

apollo-client@1.4.0 react-apollo@1.4.2

【参考方案1】：

对于 apollo 2，但在 1.x 中应该是一样的

In the docs，你看你也可以将变量传递给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,
  )

这样通过<BookEvent updateStoreAfterBooking=updateCacheAfterBooking ... />。

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