如何在其包装组件之外重新获取查询？

Posted 2023-03-08

【中文标题】如何在其包装组件之外重新获取查询？

【英文标题】：How do I refetch a query outside of its wrapped component?

【发布时间】：2017-03-20 06:46:04

【问题描述】：

我有两个屏幕：

屏幕 1：结果

屏幕 2：编辑过滤器

当我在 Screen2 上编辑过滤器并按回时，我想重新获取 Screen1 上的查询（使用新构建的过滤器字符串变量）。编辑过滤器不使用突变或触发任何 Redux 操作（我将用户搜索过滤器/首选项存储在 localStorage/AsyncStorage 而不是数据库中，因此没有突变）。我只是在更改表单的本地状态并使用它来构建一个过滤器字符串，我想将它传递给 Screen1 上的某个查询。如果有帮助，我可以访问两个屏幕上的过滤器字符串。

似乎refetch() 仅限于其查询包装http://dev.apollodata.com/react/receiving-updates.html#Refetch 的组件，那么我将如何从不同的屏幕重新运行查询？

我尝试在 Screen1 和 Screen2 上放置相同的查询，然后在 Screen2 上调用 refetch，尽管查询有效并在 Screen2 上获取新数据，但同名查询不会在我实际需要的 Screen1 上更新.如果他们有相同的名字，难道不应该吗？ （但过滤器变量改变了）

如果我只是设计不正确并且有更简单的方法可以做到这一点，请告诉我。我希望如果我有 2 个屏幕，将相同的查询放在两个屏幕上，并使用新的过滤器变量重新获取其中一个查询，那么重新获取应该在两个地方发生，但它目前正在单独处理它们。

【问题讨论】：

当您更改屏幕 2 页面上的类型时，该值是否会在客户端更新，以便屏幕 1 可以将其作为变量传递给屏幕 1 查询？我可能完全错了，但我怀疑屏幕 1 的查询变量没有被屏幕 2 上的过滤器选择更改。如果不清楚我的建议，我可以在今晚晚些时候花一些时间编写代码简单的运行示例来展示我将如何做到这一点。

【参考方案1】：

我在这里做了同样的事情。场景： - 我选择一个同行来过滤一些消息。 - 我将 peerId 保存到 redux - 我使两个组件（过滤器和列表）都依赖于那个 redux 值。

像这样：

1 - 将该过滤器值放在 redux 上（并将其取回）：

import  compose, graphql  from 'react-apollo'
import  connect  from 'react-redux';
...
export default compose(
    connect(
        (state,ownProps) => ( 
            selectedMessages: state.messages.selectedMessages,
            peerId: state.messages.peerId
        ),
        (dispatch) => (
            clearSelection: () => dispatch(clearSelection()),
            setPeer: (peerId) => dispatch(setPeer(peerId))
        )
    ),
    graphql(
        PEERS_QUERY,
...

当您首先调用 connect（使用 compose）时，在您调用 graphql 包装器之前或在该包装器之外，您将拥有 peerId 作为您的 graphql 包装器上的道具，因此您可以使用它来过滤您的查询：

export default compose(
    connect(
        (state,ownProps) =>  
            return 
                peerId: state.messages.peerId,
                selectedMessages: state.messages.selectedMessages
            
        ,
        (dispatch) => (
            toggleMessage(messageId) 
                dispatch(toggleMessage(messageId));
            
        )
    ),
    graphql( // peerId is available here because this is wrapped by connect
        MESSAGES_QUERY,
        
            options: (peerId) => (variables:peerId:peerId),
            skip: (ownProps) => ownProps.peerId === '',
            props: (
            ...
        ...
    ...
)(MessageList);