new Parse.Query doesn't work in ParseComponent (for ES6)

[jbbae]

The updates for ParseComponent for ES6-based code states that all of the same methods in the ParseReact.Mixin should work the same way. However, the "new Parse.Query" doesn't seem to grab anything...? listItems seems always to be empty.

Notes: a) I have verified the connection with Parse (using the "TestObject" code provided in the QuickStart section in Parse.com)

Thanks so much in advance! I'm new to web dev, and just happened to start with React & Parse, so please excuse if this is a silly mistake. (Below is the shortened code based on feedback below)

import React from 'react';
import Parse from 'parse';
import ParseReact from 'parse-react';
let ParseComponent = ParseReact.Component(React);

export default class ExplorerWithNav extends ParseComponent {

observe() {
  return {
    listItems: (new Parse.Query('Focus')).ascending('name')
  };
}

render() {
  let listitems;
  let itemDescription;

  if (this.data.listItems.length) {
    listitems = (
      <List subheader="Your Options">
      {this.data.listItems.map(function(item, i) {
        return (
          <ListItem
            key={i}
            primaryText={item.name} />
        );
      }, this)}
      </List>
    );
  }

  if (this.state.selecteditem.length > 0) {
    itemDescription = <p>Hi!</p>;
  }

  return (
    <div>
      <div>
        {itemDescription}
      </div>
      <div>
        {listitems}
      </div>
    </div>
  );
}
}

[jbbae]

I've been diagnosing for the past few days and it seems the issue is with observe(). The Query just doesn't happen. I've verified this by removing all code with "this.data" in it and it renders. As soon as I put the this.data back in, it stops rendering.

And since I've already verified that it's not an issue with Parse (TestObjects is flowing through correctly), it has to be an issue with ParseReact. I've also tried this in the original ES5 version (with the Mixin and all), which should work, but it doesn't work in the ES5 version anymore either... Any suggestions? Could it be a problem with webpack itself? (can't imagine what that would be though...)

[RickDT]

Your code sample is very long and complex. Can you get it down to the bare essentials to demonstrate the bug? Bonus points if you put it in a public repo. It's easier to help if we can clone and tinker.

[jbbae]

Huge apologies - I hadn't realized that I was being rude uploading the source without pre-treating it. Code is below, as well as the public repo: https://github.com/nickbae91/Explorerwithnav_parse-react/blob/master/src/components/Main.js

I'm pretty sure the problem is more fundamental, as this is a very simple implementation of Parse. I have a feeling this has something to do with ParseReact...

Also, here are a few points I think are worth mentioning to identify the issue:

1. The app is based on generator-react-webpack (https://github.com/newtriks/generator-react-webpack), and I've included the libraries (via npm install, include in package.json, link in index.html).
2. The page does render once I remove anything that involves "this.data".
3. I've verified the connection with Parse by including the "TestObjects" code given in their Quickstart.

import React from 'react';
import Parse from 'parse';
import ParseReact from 'parse-react';
let ParseComponent = ParseReact.Component(React);

export default class ExplorerWithNav extends ParseComponent {

observe() {
  return {
    listItems: (new Parse.Query('Focus')).ascending('name')
  };
}

render() {
  let listitems;
  let itemDescription;

  if (this.data.listItems.length) {
    listitems = (
      <List subheader="Your Options">
      {this.data.listItems.map(function(item, i) {
        return (
          <ListItem
            key={i}
            primaryText={item.name} />
        );
      }, this)}
      </List>
    );
  }

  if (this.state.selecteditem.length > 0) {
    itemDescription = <p>Hi!</p>;
  }

  return (
    <div>
      <div>
        {itemDescription}
      </div>
      <div>
        {listitems}
      </div>
    </div>
  );
}
}

Once again, thanks so much for the help!! (Code in the first post has been updated as well)

[jbbae]

Just letting everyone know I've just substantially shortened the code and description for easier readability!

[jbbae]

Alright, so new update on this issue...

I've confirmed that the issue is with the observe() function not calling the "new Parse.Query()". I first tried removing the entire "observe()" function and all the parts that use "this.data" and the console threw me the error saying that "observe() is required". This verifies that ParseReact is indeed being integrated properly.

I then put it back again (see code above) and the console then throws me the error "TypeError: this.data.listItems is undefined". This means that no query is being submitted into listItems.

I've triple-checked the syntax to be working properly... Could anyone please tell me what it is that's going on here? It's been over a week with this issue already and I can't seem to get past this...

[kouddy]

I have same issue as you do @nickbae91 API call made to Parse is returning data if you looked at the Network tab in Chrome debugger. But somehow pendingQueries() in https://github.com/ParsePlatform/ParseReact/blob/master/src/ParseComponent.js is saying that the query is still pending.

[kouddy]

I fixed my issues by adding check for if (this.pendingQueries().length == 0) { // Do stuff } Maybe you can replace if (this.data.listItems.length) with if (this.pendingQueries().length == 0)

[jbbae]

So the issue here seemed to be a webpack-centric issue. It solved out once I moved the source code to an example from ParseReact (the Budget app I believe). But your point is kinda odd, since I still have it simply as "this.pendingQueries().length" and works fine.

[hamzazar]

Hi @nickbae91 can you past you entire class after solving issue with webpack please? I have the same issue with the gernerator https://github.com/kriasoft/react-starter-kit

[jessemezini]

Hi @hamzazar i'm using react starter kit too, and having the same problems.. You figure this out?

Hi @nickbae91 the fix for you was not use webpack?

[hamzazar]

Hi @jessemezini no, I finally opted for working directly with parse and not using parse-react so only I included parse/node import Parse from 'parse/node'; and work with to get my data and parse objects from router and passing them to the react components