Apollo不能在更新中访问queryVariables:突变之后[英] Apollo can't access queryVariables in update: after a mutation

本文是小编为大家收集整理的关于Apollo不能在更新中访问queryVariables:突变之后的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

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

我发现在demicenueries有一个选项中的文档中包含queryvariables,它是查询被执行的最后一组变量.

我尚未找到任何描述如何从更新内部检索QueryVariables或类似物的东西.

更新内部:我可以使用

lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]

将返回结果"userRecipes({"first":20,"minTime":0,"maxTime":500,"filterType":"Explore","searchTerm":""})"

我现在这样做的黑暗方式是解析那个字符串来拔出变量,所以我最终可以使用leadquery:

      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

推荐答案

for apolo 2,但在1.x

中应该相同

在docs 中,你看到你可以还将变量传递给Readquery.

以下是一个示例,其中用户可以预订单击耦合成分的事件,如果突变成功,则在上部组件EventDetail中自动反映.

在突变突变(桥识)的组件中,我将store和eventId传递给上组件(EventDetail)中声明的函数,并通过子组件的道具:

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} ... />.

不要忘记将所需的变量传递给WrithQuery.

本文地址:https://www.itbaoku.cn/post/1938097.html

问题描述

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.

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.

I have not found anything that describes how to retrieve the queryVariables or something like it from inside of update.

Inside of update: I can use

lastQuery = Object.keys(store.data.ROOT_QUERY).slice(-1)[0]

which will return a result like "userRecipes({"first":20,"minTime":0,"maxTime":500,"filterType":"Explore","searchTerm":""})"

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?

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.

Thanks for taking a look at this issue!

Version

apollo-client@1.4.0 react-apollo@1.4.2

推荐答案

For apollo 2, but should be the same in 1.x

In the docs, you see that you can also pass variables to readQuery.

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.

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,
  })
}

It is passed like so <BookEvent updateStoreAfterBooking={updateCacheAfterBooking} ... />.

Don't forget to pass also the needed variables to writeQuery.