graphql - Apollo GraphQL：使用 apolloClient.query 调用两次查询？

Question

我有以下查询：

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

从Apollo docs看来，我可以使用 apolloClient.query 从组件内部调用此查询两次，执行如下操作：

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

有没有办法两次调用查询，每次传递不同的用户ID？

Answer 1

找到了。:)

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

如果有更好/更有效的方法，请发布。

Answer 2

您可以通过将 Apollo 的refetch()方法与数据一起传递到组件的 props 中来做到这一点：

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

...然后在您的组件中的某个地方，您可以“手动”重新获取数据：

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