withQuery is not triggering re-renders when data becomes available from the Query

[yushaUzumo]

I am using [email protected] with meteor/cultofcoders:grapher with no version constraint. My code (reactivity) used to work about 1.5 to 3 years ago.

I am still using [email protected] and unfortunately do not have the time to do and test the upgrade as yet and I just want a fix of what is broken for now and I will start with the upgrade later in the year

The issue I am having is that withQuery is not triggering re-renders when data becomes available from providerListQuery. How do I make the reactivity to work again? Must I use a specific version (not latest) of meteor/cultofcoders:grapher? If so is it available and which one. Otherwise how do I sort out my reactivity.

My code displays an empty page since the first try does not bring back data and it unfortunately stops there. withQuery does not seem to do its "magic" anymore.

Here is my code

/imports/api/users/query/providerList.js:

import { createQuery } from 'meteor/cultofcoders:grapher';

export default createQuery({
    users: {
        $filter({filters, params}) {
			console.log("params._idDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD:",params._id);
			console.log(params._id);
			//if (params._id)
			filters._id = params._id 
			//else
			//	filters.default = true
        },
        memberId: 1,
        customerAccount: {
			moneyAvailable: 1
        },
        networks: {
			data: 1,
		}
    }
});

/imports/ui/components/providerList.jsx:

import React, { Component } from 'react' //PropTypes
import { Mongo } from 'meteor/mongo';
import { Session } from 'meteor/session'
import { Link } from 'react-router-dom'
import { Cookies } from 'meteor/ostrio:cookies';
const cookies = new Cookies();
import {withQuery} from 'meteor/cultofcoders:grapher-react';
import providerListQuery from '/imports/api/users/query/providerList.js';
import Networks from '/imports/api/networks/collection.js';

export class ProviderList extends Component {

renderProviderListWhenLoggedIn(user) 
    {
		
		var path = "";
		var path1;
		var path2;
		var path3;
		var path4;
		var path5;
		var path6;
		var path7;
		var path8;
		var path9;
		var path10;
		var path11;
		var path12;
		var path13;
		var path14;
		//var providers
		
		if (user && user.customerAccount && user.customerAccount.moneyAvailable)
		{
			var customerAccount = user.customerAccount;
			var balance = getCustomerBalance(customerAccount);
			
			var cname;
			var date;
			var cvalue;
			var exdays;
			cname = "balance";
			date = new Date();
			cvalue = balance;
			exdays = 7300;
			setToken(cname, cvalue, date, exdays);
			localStorage.setItem("balance", balance);
		}
	

		if (user)
		{
			var result = user.networks.data
			
			localStorage.setItem("network", user.networks.data);
			
			var res = JSON.parse(result);
			var jsn = res.data.networks;

			var count = 0;
			jsn.forEach(function(provider) {
				provider['providerId'] = count;
				if (count == 0)
					provider['isZero'] = true;
				else
					provider['isZero'] = false;
				
				if (provider.path1)
					path1 = "/store/productTypes/" + provider.providerId;
				if (provider.path2)
					path2 = "/store/productTypes/" + provider.providerId;
				if (provider.path3)
					path3 = "/store/productTypes/" + provider.providerId;
				if (provider.path4)
					path4 = "/store/productTypes/" + provider.providerId;
				if (provider.path5)
					path5 = "/store/productTypes/" + provider.providerId;
				if (provider.path6)
					path6 = "/store/productTypes/" + provider.providerId;
				if (provider.path7)
					path7 = "/store/productTypes/" + provider.providerId;
				if (provider.path8)
					path8 = "/store/productTypes/" + provider.providerId;
				if (provider.path9)
					path9 = "/store/productTypes/" + provider.providerId;
				if (provider.path10)
					path10 = "/store/productTypes/" + provider.providerId;
				if (provider.path11)
					path11 = "/store/productTypes/" + provider.providerId;
				if (provider.path12)
					path12 = "/store/productTypes/" + provider.providerId;
				if (provider.path13)
					path13 = "/store/productTypes/" + provider.providerId;
				if (provider.path14)
					path14 = "/store/productTypes/" + provider.providerId;
				

				count = count + 1;
			});
		}

		if (Meteor.isClient)
		{
			if (user)
			{			
				return (<div>
					<header>
						<h1 class="header1">Provider list</h1>
					</header>
					<div  class="outerList">
						<Link class="innerList Img1" to={path1} >
							<img src="/test/providers/1.png" alt="Img 1"  class="1RealImg" ></img>
						</Link>
						<Link class="innerList Img2" to={path2}>
							<img src="/test/providers/2.jpg" alt="Img 2"  class="2RealImg" ></img>
						</Link>
						<Link class="innerList Img3" to={path3}>
							<img src="/test/providers/3.svg.jpg" alt="Img 3"  class="3RealImg" ></img>
						</Link>
						<Link class="innerList Img4" to={path4}>
							<img src="/test/providers/4.gif" alt="Img 4"  class="4RealImg" ></img>
						</Link>
						<Link class="innerList Img5" to={path5}>
							<img src="/test/providers/5.jpg" alt="Img 5"  class="5RealImg" ></img>
						</Link>
						<Link class="innerList Img6" to={path6}>
							<img src="/test/providers/6.jpg" alt="Img 6"  class="6RealImg" ></img>
						</Link>
						<Link class="innerList Img7" to={path7}>
							<img src="/test/providers/7.jpg" alt="Img 7"  class="7RealImg" ></img>
						</Link>
						<Link class="innerList Img8" to={path8}>
							<img src="/test/providers/8.jpg" alt="Img 8"  class="8RealImg" ></img>
						</Link>
						<Link class="innerList Img9" to={path9}>
							<img src="/test/providers/9.jpg" alt="Img 9" class="9RealImg" ></img>
						</Link>
						<Link class="innerList Img10" to={path10}>
							<img src="/test/providers/10.jpg" alt="Img 10" class="10RealImg" ></img>
						</Link>
						<Link class="innerList Img11" to={path11}>
							<img src="/test/providers/11.png" alt="Img 11" class="11RealImg" ></img>
						</Link>
						<Link class="innerList Img12" to={path12}>
							<img src="/test/providers/12.png" alt="Img 12" class="12RealImg" ></img>
						</Link>
					</div>
				</div>)
			}
		}
	}





	render() {
		console.log("startTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTTT");
		const self = this;
		const {data, isLoading, error} = this.props; 
		
		console.log('isLoading11111111111111111',isLoading);
		console.log('error222222222222222222222',error);
		console.log('data3333333333333333333333',data);

		if (error) {
		    // Render error message
		    return <div>Error: {error.message}</div>;
		}
        	
		return (<div>
			<header>
				<h1 class="header1">Provider list</h1>
			</header>
			<div  class="outerList">
				{data.map(user => self.renderProviderListWhenLoggedIn(user))}
			</div>
		</div>)

	}
}



export default withQuery( function() {
	return providerListQuery.clone({_id:Meteor.userId() })
})(ProviderList);

const setToken = (cname, cvalue, expires, exdays) => {
  var d = expires;
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  //cookies.set(cname, cvalue, expires);
};

function getCustomerBalance(customerAccount)
{
	var balance;
	if (customerAccount)
	{
		if (customerAccount.moneyAvailable)
		{
			balance = customerAccount.moneyAvailable;
		}
		else
		{
			balance = 0;
		}
	}
	else
	{
		balance = 0;
	}
	return balance;
}

Please let me know if you want me to help with specific information related to the issue or my code.