resq queries should consider the HTMLElement (node) objects rather RESQ objects

[abhinaba-ghosh]

Hi @baruchvlz

The JSX:

import React from 'react';
import { getProducts } from '../products';

class AProduct extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myName: props.name,
      orderCount: 0,
    };
  }

  order() {
    this.setState({
      orderCount: this.state.orderCount + 1,
    });
  }

  render() {
    return (
      <div className="product">
        <span className="name">{this.state.myName}</span>
        <span className="ordered">{this.state.orderCount}</span>
        <button className="order" onClick={this.order.bind(this)}>
          Order
        </button>
      </div>
    );
  }
}

const Products = ({ products }) => (
  <React.Fragment>
    {products.map((product) => (
      <AProduct key={product.id} name={product.name} value="product" />
    ))}
  </React.Fragment>
);

class ProductsContainer extends React.Component {
  state = {
    products: [],
  };

  componentDidMount() {
    // for now use promises
    return getProducts().then((products) => {
      this.setState({
        products,
      });
    });
  }

  render() {
    return (
      <div className="product-container">
        <Products products={this.state.products} />
      </div>
    );
  }
}

export default ProductsContainer;

FETCH Products:

export const getProducts = () => {
  console.log('fetch products');
  return fetch('http://myapi.com/products')
    .then((r) => r.json())
    .then((json) => {
      console.log('products', json.products);
      return json.products;
    });
};

The outcome:

Expectation:
As per (Type definition)[https://github.com/baruchvlz/resq#type-definition], node returns the real HTMLElement so resq$ /resq$$ should consider the node rather than the RESQ object

Now, surprisingly, for a different react example, everything works as expected.

So, what's really happening for the above example that RESQ is behaving differently?

[baruchvlz]

I redacted my last message cause I misunderstood the problem. This does seem like a bug and weird behaviour, I wonder if it's related to React 17. I will investigate this over the weekend.

[abhinaba-ghosh]

Hi @baruchvlz , is there any update for the ticket?

[baruchvlz]

Hey @abhinaba-ghosh , I currently do not have the time to look into this issue. Sorry for the inconvenience.

Could you try to reproduce this error using React 16?

[abhinaba-ghosh]

Hi @baruchvlz according to this, the issue is observed in React 16 as well.

[baruchvlz]

Yea, that's my bad I meant to ask about React 17, sorry.

I have a bit more time in the coming weeks, I'll take a look at this again.

[abhinaba-ghosh]

@baruchvlz This happens with React 17 too. Do you have an update on this?

[abhinaba-ghosh]

Hey @baruchvlz why this is closed? Let me know if this is solved.

[baruchvlz]

It's not solved. This ticket has been opened for a while and has gained no traction so I closed it. I'm not the only one that can write code and I don't have the time to debug the library.

[abhinaba-ghosh]

I can understand that. But still this is not the proper justification of closing the issue. Let it be opened until a decision made for this.