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

load({
  typeDefs: `
    type Query {
      lists(listId: ID, limit: Int, skip: Int): [List]
    }
    
    type List @mongo(name: "listsbody") {
      _id: ID
      itemId: ID,
      listItem: ListItem @link(field: "itemId")
      list_id: ID
      row_id: Int
    }

    type ListItem @mongo(name: "items") {
      _id: ID
      created_at: String
      supplier_id: ID,
      item_name: String
    }

    type Subscription {
      lists(listId: ID, limit: Int, skip: Int): SubscriptionEvent
    }

  `,
  // https://github.com/cult-of-coders/grapher/blob/master/docs/graphql.md
  resolvers: {
    Query: {
      lists(_, {listId, limit, skip}, { db }, ast) {
        return db.listsbody.astToQuery(ast, {
          $filters: { list_id: listId },
          $options: { limit, skip, sort: { row_id: 1 } }
        }).fetch();
      },
    },
    List: {
      listItem(parent, args, { db }, ast) {
        return parent.listItem;
      },
    },
    Subscription: {
      lists: {
        resolve: ({event, doc}, args, { db }, ast) => {
          if(event === Event.CHANGED) {
            Object.assign(doc, {
              listItem: db.items.findOne({ _id: doc.itemId })
            });
            // this is very infrequently called, for some reason this is NOT called everytime I change something in the DB, sometimes it is but after a verly large delay of many seconds.
          }
          console.log('resolve() doc:', doc);
          return {event, doc};
        },
        subscribe(_, {listId, limit, skip}, { db }, ast) {
          console.log('params', {listId, limit, skip});
          const observer = db.listsbody.find({ list_id: listId }, { limit, skip, sort: { row_id: 1 } });
          console.log('FETCH!', observer.fetch()); // again, this is sometimes called, sometimes it is not, sometimes with a very big delay ...
          return asyncIterator(observer);
        }
      }
    }
  },
});
initialize();

const GET_LIST = gql`
  query($listId: ID, $limit: Int, $skip: Int) {
    lists(listId: $listId, limit: $limit, skip: $skip) {
      _id
      list_id
      row_id
      itemId
    }
  }
`

const SUBSCRIBE_LIST = gql`
  subscription($listId: ID, $limit: Int, $skip: Int) {
    lists(listId: $listId, limit: $limit, skip: $skip) {
      event
      doc
    }
  }
`

class Test extends React.Component {
  constructor() {
    super();
    this.state = {
      page: 1
    }
  }
  prevPage = () => {
    this.setState({ page: this.state.page - 1 });
  }
  nextPage = () => {
    this.setState({ page: this.state.page + 1 });
  }
  // https://www.apollographql.com/docs/react/v2.5/api/react-apollo/#optionsfetchpolicy
  render(){
    const {page} = this.state;
    const variables = {listId: "pshLYD4optX3yj9Pw", limit: 20, skip: (page-1)*20};
    console.log('variables', variables);
    return (
      <Fragment>
        <ul>
          <ReactiveQuery
            query={GET_LIST}
            variables={variables}
            subscription={SUBSCRIBE_LIST}
            fetchPolicy='no-cache'
          >
            {
              ({ loading, error, data }) => {
                if(loading) return <h2>loading</h2>
                if(error) {
                  console.log(error)
                  return <h2>Error</h2>
                }                
                let { lists } = data;
                console.log(lists);
                lists = lists.map(list => (
                  <li key={list._id}>
                    {list._id} - {list.itemId} - { list.listItem && list.listItem.item_name || 'N/A' } : {list.row_id}
                  </li>
                ));
                // this is NOT working at all - no reloads, no updates, no nothing when I change anything in the DB - basically the subscription is dead alltogether         
                return lists
              }
            }
          </ReactiveQuery>
        </ul>
        <br />
        Seite {this.state.page}
        <button onClick={this.prevPage}>&lt;</button>
        <button onClick={this.nextPage}>&gt;</button>
      </Fragment>
    )
  }
}