I have mulitple pages in React Native with dynamic content from the api. When the first page is loaded, the data is fetched using RTK query. So I check for any errors, the loading state (to show an Activity indicator) and if there is any data present.
I know from the docs that when I call the RTK query hook again in another component, the network call won't be triggered and instead the cached data will be returned.
But here is my question. Should I check for errors/loading state... in all other components too? I mean, it's a few lines of code that I'll need to put in every component over and over and over again:
const { data: { data } = {}, isLoading, isError } = useGetOnboardingDataQuery();
if (isLoading || isError || !data) {
return <Loading isLoading={isLoading} isError={isError || !data} />;
}
return PageComponent....
I don't think it's necessary? How do you handle this? Can't I just reach out to the Redux-toolkit store?
This may be a stupid question because I'm new to redux-toolkit and RTK query. Just want to hear some opinions
Can't I just reach out to the Redux-toolkit store?
That would be the same thing as just not checking for errors, would it?
In the end: if you know it will be handled somewhere else, of course you don't need to check it. Just check that data !== undefined.
Related
I am reading in several places that I should be able to get the data context of the current template with Template.currentData();
I found that it seems to only work within an autorun. But after logging the data as a variable there, first it logs null, then it logs the data in the console.
When I try to use the data, like for example trying to pass data._id into a subscription, I get a TypeError in the console. TypeError: Cannot read property '_id' of null. So for some reason, the data is null and I am struggling to find out why.
I have the data context set within my routes using Iron Router:
Router.route('/stock/:stockNumber', {
name: 'stock.detail',
template: 'StockDetail',
data: function () {
return Stock.findOne({
stockNumber: this.params.stockNumber*1
});
}
});
What I am trying to do is get access to the data context so that I can pass some things from it, such as the '_id' into some other subscriptions. What am I doing wrong?
The template is otherwise correctly displaying the data on the page as expected, and I can use Spacebars to show things like {{_id}} for example. But again, I seem to be unable to get access to the data context in Template.StockDetail.onCreated
Ok, so here's what I ended up doing...
Apparently the data context is just simply not available in the onCreated, period. What I had to do was do a Collection.findOne() within the autorun to find the stockItem and set the result to a variable, then use the stockItem._id as the parameter in the new subscription IF the item was found. With both of these things, it seems to work just fine.
Template.StockDetail.onCreated(function () {
let instance = this;
instance.autorun(function () {
instance.subscribe('stock_item', Router.current().params.stockNumber);
let stockItem = Stock.findOne({ // This is what was needed for some reason...
stockNumber: Router.current().params.stockNumber*1
});
if (stockItem) { // ...and, also, this was needed
instance.subscribe('stock_item_scan_log', stockItem._id);
}
});
});
I just don't understand why I can't just easily get the _id some other way. This way just feels incorrect and I don't like it.
I have a problem with some dynamically generated forms and passing values to them. I feel like someone must have solved this, or I’m missing something obvious, but I can't find any mention of it.
So for example, I have three components, a parent, a child, and then a child of that child. For names, I’ll go with, formComponent, questionComponent, textBoxComponent. Both of the children are using changeDetection.OnPush.
So form component passes some values down to questionComponent through the inputs, and some are using the async pipe to subscribe to their respective values in the store.
QuestionComponent dynamically creates different components, then places them on the page if they match (so many types of components, but each questionComponent only handles on one component.
some code:
#Input() normalValue
#Input() asyncPipedValue
#ViewChild('questionRef', {read: ViewContainerRef}) public questionRef: any;
private textBoxComponent: ComponentFactory<TextBoxComponent>;
ngOnInit() {
let component =
this.questionRef.createComponent(this.checkboxComponent);
component.instance.normalValue = this.normalValue;
component.instance. asyncPipedValue = this. asyncPipedValue;
}
This works fine for all instances of normalValues, but not for asyncValues. I can confirm in questionComponent’s ngOnChanges that the value is being updated, but that value is not passed to textBoxComponent.
What I basically need is the async pipe, but not for templates. I’ve tried multiple solutions to different ways to pass asyncValues, I’ve tried detecting when asyncPipeValue changes, and triggering changeDetectionRef.markForChanges() on the textBoxComponent, but that only works when I change the changeDetectionStrategy to normal, which kinda defeats the performance gains I get from using ngrx.
This seems like too big of an oversight to not already have a solution, so I’m assuming it’s just me not thinking of something. Any thoughts?
I do something similar, whereby I have forms populated from data coming from my Ngrx Store. My forms aren't dynamic so I'm not 100% sure if this will also work for you.
Define your input with just a setter, then call patchValue(), or setValue() on your form/ form control. Your root component stays the same, passing the data into your next component with the async pipe.
#Input() set asyncPipedValue(data) {
if (data) {
this.textBoxComponent.patchValue(data);
}
}
patchValue() is on the AbstractControl class. If you don't have access to that from your question component, your TextBoxComponent could expose a similar method, that can be called from your QuestionComponent, with the implementation performing the update of the control.
One thing to watch out for though, if you're also subscribing to valueChanges on your form/control, you may want to set the second parameter so the valueChanges event doesn't fire immediately.
this.textBoxComponent.patchValue(data, { emitEvent: false });
or
this.textBoxComponent.setValue(...same as above);
Then in your TextBoxComponent
this.myTextBox.valueChanges
.debounceTime(a couple of seconds maybe)
.distinctUntilChanged()
.map(changes => {
this.store.dispatch(changes);
})
.subscribe();
This approach is working pretty well, and removes the need to have save/update buttons everywhere.
I believe I have figured out a solution (with some help from the gitter.com/angular channel).
Since the values are coming in to the questionComponent can change, and trigger it's ngOnChanges to fire, whenever there is an event in ngOnChanges, it needs to parse through the event, and bind and changes to the dynamic child component.
ngOnChanges(event) {
if (this.component) {
_.forEach(event, (value, key) => {
if (value && value.currentValue) {
this.component.instance[key] = value.currentValue;
}
});
}
}
This is all in questionComponent, it resets the components instance variables if they have changed. The biggest problem with this so far, is that the child's ngOnChanges doesn't fire, so this isn't a full solution. I'll continue to dig into it.
Here are my thoughts on the question, taking into account limited code snippet.
First, provided example doesn't seem to have anything to do with ngrx. In this case, it is expected that ngOnInit runs only once and at that time this.asyncPipedValue value is undefined. Consequently, if changeDetection of this.checkboxComponent is ChangeDetection.OnPush the value won't get updated. I recommend reading one excellent article about change detection and passing async inputs. That article also contains other not less great resources on change detection. In addition, it seems that the same inputs are passed twice through the component tree which is not a good solution from my point of view.
Second, another approach would be to use ngrx and then you don't need to pass any async inputs at all. Especially, this way is good if two components do not have the parent-child relationship in the component tree. In this case, one component dispatches action to put data to Store and another component subscribes to that data from Store.
export class DataDispatcherCmp {
constructor(private store: Store<ApplicationState>) {
}
onNewData(data: SomeData) {
this.store.dispatch(new SetNewDataAction(data));
}
}
export class DataConsumerCmp implements OnInit {
newData$: Observable<SomeData>;
constructor(private store: Store<ApplicationState>) {
}
ngOnInit() {
this.newData$ = this.store.select('someData');
}
}
Hope this helps or gives some clues at least.
I've been following the example for Algolia's Instant Search at https://www.algolia.com/doc/guides/search/instant-search/ (javascript version)
I understand that for many use-cases (like in the example) it makes sense for the script to run its initial search upon pageload and display the results (basically all results).
In my case though I'd like to not do that initial search. How can I achieve this?
Thanks
You can pass a searchFunction parameter to the instantsearch initializer, which will intercept each search and let you decide whether to perform it or not.
Here's an example taken from this Github issue. The search is not performed if the query is empty, as it will be on page load.
var search = instantsearch({
searchFunction: function(helper) {
if (helper.state.query === '') {
return;
}
helper.search();
}
});
If you have your own logic around when the search should/shouldn't be performed you can use it in here. See the Usage tab of the Initialization section of the docs for more information.
How can I set undefined or null and make empty to a date field in the parse.com data browser.
There is nothing related with code, in the pic i attached, you can see the parse.com data browser and i want to set undefined or null whatever and make that field empty but whenever i tried and double click the cell, data browser open date widget and it is not allowed to delete the data or there is no button to make empty.
Parse.com Data Browser
In data-browser I don't think it's possible to delete a date value, I couldn't find a way to do it at least.
And now that Parse.com will not be maintained anymore(in 01/01/2017 it will shut down), I don't think this may come up as a feature.
My solution to this problem was to make a request to this register and use unset. It gets a bit more of work but solves the problem.
I don't know if you're using parse with Javascript but it can be really easy to adapt to other enviroments.
In Javascript this script should do the trick:
var DateUpdate = Parse.Object.extend("MyTableOnParse");
var dateUpdateEdit = new Parse.Query(DateUpdate);
dateUpdateEdit.equalTo("objectId",myObjectId);
dateUpdateEdit.first({
success: function(object)
{
object.unset("saleDate");
object.save({
success: function(updatedObject)
{
console.log("Data deleted");
}
})
}
});
I am a new user to JavaScript and the meteor framework trying to understand the basic concepts. First of all I want to add a single document to a collection without duplicate entries.
this.addRole = function(roleName){
console.log(MongoRoles.find({name: roleName}).count());
if(!MongoRoles.find({name: roleName}).count())
MongoRoles.insert({name: roleName});
}
This code is called on the server as well as on the client. The log message on the client tells me there are no entries in the collection. Even if I refresh the page several times.
On the server duplicate entries get entered into the collection. I don't know why. Probably I did not understand the key concept. Could someone point it out to me, please?
Edit-1:
No, autopublish and insecure are not installed anymore. But I already published the MongoRoles collection (server side) and subscribed to it (client side). Furthermore I created a allow rule for inserts (client side).
Edit-2:
Thanks a lot for showing me the meteor method way but I want to get the point doing it without server side only methods involved. Let us say for academic purposes. ;-)
Just wrote a small example:
Client:
Posts = new Mongo.Collection("posts");
Posts.insert({title: "title-1"});
console.log(Posts.find().count());
Server:
Posts = new Mongo.Collection("posts");
Meteor.publish(null, function () {
return Posts.find()
})
Posts.allow({
insert: function(){return true}
})
If I check the server database via 'meteor mongo' it tells me every insert of my client code is saved there.
The log on the client tells me '1 count' every time I refresh the page. But I expected both the same. What am I doing wrong?
Edit-3:
I am back on my original role example (sorry for that). Just thought I got the point but I am still clueless. If I check the variable 'roleCount', 0 is responded all the time. How can I load the correct value into my variable? What is the best way to check if a document exists before the insertion into a collection? Guess the .find() is asynchronous as well? If so, how can I do it synchronous? If I got it right I have to wait for the value (synchronous) because I really relay on it.
Shared environment (client and server):
Roles = new Mongo.Collection("jaqua_roles");
Roles.allow({
insert: function(){return true}
})
var Role = function(){
this.addRole = function(roleName){
var roleCount = Roles.find({name: roleName}).count();
console.log(roleCount);
if(roleCount === 0){
Roles.insert({name: roleName}, function(error, result){
try{
console.log("Success: " + result);
var roleCount = Roles.find({name: roleName}).count();
console.log(roleCount);
} catch(error){
}
});
}
};
this.deleteRole = function(){
};
}
role = new Role();
role.addRole('test-role');
Server only:
Meteor.publish(null, function () {
return Roles.find()
})
Meteor's insert/update/remove methods (client-side) are not a great idea to use. Too many potential security pitfalls, and it takes a lot of thought and time to really patch up any holes. Further reading here.
I'm also wondering where you're calling addRole from. Assuming it's being triggered from client-side only, I would do this:
Client-side Code:
this.addRole = function(roleName){
var roleCount = MongoRoles.find({name: roleName}).count();
console.log(roleCount);
if (roleCount === 0) {
Meteor.call('insertRole', roleName, function (error, result) {
if (error) {
// check error.error and error.reason (if I'm remembering right)
} else {
// Success!
}
});
}
}
How I've modified this code and why:
I made a roleCount variable so that you can avoid calling MongoRoles.find() twice like that, which is inefficient and consumes unneeded resources (CPU, disk I/O, etc). Store it once, then reference the variable instead, much better.
When checking numbers, try to avoid doing things like if (!count). Using if (count === 0) is clearer, and shows that you're referencing a number. Statements like if (!xyz) would make one think this is a boolean (true/false) value.
Always use === in JavaScript, unless you want to intentionally do a loose equality operation. Read more on this.
Always use open/closed curly braces for if and other blocks, even if it contains just a single line of code. This is just good practice so that if you decide to add another line later, you don't have to then wrap it in braces. Just a good practice thing.
Changed your database insert into a Meteor method (see below).
Side note: I've used JavaScript (ES5), but since you're new to JavaScript, I think you should jump right into ES6. ES is short for ECMAScript (which is what JS is based on). ES6 (or ECMAScript 2015) is the most recent stable version which includes all kinds of new awesomeness that JavaScript didn't previously have.
Server-side Code:
Meteor.method('insertRole', function (roleName) {
check(roleName, String);
try {
// Any security checks, such as logged-in user, validating roleName, etc
MongoRoles.insert({name: roleName});
} catch (error) {
// error handling. just throw an error from here and handle it on client
if (badThing) {
throw new Meteor.Error('bad-thing', 'A bad thing happened.');
}
}
});
Hope this helps. This is all off the top of my head with no testing at all. But it should give you a better idea of an improved structure when it comes to database operations.
Addressing your edits
Your code looks good, except a couple issues:
You're defining Posts twice, don't do that. Make a file, for example, /lib/collections/posts.js and put the declaration and instantiation of Mongo.Collection in there. Then it will be executed on both client and server.
Your console.log would probably return an error, or zero, because Posts.insert is asynchronous on the client side. Try the below instead:
.
Posts.insert({title: "title-1"}, function (error, result) {
console.log(Posts.find().count());
});