react-query dynamic number of parameters - javascript

I will have product filter on ecommerce page. I'm not sure how can I pass dynamic number of parameters in my query? Because sometimes will query use 1 parameter sometimes 6 and more.
Example
const fetchProducts = async (size, color, weight, deep,) => {
const parsed = await ky(
`http://localhost:3000/api/products/get?size=${size}&color=${color}`
).json();
return parsed;
};
const { data, status } = useQuery([size, color,], () => fetchPosts(size, color));
Sometimes will be 10 different parameters from the product filter, sometimes just 1...
How can I handle this dynamically? I will need then put the filter on prisma backend.

You can use qs package to handle all params.
Example:
const fetchProducts = (params)=>{
const query = qs.stringify(params);
const baseUrl = "http://localhost:3000/api/products/get?";
const parsed = await ky(baseUrl + query);
....
}
const params = {color:"red", size:"big"}
const query = qs.stringify(params);
//output: "color=red&size=big"

Related

Can't update firebase collection field - Expected type 'ya', but it was: a custom Ia object

I am trying to make barbershop web app where costumer can see list of free appointments and when they reserve free appointment I want to delete that field from firebase.
I have a collection which represents one barber.
This is how it looks in firebase.
As you see radno_vrijeme is object or map in firebase which contains 6 arrays, and in each array there is list of free working hours.
In my function I am able to do everthing except last line where I need to update firebase collection.
const finishReservation = async () => {
try {
const freeTimeRef = collection(db, `${barber}`);
const q = query(freeTimeRef);
const querySnap = await getDoc(q);
querySnap.forEach(async (doc) => {
const radnoVrijeme = doc.data().radno_vrijeme;
// Find the index of the hour you want to delete
const index = radnoVrijeme["Mon"].indexOf(hour);
// Remove the hour from the array
radnoVrijeme["Mon"].splice(index, 1);
// Update the document in the collection
console.log(radnoVrijeme);
const radnoVrijemeMap = new Map(Object.entries(radnoVrijeme));
await freeTimeRef.update({ radno_vrijeme: radnoVrijemeMap });
});
} catch (error) {
console.log(error);
}
};
I tried to pass it as JSON stringified object, but it didn't work. I always get this error :
"FirebaseError: Expected type 'ya', but it was: a custom Ia object"
When you are trying to fetch multiple documents using a collection reference or query, then you must use getDocs():
const finishReservation = async () => {
try {
const freeTimeRef = collection(db, `${barber}`);
const q = query(freeTimeRef);
const querySnap = await getDocs(q);
const updates = [];
querySnap.forEach((d) => {
const radnoVrijeme = d.data().radno_vrijeme;
const index = radnoVrijeme["Mon"].indexOf(hour);
radnoVrijeme["Mon"].splice(index, 1);
const radnoVrijemeMap = new Map(Object.entries(radnoVrijeme));
updates.push(updateDoc(d.ref, { radno_vrijeme: radnoVrijemeMap }))
});
await Promise.all(updates);
console.log("Documents updated")
} catch (error) {
console.log(error);
}
};
getDoc() is used to fetch a single document using a document reference.

ReactJS - JavaScript: Filter function does not work properly

