Question

查看订阅的Apollo docs示例代码，我还没有看到如何使用订阅结果更新React道具。

来自http://dev.apollodata.com/react/subscriptions.html：

Here is a regular query:

import { CommentsPage } from './comments-page.js';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
const COMMENT_QUERY = gql`
    query Comment($repoName: String!) {
      entry(repoFullName: $repoName) {
        comments {
          id
          content
        }
      }
    }
`;
const withData = graphql(COMMENT_QUERY, {
    name: 'comments',
    options: ({ params }) => ({
        variables: {
            repoName: `${params.org}/${params.repoName}`
        },
    })
});
export const CommentsPageWithData = withData(CommentsPage);

Now, let’s add the subscription.

请注意，此示例代码似乎忽略了常见查询的props代码的这一部分 - 来自http://dev.apollodata.com/react/queries.html：

  props: ({ ownProps, data: { loading, currentUser, refetch } }) => ({
    userLoading: loading,
    user: currentUser,
    refetchUser: refetch,
  }),

...哪种AFAIK是更新我的React组件上的数据道具并触发页面刷新的正确方法。

以下是来自http://dev.apollodata.com/react/subscriptions.html的完整订阅代码示例：

const withData = graphql(COMMENT_QUERY, {
    name: 'comments',
    options: ({ params }) => ({
        variables: {
            repoName: `${params.org}/${params.repoName}`
        },
    }),
    props: props => {
        return {
            subscribeToNewComments: params => {
                return props.comments.subscribeToMore({
                    document: COMMENTS_SUBSCRIPTION,
                    variables: {
                        repoName: params.repoFullName,
                    },
                    updateQuery: (prev, {subscriptionData}) => {
                        if (!subscriptionData.data) {
                            return prev;
                        }
                        const newFeedItem = subscriptionData.data.commentAdded;
                        return Object.assign({}, prev, {
                            entry: {
                                comments: [newFeedItem, ...prev.entry.comments]
                            }
                        });
                    }
                });
            }
        };
    },
});

当结果来自非订阅查询COMMENT_QUERY时，如何获取此处显示的代码，更新我的React组件上的数据道具并触发页面刷新？

Answer 1

感谢Apollo Slack的@neophi提供了这个答案！

const withDataAndSubscription = graphql(GETIMS_QUERY, {
    options({toID}) {
        console.log(GETIMS_QUERY);
        const fromID = Meteor.userId();
        return {
            fetchPolicy: 'cache-and-network',
            variables: {fromID: `${fromID}`, toID: `${toID}`}
        };
    }
    ,
    props: props => {
        return {
            loading: props.data.loading,
            instant_message: props.data.instant_message,
            subscribeToMore: props.data.subscribeToMore,
            subscribeToNewIMs: params => {
                const fromID = Meteor.userId();
                const toID = params.toID;
                return props.data.subscribeToMore({
                    document: IM_SUBSCRIPTION_QUERY,
                    variables: {fromID: `${fromID}`, toID: `${toID}`},
                    updateQuery: (previousResult, {subscriptionData}) => {
                        if (!subscriptionData.data) {
                            return previousResult;
                        }
                        const newMsg = subscriptionData.data.createIM;
                        return update(previousResult, {
                            instant_message: {
                                $push: [newMsg],
                            },
                        });
                    }
                });
            }
        };
    },
})
;

Apollo：在订阅更新时更新React道具？

1 个答案: