Apollo GraphQL: Calling a Query Twice with apolloClient.query?

Question

I have the following query:

const GET_MY_USERINFOFORIMS_QUERY = gql`
query($userID: String!){
  myUserDataForIMs(userID:userID){
    name_first
    name_last
    picture_medium
  }
} `;

const withUserInfoForIMs = graphql(GET_MY_USERINFOFORIMS_QUERY, {
    options({ userID }) {
        return {
            variables: { userID: `${userID}`}
        };
    }
    ,
    props({ data: { loading, myUserDataForIMs } }) {
        return { loading, myUserDataForIMs };
    },
    name: 'GET_MY_USERINFOFORIMS_QUERY',
});

From the Apollo docs, it looks like I may be able to call this query twice from inside the component, using apolloClient.query, doing something like this:

client.query({ query: query1 })
client.query({ query: query2 })

Is there a way to call the query twice, passing a different userID each time?

Answer 1

Found it. :)

        const localThis = this;
        this.props.ApolloClientWithSubscribeEnabled.query({
            query: GET_MY_USERINFOFORIMS_QUERY,
            variables: {userID: fromID},
        }).then((result) => {
            localThis.setState({ fromAvatar: result.data.myUserDataForIMs[0].picture_thumbnail });
        });

        this.props.ApolloClientWithSubscribeEnabled.query({
            query: GET_MY_USERINFOFORIMS_QUERY,
            variables: {userID: toID},
        }).then((result) => {
             localThis.setState({ toAvatar: result.data.myUserDataForIMs[0].picture_thumbnail });
        });

If there's a better/more efficient way, please post it.

Answer 2

You can do this by passing Apollo's refetch() method into your component's props alongside the data:

const withUserInfoForIMs = graphql(GET_MY_USERINFOFORIMS_QUERY, {
    options({ userID }) {
        return {
            variables: { userID: `${userID}`}
        };
    },
    props({ data: { refetch, loading, myUserDataForIMs } }) {
        return { refetch, loading, myUserDataForIMs };
    },
    name: 'GET_MY_USERINFOFORIMS_QUERY',
});

...then somewhere in your component, you can refetch the data "manually":

theUserWasChangedSomehow(userID) {
  this.props.refetch({ userID });
}