I am building a boat visualizer using AISHub APIs. After inquiring the APIs I am able to obtain a json file with thousands of vessels, but I filter only the vessels I am interested in, and inject them into a table on a webpage. The API gives the following fileds: [NAME, MMSI, LONGITUDE, LATITUDE, others...]. The most important parameters I am using for the filtering are : NAME and MMSI (whereas there could be multiple vessels with same NAME, there cannot be two vessels with the same MMSI number because it is unique).
The problem I have is that the filter function does not seem to have the proper behavior.
In fact it does not filter uniquely for that specific NAME and/or MMSI and I end up having multiple vessels with same NAME and with different MMSI. Also the vessel that should appear, it does not, despite I hard-coded the NAME and MMSI for that specific vessel.
Which is not explainable as I hard-coded those numbers to be specifically filtered.
Below the code I am using for the filtering search:
var express = require('express');
var router = express.Router();
var axios = require('axios');
const NodeCache = require('node-cache');
const myCache = new NodeCache();
let hitCount = 0;
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
const mmsiOfInterest = [
'367029520', // ok -> MICHIGAN
'366909730', // ok -> JP BOISSEAU
'367128570', // ok -> DELAWARE BAY
'366744010', // ok -> ATLANTIC SALVOR
// Other MMSI numbers .....
];
const shipNamesOfInterest = [
'MICHIGAN',
'JP BOISSEAU',
'DELAWARE BAY',
'ATLANTIC SALVOR',
// Other NAMES....
]
router.get('/hello', async function(req, res, next) {
const allData = myCache.get('allData');
if (!allData) {
hitCount++;
console.log(`hit ${hitCount} number of times`);
const { data } = await axios.get(
'http://data.aishub.net/ws.php?username=MY_KEY&format=1&output=json&compress=0&latmin=11.42&latmax=58.20&lonmin=-134.09&lonmax=-52.62'
);
const [ metaData, ships ] = data;
console.log(data);
const shipsOfInterest = ships.filter(
(ship) => mmsiOfInterest.includes(ship.MMSI) || shipNamesOfInterest.includes(ship.NAME)
);
myCache.set('allData', shipsOfInterest, 70);
res.send(data);
return;
}
console.log('this is the data:', allData);
res.send(allData);
});
module.exports = router;
Also below a typical JSON response from the API:
{"MMSI":225342000,"TIME":"2020-01-26 01:45:48 GMT","LONGITUDE":1.43912,"LATITUDE":38.91523,"COG":339.9,"SOG":0,"HEADING":297,"ROT":0,"NAVSTAT":0,"IMO":9822449,"NAME":"ILLETAS JET","CALLSIGN":"EAVX","TYPE":40,"A":4,"B":25,"C":4,"D":4,"DRAUGHT":0,"DEST":"IBIZA","ETA":"00-00 00:00"}
What I have done so far:
1) I tried different combination with the filter function and I tried to filter by MMSI, which is supposed to be unique for each vessel, but still I end up with vessels with same NAME and different MMSI (despite I hard-coded the MMSI...I don't understand):
const shipsOfInterest = ships.filter(
(ship) => mmsiOfInterest.includes(ship.MMSI)
);
After I tried filtering by NAME, but that does not work either:
const shipsOfInterest = ships.filter(
(ship) => shipNamesOfInterest.includes(ship.NAME)
);
EDIT 2
router.get('/hello', async function(req, res, next) {
//
const allData = myCache.get('allData');
if (!allData) {
hitCount++;
console.log(`hit ${hitCount} number of times`);
const { data } = await axios.get(
'http://data.aishub.net/ws.php?username=KEY&format=1&output=json&compress=0&latmin=11.42&latmax=58.20&lonmin=-134.09&lonmax=-52.62'
);
// console.log(data);
const { metaData, ships } = data;
const set = new Set();
const shipsOfInterest = ships.filter((ship) => {
if (set.has(ship.MMSI)) return false;
set.add(ship.MMSI);
return true;
});
myCache.set('allData', shipsOfInterest, 70);
res.send(data);
return;
}
console.log('this is the data:', allData);
res.send(allData);
});
module.exports = router;
Below the error:
I don't know if the filter function can get a better result if organized in a different way. I thought that this could have been a very good way to organize the search and don't understand what it does not work.
Thanks for pointing to the right direction for solving this issue.
In the end of if statement you do res.send(data), which is basically the data you received from the API. Instead, you need to res.send(shipsOfInterest); Also, change the format of mmsiOfInterest list from strings to numbers, because you receive numbers from the API.
I guess you made mistake while using the shorthand assignment. Use {} instead of [].
Instead of:
const [ metaData, ships ] = data;
try:
const { metaData, ships } = data;
So, as far as I understand you the filtered list to contain the records with unique MMSI value. So, what you need to do is:
const uniqueMMSI = new Set();
const shipsOfInterest = ships.filter(
(ship) => {
if (set.has(ship.MMSI)) return false;
set.add(ship.MMSI);
return true;
}
);
I hope I understood your question :)
It looks like MMSI is coming in as a numeric value, while your comparison array is holding strings. How about using an array of integers for your comparison?
const mmsiOfInterest = [
367029520,
366909730,
367128570,
366744010,
// Other MMSI numbers .....
];

What's the most efficient way to store data to multiple refs in firebase?

Let's see the next situation:
If we create an user, we have to create a new client, a new user, and a new, inital project for the user.
db = {
users: {},
clients: {},
projects: {}
};
const usersRef = firebase.database().ref("/users");
const clientsRef = firebase.database().ref("/clients");
const projectsRef = firebase.database().ref("/projects");
To keep the code clean, and separated, we can create three functions:
const newUserToDb = name => {
const newUser = usersRef.push();
newUser.set({name});
};
const newClientToDb = name => {
const newClient = clientsRef.push();
newClient.set({name});
};
const newProjectToDb = name => {
const newProject = projectsRef.push();
newProject.set({name});
};
const createUserToDb = (userName, clientName, projectName) => {
newUserToDb(userName);
newClientToDb(clientName);
newProjectToDb(projectName);
};
To make all the changes in one place, but make the code less separated:
const createUserToDb = (userName, clientName, projectName) => {
const userId = usersRef.push().key;
const clientId = clientsRef.push().key;
const projectId = projectsRef.push().key;
const updates = {};
updates[`/users/${userId}`] = userName;
updates[`/clients/${clientId}`] = clientName;
updates[`/projects/${projectId}`] = projectName;
firebase.database().ref().update(updates);
};
Is there any important difference between the two solutions above? Which is more efficient?
The important difference to the above approach is atomicity. In the first scenario, the individual collection or documents update will succeed or fail without affecting other updates. In the second scenario, all the updates will succeed else none will.
I don't think efficiency is the right term to be used for comparing the above scenarios, its more of the business/use case which will define which one you need to use
The first way seems more separated and explicit which would probably be easier for other developers to understand.

Firebase Realtime Database and Cloud Functions -- increment counter based on data nodes

