cult-of-coders / apollo-live-client Goto Github PK

const GET_USERS = gql`
  query($limit: Int, $skip: Int) {
    lists(limit: $limit, skip: $skip) {
      _id
      list_id
      row_id
    }
  }
`

const SUBSCRIBE_USERS = gql`
  subscription($limit: Int, $skip: Int) {
    lists(limit: $limit, skip: $skip) {
      event
      doc {
        _id
        list_id
        row_id
      }
    }
  }
`

<ReactiveQuery
  query={GET_USERS}
  variables={{limit: 20, skip: (page-1)*20}}
  subscription={SUBSCRIBE_USERS}
>
  {
    ({ loading, error, data }) => {
      if(loading) return <h2>loading</h2>
      if(error) {
        console.log(error)
        return <h2>Error</h2>
      }                
      let { lists } = data;
      console.log(lists);                
      return 'loaded'
    }
  }
</ReactiveQuery>

Subscription: {
  lists: {
    resolve: payload => payload,
    subscribe(_, {limit, skip}, { db }, ast) {
      const observer = db.listsbody.astToQuery(ast, {
        $options: { limit, skip }
      });
      // const observer = db.listsbody.find({}, { limit: 100 });
      return asyncIterator(observer);
    }
  }
}

class TestPage extends React.Component {
  render() {
    const { currentUser } = this.props.store.current;
    const { loading } = this.props;
    if(loading) return <Loading/> // this line breaks the Subscription!
    return (
      <div className="container">
        <TestItemlist type="list" listId="YBxgJgkSNLHBmdNpp" openOrderId="jFZJm79tSQYuhqpna" />
      </div>
    )
  }
}

export default withTracker((props) => {
  const groupId = "7gLtWKifiRtEAeTvq";
  const sub1 = Meteor.subscribe('buyer:getGroups');
  const sub2 = Meteor.subscribe('group:getOpenOrderHead', groupId);
  const sub3 = Meteor.subscribe('group:getLists', groupId);
  const loading = !sub1.ready() || !sub2.ready() || !sub3.ready();
  const group = Groups.findOne({ _id: groupId });
  if(!group || loading) return { loading: true }
  const supplier = Meteor.users.findOne({ _id: group.supplierId });
  return {
    loading,
    group,
    supplier,
    lists: ListsHead.find({ groupIds: groupId, 'special': { $nin: ['blacklist'] } }, { sort: { datetime: -1 } }).fetch(),
    currentOpenOrder: OpenOrdersHead.findOne({ group_id: groupId })
  }
})(withMainStore(TestPage))

export default class TestItemlist extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      page: 1
    }
  }
  prevPage = () => {
    this.setState(state => {
      if(state.page == 1) return;
      state.page--;
      return state;
    });
  }
  nextPage = () => {
    this.setState(state => {
      state.page++;
      return state;
    });
  }
  render() {
    let query = GET_LIST_DATA;
    let subscription = SUB_LIST_DATA;
    let variables = { listId: this.props.listId, limit: 20, skip: (this.state.page-1)*20 };
    const { type } = this.props;
    if(type == 'cart') {
      query = GET_CART_DATA;
      subscription = SUB_CART_DATA;
      variables = { openOrderId: this.props.openOrderId };
    }
    return (
      <ReactiveQuery
        query={query}
        subscription={subscription}
        variables={variables}
      >
        {(props) => {
          const { data, error, loading, refetch } = props;
            return ...
          )
        }}
      </ReactiveQuery>
    )
  }
}