How do I refetch a query outside of its wrapped component?

Question

I have two screens:

Screen1: Results

Screen2: Edit Filters

When I edit the filters on Screen2 and press back, I would like to refetch the query on Screen1 (with the newly built filter string variable). Editing the filters doesn't use a mutation or fire any Redux actions (I'm storing the users search filters/preferences in localStorage/AsyncStorage instead of a database, so no mutation). I'm merely changing the local state of the form and use that to build a filter string that I want to pass to a certain query on Screen1. I have access to the filter string on both screens if that helps.

It seems like refetch() is limited to the component its query wraps http://dev.apollodata.com/react/receiving-updates.html#Refetch so how would I re-run the query from a different screen?

I tried putting the same query on both Screen1 and Screen2, then calling the refetch on Screen2, and although the query works and gets the new data on Screen2, the same name query doesn't update on Screen1 where I actually need it. Isn't it supposed to if they have the same name? (but the filters variable changed)

If I am just designing this incorrectly and there is an easier way to do it, please let me know. I expect that if I have 2 screens, put the same query on both of them, and refetch one of the queries with a new filters variable, then the refetch should happen in both places, but it's currently treating them individually.

When you change the genre on Screen 2 page, is that value being updated on the client side in a way that it's available to Screen 1 to pass as a variable to the Screen 1 query? I may be totally wrong, but my suspicion is that the Screen 1 query variables aren't being changed by the filter selection on Screen 2. If it's not clear what I'm suggesting, I can take some time later tonight to code out a simple running example to show how I would do this. — Brandon, Nov 17 '16 at 18:24

score 1 · Answer 1 · edited Dec 28 '17 at 06:04

I did the same thing here. The scenario: - I choose a peer to filter some messages. - I keep the peerId into redux - I make both components (the filter and the list) dependent on that redux value.

Like this:

1 - To put that filter value on redux (and to grab 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,
...

when you call connect first (using compose), before you call a graphql wrapper, or outside that wrapper, you will have peerId available as a prop on your graphql wrapper, so you can use it to filter your query:

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

How do I refetch a query outside of its wrapped component?

1 Answers1