I'm working on a web application that will visualize data from my Firebase database. But first, I want to be able to "count" the total number of users with a given data so that I can then use that count number in my graphs.
For reference, my database looks like this:
Because I expect separate totals for the required keys, I'm guessing that I'll need separate counters for each one. I've started writing a cloud function to keep track of when a new user is created:
import * as functions from 'firebase-functions'
export const onMessageCreate = functions.database
.ref('/students/{studentID}')
.onCreate((snapshot, context) => {
const userData = snapshot.val()
const afterGrad = userData.afterGrad
const gender = userData.gender
const gradDate = userData.gradDate
const program = userData.program
const race = userData.race
const timeToComplete = userData.timeToComplete
})
But now, I'm extremely lost at how I should go about creating counters. Would something like this suffice, with an individual counter for each constant?
import * as functions from 'firebase-functions'
var counterAfterGrad;
export const onMessageCreate = functions.database
.ref('/students/{studentID}')
.onCreate((snapshot, context) => {
const userData = snapshot.val()
const afterGrad = userData.afterGrad
var counterAfterGrad++
})
Or should I be thinking about using a transaction in this case? I'm really not sure of the best way, and would really appreciate some help.
Yes, you should use a transaction. See the documentation here: https://firebase.google.com/docs/database/web/read-and-write#save_data_as_transactions and https://firebase.google.com/docs/reference/js/firebase.database.Reference#transaction
For counting the overall number of users you could do as follows:
export const onMessageCreate = functions.database
.ref('/students/{studentID}')
.onCreate((snapshot, context) => {
const userData = snapshot.val()
const afterGrad = userData.afterGrad
const allUsersCounterRef = admin
.database()
.ref('allUsersCounter');
return allUsersCounterRef
.transaction(counter_value => {
return (counter_value || 0) + 1;
})
})
Note that you may have to take into consideration the deletion of a user.
You could very well have several counters, for example by "gender" (male/female) and by "program". You would then use an object in the transaction as follows:
exports.onMessageCreate = functions.database
.ref('/students/{studentID}')
.onCreate((snapshot, context) => {
const userData = snapshot.val();
const countersRef = admin.database().ref('counters');
return countersRef.transaction(currentData => {
currentData[userData.gender] = (currentData[userData.gender] || 0) + 1;
currentData[userData.program] = (currentData[userData.program] || 0) + 1;
return currentData;
});
});

how to clone the mongoose query object in javascript

I am facing the problem of clone of the mongoose query object .Javascript the copy the one object into another object by call-by-ref but in my project there is scenario i need to copy one object into another object by call-by-value.
var query=domain.User.find({
deleted: false,
role: role
})
var query1=query;
I have the scenario change in the query object is not reflected in query1. I google and try so many way to clone the object but it does't work.The query object is used in another function for pagination and query1 object is used for count query.
1.I used to Object.clone(query1) error Object.clone is not function
2.I used Object.assign(query1) but it does't works fine.
3.I used other so many ways can anybody help me to sort this problem
Alternative solution using merge method:
const query = domain.User.find({
deleted: false,
role: role
}).skip(10).limit(10)
const countQuery = query.model.find().merge(query).skip(0).limit(0)
const [users, count] = await Promise.all([query, countQuery.count()])
you are trying to clone a cursor, but it is not the right approach, you probably just need to create another
like this:
var buildQuery = function() {
return domain.User.find({
deleted: false,
role: role
});
};
var query = buildQuery();
var query1 = buildQuery();
This is work for me:
const qc = sourceQuery.toConstructor();
const clonedQuery = new qc();
This code work in pagination function where sourceQuery passed as parameter and i dont known what models used. Also it work with aggregations and complex queries.
public async paging(
query: mongoose.DocumentQuery<mongoose.Document[], mongoose.Document>,
params,
transformer: any = null
) {
let page = Number(params.page);
if (!page) page = 1;
let page_size = Number(params.count);
if (!page_size) page_size = 100;
const qc = query.toConstructor();
const cq = new qc();
return cq.countDocuments().exec()
.then(async (total) => {
const s = params.sort;
if (s) {
query.sort(s);
}
query.limit(page_size);
query.skip(page_size * (page - 1));
let results = await query.exec();
if (transformer) {
results = await Promise.all(results.map((i) => transformer(i)));
}
const r = new DtoCollection();
r.pages = Math.ceil(total / page_size);
r.total = total;
(r.results as any) = results;
return r;
});
}
Sergii Stotskyi's answer works just fine and is very elegant, except that count is deprecated.
countDocuments or estimatedDocumentCount should be used instead.
However, this causes the error the limit must be positive. We can walk around this by set limit to a large integer.
const query = domain.User.find({
deleted: false,
role: role
}).skip(10).limit(10)
const countQuery = query.model.find().merge(query).skip(0).limit(Number.MAX_SAFE_INTEGER)
const [users, count] = await Promise.all([query, countQuery.countDocuments()])
Since mongoose v6 you can use Query.prototype.clone
E.g. for your code snippet:
const query = domain.User.find({
deleted: false,
role: role
})
const query1 = query.clone();

Categories