GraphQL订阅

时间:2017-08-17 14:52:39

标签: javascript graphql apollo react-apollo

我今天很难使用GraphQL。可能遇到每一个错误。

我希望能够在我的组件中订阅websockets,所以我写了一些代码来执行此操作。订阅工作正常,似乎有效,但我遇到的问题是如何获取组件内部订阅的更新值?

const FIELD_QUE = gql`
  query fieldChanged($fieldName: String!, $projectId: Int!) {
    fieldChanged(fieldName: $fieldName, projectId: $projectId) {
      usersEmail
      value
      projectId
    }
  }
`;

const FIELD_MUT = gql`
  mutation ChangeFieldMutation($fieldName: String!, $projectId: Int!, $value: String!, $usersEmail: String!) {
    changeField(fieldName: $fieldName, projectId: $projectId, value: $value, usersEmail: $usersEmail) {
      projectId
      value
      usersEmail
    }
  }
`;

const withMutation = graphql(FIELD_MUT, {
  props: ({ ownProps, mutate }) => ({
    changeField: ({ fieldName, value, projectId, usersEmail }) => {
      mutate({
        variables: { fieldName, value, projectId, usersEmail },
      });
    },
  }),
});

const FIELD_SUB = gql`
  subscription onFieldChanged($projectId: Int!){
      fieldChanged(projectId: $projectId){
        projectId
        value
        usersEmail
      }
    }
`;

const withSubscription = graphql(FIELD_QUE, {
  name: 'fieldChanged',
  options: () => ({
    variables: {
      projectId: 1,
      fieldName: 'description',
    },
  }),
  props: props => ({
    subscribeToFieldChange: (params) => {
      return props.fieldChanged.subscribeToMore({
        document: FIELD_SUB,
        variables: {
          projectId: params.projectId,
          fieldName: params.fieldName,
        },
        updateQuery: (prev, { subscriptionData }) => {
          if (!subscriptionData.data) return prev;
          const newValue = subscriptionData.data;
          const result = { ...prev, ...newValue };
          return result;
        },
      });
    },
  }),
});

我得到的就是这个: enter image description here

0 个答案:

没有答案