How to restore a query outside its wrapped component?

Question

I have two screens:

Screen 1: Results

Screen2: Edit Filters

When I edit the filters on Screen2 and click back, I would like to restore the request to Screen1 (using the new filter string variable). Editing filters does not use a mutation or any Redux actions do not work (I save filters / user preferences in local storage / AsyncStorage instead of the database, so there is no mutation). I just change the local state of the form and use this to create a filter string that I want to pass to a specific request on Screen1. I have access to the filter bar on both screens if that helps.

It seems that it is refetch()limited to the component, its request wraps http://dev.apollodata.com/react/receiving-updates.html#Refetch , so how would I re-run the request from another screen?

I tried to put the same request on Screen1 and Screen2, and then call refetch on Screen2, and although the request works and gets new data on Screen2, the same name request is not updated on Screen1, where I really need it, Isn't it if do they have the same name? (but the filter variable has changed)

If I'm just designing it wrong and there is an easier way to do it, please let me know. I expect that if I have 2 screens, put the same request on both of them and repeat one of the requests with a new filter variable, then the update should happen in both places, but they are currently processing them separately.

Answer 1

I did the same here. Scenario: - I choose a peer device to filter some messages. - I keep peerId in abbreviation - I make both components (filter and list) dependent on this redux value.

Like this:

1 - To put this filter value on redux (and take it back):

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);