I want to remove an Id in an array of id in events of the user in vuex. Here is the code my mutation
REMOVE_USER_EVENT (state, payload) {
state.user.events.splice(payload, 1)
}
it says splice is not a function. state.user.events are arrays of event Ids of the user.
this is the user object
user:{
events: Array(0)
_id: "5e44d7060572343b58aab"
email: "test#example.com"
firstName: "Jtest test"
lastName: "Test"
address: "Jtest"
phoneNum: "05469874897"
}
Related
I've just started with GraphQL and mutations and am having this issue.
When I attempt to pass data to my GraphQL server, it seems the args parameter does not register the args that I am attempting to pass.
When I console.log them, they appear as undefined, but the method is working and receiving the request.
Does anything seem incorrect below? I'm just getting my head around it so would appreciate any feedback.
This is the query I'm attempting to run from GraphiQL
mutation {
addDelivery(
carrier: "AusPost",
goodsDelivered:[],
receiver: {
first_name:"ll",
last_name:"test",
receiver_email: "bbb#bbb.com.au"
},
consignmentNumber:"AAAA000",
poNumber:"PO0000"
) {
id
carrier {
iD
carrier_name
}
}
}
My schema:
type ReceiverType{
first_name: String
last_name: String
receiver_email: String
}
type ItemType {
item_type: String,
quantity: String
}
type Deliveries {
carrier: Carrier
consignmentNumber: String
goodsDelivered: [String]
id: ID
items: [ItemType]
poNumber: String
receiver: ReceiverType
}
type Carrier{
iD: ID
carrier_name: String
}
input Item {
item_type: String,
quantity: String
}
type Query {
deliveries: [Deliveries]
}
input Receiver {
first_name: String
last_name: String
receiver_email: String
}
type Mutation {
addDelivery(
carrier: String!,
consignmentNumber: String!,
goodsDelivered: [Item]!,
poNumber: String!,
receiver: [Receiver]!
) : Deliveries
}
My add delivery resolver
addDelivery: async (parent, args, context, info) => {
const delivery = new Deliveries({
receiver: {
first_name: args.first_name,
last_name: args.last_name,
receiver_email: args.receiver_email
},
items: args.items,
consignment_no: args.consignment_no,
po_number: args.po_number,
carrier_id: args.carrier_id,
delivery_id: args.delivery_id
});
await delivery.save();
return delivery;
}
I changed the signature to the following and it resolved the issue.
addDelivery: async ({receiver, items, consignment_no, po_number, carrier_id, delivery_id}) => {
I have a Prisma model with lets say 10 fields.
Think User model with firstname, lastname, address, e-mail , phone, mobile, age etc.
I am trying to write a update method for this, where I most of the times only want to update some or only 1 of the fields. Not the whole User. If the field is not sent with the request, I want to keep the value from the db.
What would the best practice be for this. Should I check for all fields to be in the req object?
How could I write this for prisma?
Example on how I would like it to work:
req = {firstname: 'Bob', email: 'bob#bob.bob', etc}
const updateUser = await prisma.user.update({
where: {
email: 'viola#prisma.io',
},
data: {
req.firstname ? (email: req.firstname) : null,
req.email ? (email: req.email) : null,
req.address? (email: req.address) : null,
},
})
Or should I check for values to be present in req and build the data object in 10 versions:
let customDataObject = {}
if (req.firstname) {
customDataObject.firstname = req.firstname
}
if (req.email) {
customDataObject.email= req.email
}
const updateUser = await prisma.user.update({
where: {
email: 'viola#prisma.io',
},
data: customDataObject,
})
The undefined property is used in Prisma to do exactly what you're trying to achieve. Basically, when a field is assigned undefined it means ignore this and do nothing for this field. You can learn more about this in the article about null and undefined in the docs.
This is what your update query should look like.
// assuming email, firstname and address fields exist in your prisma schema.
const updateUser = await prisma.user.update({
where: {
email: 'viola#prisma.io',
},
data: {
firstname: req.firstname || undefined, // if req.firstname is falsy, then return undefined, otherwise return it's value.
email: req.email || undefined,
address: req.address || undefined
},
})
Look at the image below and please explain where should I use computed instead of methods and vice versa? It confuses me.
As a rule of thumb: a computed is a simple getter (though they can be setters, but that's not something you'd typically use) that is dependent on one or more properties. It'll update automatically when those properties change. You cannot pass it parameters. You would use a method when you need to pass a parameter and/or need to perform an action or mutation.
data() {
firstName: 'Bert',
lastName: 'Ernie'
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`;
}
}
This will return "Bert Ernie" and will update automatically when either firstName or lastName change.
Now if you need to change something, or for example select something from a list using a parameter, you would use a method.
data() {
users: [
{ id: 1, name: 'Bert' }.
{ id: 2, name: 'Ernie' }
]
},
methods: {
getUser(userid) {
return this.users.find(user => user.id === userid);
},
setUserName(userid, newName) {
const user = this.users.find(user => user.id === userid);
if (user) {
user.name = newName;
}
}
}
One of my functions returns the object below:
Promise {
{
user: {
name: 'Ervin Howell',
email: 'Shanna#melissa.tv',
type: 'authenticated'
}
}
}
How to destruct user object from this json?
hi you can read the JSON API in this site. it has two methods:JSON.parse and JSON.sringify.
for your situation, you can use JSON.parse if your function return a JSON string
let json = "{
user: {
name: 'Ervin Howell',
email: 'Shanna#melissa.tv',
type: 'authenticated'
}
}
}"
obj = JSON.parse(json);
// when you want the user object
let user = obj.user
// when you want the user's name
let name = user.name
I have a vue bootstrap table displaying, in each row, few properties of objects of an array (got through an api call with axios).
Every row has a button that should redirect me to a detail page, with more properties of that object, plus a map.
I was thinking to make a function to get the property id of the object contained in the clicked row, but I'm not sure on how to do it. I need the id to use it in the last part of the api call.
The store is structured so that I have a module for the user and another one for these objects (activities). In these modules I deal with state, actions and mutations. A separate file handles the getters. As these activities will be modified, I need to save their state too.
I will also need to be able to easily access all the properties of the single object (not only the ones shown in the table row) from other components.
I'm getting very confused.
Here the code:
Table with all the activities:
<b-table
responsive
:fields="fields"
:items="activity"
>
<template
slot="actions"
>
<b-button
v-b-tooltip.hover
title="Mostra dettagli"
variant="info"
class="px-3"
#click="goToActivityDetail"
>
<span class="svg-container">
<svg-icon icon-class="search"/>
</span>
</b-button>
</template>
</b-table>
In the script:
export default {
name: 'AllActivities',
data() {
return {
fields: [
{ key: 'activity.activityName', label: 'Activity', _showDetails: true},
{ key: 'related_activity', label: 'Related activity', _showDetails: true},
{ key: 'start', label: 'Start', _showDetails: true },
{ key: 'end', label: 'End', _showDetails: true },
{ key: 'travel_mode', label: 'Travel mode', _showDetails: true },
{ key: 'actions', label: '' }
],
activity: [],
methods: {
getIdActivity(){
**?? how to get it ??**
},
goToActivityDetail() {
this.$router.push({
name: 'activityDetail'
})
}
}
goToActivityDetail()
obviously does not work, in the console:
- [vue-router] missing param for named route "activityDetail": Expected "activityId" to be defined
- [vue-router] missing param for redirect route with path "/see-all-activities/:activityId": Expected "activityId" to be defined)
In the getters file I have:
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token
}
export default getters
So here I will need to have something like:
activityId: state => state.activity.activityId
Which is coming from activity.js, which is:
import {
getActivityId
} from '#/components/AllActivities'
const state = {
activityId: getActivityId()
}
const mutations = {
SET_ACTIVITY_ID: (state, activityId) => {
state.activityId = activityId
}
}
const actions = {
setActivityId({
commit
}) {
return new Promise(resolve => {
commit('SET_ACTIVITY_ID', '')
resolve()
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
IF this is right, what is left is the function to get the id of the object contained in the table row clicked.
Also, how to write that activity id in the api call (axios)?
Now I have:
export function getSingleActivity() {
return request({
url: 'http://localhost:8000/api/user_activity/:activityId',
method: 'get'
})
}
But I am not sure if that's correct.
Also, how to access the other properties (to be displayed in the detailActivity page)?
This will be made of a list of some properties (probably a stacked table component) and a map component, so I will need to access the properties in both these components.
I hope I've been clear enough,
thank you.
It was dead simple. I post how to solve it in case someone else get stuck on this too.
I added a slot scope to the template that contains the button:
<template
slot="actions"
slot-scope="data"
>
Then I added the single activity (following the vue bootstrap markup data.item) as parameter to the button click
#click="goToDetailActivity(data.item)"
And the function called by the click became:
goToDetailActivity(activity) {
this.$router.push({
name: 'DettaglioAttivita',
params: { activityId: activity.id }
})
}
That's it.
Worth mentioning is you're using vuex. If I understand correctly you want to get the property read from vuex?
To read a property from vuex you can eather use this.$store.getters.activity
Or use mapGetter.
Read the following page https://vuex.vuejs.org/guide/getters.html
Also you have to set the param when you do a router.push
router.push({ name: 'activity', params: { id: activityId } })