import gql from 'graphql-tag'
export default {
name: 'patient-list',
data () {
return {
patients: [],
patientsColumns: [
{ name: 'id', label: 'number', field: 'patient_number' },
{ name: 'last', label: 'last name', field: row => row.user.last },
{ name: 'first', label: 'first name', field: row => row.user.first }
]
}
},
apollo: {
patients: {
query: gql`
{
patients {
patient_number
user {
first
last
}
}
}
`
}
}
}
<div>
{{patients[0]}}
<q-table
:data="patients"
:columns="patientsColumns"
row-key="name"
></q-table>
</div>
I have problem with printing datas in table by apollo... and i can't figure out what is wrong with this :)
the main problem with my console is
( TypeError: Cannot add property __index, object is not extensible )
I created sample static data and was ok, but when I what use datas passed from apollo by graphql query datatable show "no data available"
If someone give me small advice I will be grateful :)
Error in render: "TypeError: Cannot add property __index, object is
not extensible"
Datatable and sample record passed from Graphql by apollo
this is my code
Printed first object from apollo
ERRORS FROM CONSOLE
Related
Im trying to PUT some of atributes from array Zamestnanci to array archivovany, I tried almost everything and it seems to not work at all. I allways get HTTP error 415 or HTTP 400 because the atributes in archivovany are null.
<script>
import axios from 'axios';
import ZamestnanciService from "../ZamestnanciService";
export default {
name: 'Zamestnanci',
data() {
return {
zamestnanci: [{
id:"",
meno:"",
priezvisko:"",
pozicia:"",
}],
archivovany: [{
id: "",
meno: "",
priezvisko: "",
datumPrepustenia: new Date(),
poslednaPozicia: "",
}]
,
};
},
created(){
this.getZamestnanci();
},
methods: {
getZamestnanci(){
axios.get('https://localhost:49153/api/zamestnanci').then(response => {
this.zamestnanci = response.data;
console.log(response.data);})
}, //get
archivovat(id){
axios.post('https://localhost:49153/api/archivovany/',this.archivovany).then(res=>{
console.log(res);})
},
deleteZamestnanci(id){
axios.delete('https://localhost:49153/api/zamestnanci/'+id).then(response => {this.getZamestnanci();})
if(confirm("chcete archivovať zamestnanca ?")){
this.archivovat();
}
},//delete
}
}
</script>
I need to pass id, meno, priezvisko, pozicia to array archivovany and then PUT the data to another table, but nothing seems to work can anyone please help me ?
The data is from asp.net core API
Okay so I solved it my way, I don't know if its the best way but here is my solution.
i created one more object zamestnanec.
export default {
name: 'Zamestnanci',
data() {
return {
zamestnanci:"",
zamestnanec:"",
archivovany: {
meno: "",
priezvisko: "",
adresa:"",
datumNarodenia:"",
datumPrepustenia: new Date(),
pozicia: "",
plat: ""
}
I created one more axios.get function to load data to the object inside the function Archivovat(id) and there i saved the data from get function to zamestnanec and after that I have put the data to object where i needed.
archivovat(id){
axios.get('https://localhost:49153/api/zamestnanci/'+id).then(response => {
this.zamestnanec = response.data;
this.archivovany.meno=this.zamestnanec.meno;
this.archivovany.priezvisko=this.zamestnanec.priezvisko;
this.archivovany.adresa=this.zamestnanec.adresa;
this.archivovany.datumNarodenia=this.zamestnanec.datumNarodenia;
this.archivovany.pozicia=this.zamestnanec.pozicia;
this.archivovany.plat=this.zamestnanec.plat;
console.log(response.data);
axios.post('https://localhost:49153/api/archivovany/',this.archivovany).then(res=>{
console.log(res);})})
},
I'ts really messy code but it solved my problem.
I am using graphql and Vue.js and apollo
Here is my DateBank
const sensorsdb = [
{
name: "sensor 1",
id: "s-1",
timestamp: 1582021371,
value: 100
},
{
name: "sensor 1",
id: "s-1",
timestamp: 1579451703,
value: 150
},
{
name: "sensor 2-1",
id: "s-2-1",
timestamp: 1582021371,
value: 200
},
{
name: "sensor 2-2",
id: "s-2-2",
timestamp: 1579451703,
value: 350
},
{
name: "sensor 2-2",
id: "s-2-2",
timestamp: 1582021371,
value: 300
},
{
name: "sensor 3",
id: "s-3",
timestamp: 1582021371,
value: 400
},];
I want to get all objects according to object id. sensorId is an array. because I want to get multiple objects with multiple ids.
The following is my API function to get object.
async getDataById({ sensorId }) {
let sensorsData = [];
for (let i = 0; i < sensorId.length; i++) {
let sensorData = this.sensorDataStore.sensors.filter(sensor => sensor.id === sensorId[i]);
sensorsData = sensorsData.concat(sensorData);
}
return sensorsData;
}
In Front-end, gql file is following:
query sensorData($id: [String]){
sensorData(id: $id){
name
id
value
timestamp
}}
and with my apollo query code in vue.js, in this case selectedSensorId is ["s-2-1", "s-2-2"]
<ApolloQuery :query="require('../graphql/sensorDataById.gql')" :variables="{ id: selectedSensorId }">
<template v-slot="{ result: { loading, error, data } }">
<b-loading :is-full-page=true :active.sync=loading :can-cancel="false"/>
<div v-if="error">
<no-data-error />
</div>
<div v-if="data">
{{ data }}
<bar-chart-view :sensorInfo="data.sensorData"/>
</div>
</template>
</ApolloQuery>
But I got the following different result:
Graphql playground which has correct result
The front-end result with duplicated sensor-s-2
Apollo Client normalizes results according to the id and __typename fields as described in the docs. If an array returns multiple items with the same id, by default they will share the same cache key, which means what's returned by the client will be the same object.
You should provide a custom dataIdFromObject function to your InMemoryCache constructor that accommodates your specific use case. Something like:
const dataIdFromObject = object => {
switch (object.__typename) {
case 'SensorDataPoint': return `SensorDataPoint:${object.id}:{value}`;
default: return defaultDataIdFromObject(object);
}
}
Note that if you use the same type elsewhere, you may experience issues with the cache updated correctly after mutations because we are now keying off both the value and id. You might want to consider a different approach to your schema where the ids are actually unique :
type SensorDataPoint {
id: ID!
sensorId: ID!
sensorName: String!
value: Int!
timestamp: Int!
}
or even better
type SensorDataPoint {
id: ID!
value: Int!
timestamp: Int!
sensor: Sensor!
}
type Sensor {
id: ID!
name: String!
}
I know it its been a while but what Daniel Rearden mentioned above, I included the { addTypename: false } as options for InMemoryCache
const client = new ApolloClient({
link: ApolloLink.from([
onError(({ graphQLErrors, networkError }) => {
if (graphQLErrors)
graphQLErrors.forEach(({ message, extensions }) => {
console.log(`[GraphQL error]: Message: ${message}, Code: ${extensions?.code}`)
})
if (networkError) {
console.log(`[Network error] ->: ${networkError}`)
Toast.show('Connection Error', {
position: Toast.positions.TOP,
type: 'danger',
duration: 3000,
})
}
}),
authMiddleware,
link,
]),
cache: new InMemoryCache({ addTypename: false }),
});
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 } })
While using Firestore, vuefire, vue-tables-2, I stuck getting document's id.
My data structure is as below.
Here is my code.
<v-client-table :columns="columns" :data="devices" :options="options" :theme="theme" id="dataTable">
import { ClientTable, Event } from 'vue-tables-2'
import { firebase, db } from '../../firebase-configured'
export default {
name: 'Devices',
components: {
ClientTable,
Event
},
data: function() {
return {
devices: [],
columns: ['model', 'id', 'scanTime', 'isStolen'],
options: {
headings: {
model: 'Model',
id: 'Serial No',
scanTime: 'Scan Time',
isStolen: 'Stolen YN'
},
templates: {
id: function(h, row, index) {
return index + ':' + row.id // <<- row.id is undefined
},
isStolen: (h, row, index) => {
return row.isStolen ? 'Y': ''
}
},
pagination: {
chunk: 5,
edge: false,
nav: 'scroll'
}
},
useVuex: false,
theme: 'bootstrap4',
template: 'default'
}
},
firestore: {
devices: db.collection('devices')
},
};
My expectation is devices should id property as vuefire docs.
But array this.devices didn't have id field even if I check it exist it console.
Basically, every document already has id attribute, but it's non-enumerable
Any document bound by Vuexfire will retain it's id in the database as
a non-enumerable, read-only property. This makes it easier to write
changes and allows you to only copy the data using the spread operator
or Object.assign.
You can access id directly using device.id. But when passing to vue-tables-2、devices is copied and lost id non-enumerable attribute.
I think you can workaround using computed property
computed: {
devicesWithId() {
if (!this.devices) {
return []
}
return this.devices.map(device => {
...device,
id: device.id
})
}
}
Then, please try using devicesWithId in vue-tables-2 instead.
I would like to know how to validate empty object using vuelidate. I tried to give a demonstration on jsfiddle as links follows
Vue.use(window.vuelidate.default)
const { required, minLength } = window.validators
new Vue(
{
el: "#app",
data: {
companies: [
{
id: 1,
name: 'facebook'
},
{
id: 2,
name: 'apple'
}
],
text: {
id: null,
name: null
}
},
validations: {
text: {
required
}
}
}
)
jsfiddle
$v.text is valid because it is a non-empty object. That means it doesn't have 'falsy' value so it meets the requirement. One way to make it work:
validations: {
text: {
id: {required},
name: {required},
},
},
JSFiddle
If you don't want to repeat items object structure, you can write a custom validator.
There is missing information about how to use withParams in the documentation of vuelidate page.
So i have searched on its github page and found this link .
According to link i came up with that solution
import { withParams } from 'vuelidate'
export const checkIfNull = withParams(
{ type: 'required' },
value => (value.id === null ? false : true)
)
There is nothing special about validating an object, you just need to define the structure and add any validation rules you require.
Please see the example I created and take another look at the Collections docs.