I'm having a trouble and i'm stuck. I used to replicate this on my other codes but this method doesn't work on apollo. Here is my method using the apollo on my vue.js.
handleLikePost() {
const variables = {
postId: this.postId,
username: this.user.username
};
this.$apollo.mutate({
mutation: LIKE_POST,
variables,
update: (cache, { data: { likePost } }) => {
const data = cache.readQuery({
query: GET_POST,
variables: { postId: this.postId }
});
data.getPost.likes += 1;
cache
.writeQuery({
query: GET_POST,
variables: { postId: this.postId },
data
})
.then(({ data }) => {
// const updatedUser = {
// ...this.user,
// favorites: data.likePost.favorites
// };
//this.$store.commit("setUser", updatedUser);
console.log(this.user);
console.log(data.likePost);
})
.catch(err => console.error(err));
}
});
}
I think the problem is you are not returning something from;
cache.writeQuery()
That's why .then({data}) is not getting something from writeQuery()
Related
I am using the google map api loader for get the google map config details.
Ref: https://v2.vuejs.org/v2/cookbook/practical-use-of-scoped-slots.html#1-Create-a-component-that-initializes-our-map
I am trying to cover unit test case for this scenario.
googleMap.vue
async mounted() {
const googleMapApi = await GoogleMapsApiLoader({
apiKey: this.apiKey
})
this.google = googleMapApi
this.initializeMap()
},
googleMap.spec.js
jest.mock('google-maps-api-loader', () => {
return { ... }
});
require('google-maps-api-loader');
const wrapper = shallowMount(GoogleMap, {
propsData: {
mapConfig: {},
apiClient: 'apiclient-test-id',
apiChannel: 'apichannel-test-id'
},
mocks: {
mocksData
}
});
describe('googlemap.vue', () => {
it('should all the elements rendered', async() => {
wrapper = mountGoogleMap();
});
});
Those given line was not covering.. I am struggling to write unit test case for this file
I'm trying to set data from an axios response but it seems to me like "this" is only in the scope of the axios function. I have tried different variations of the same code that I've seen on other posts, but none are working.
data: () => ({
storeKey: 'dayspanState',
calendar: Calendar.months(),
readOnly: false,
defaultEvents: [],
ticket_event: [],
}),
created(){
this.get_tickets();
console.log(this.ticket_event);
},
methods:
{
get_tickets(){
axios.get('/api/get_patching_tickets')
.then(function (response) {
this.ticket_event = response.data;
}.bind(this));
},
}
Second trial
created(){
var self = this;
axios.get('/api/get_patching_tickets')
.then(function (response) {
self.ticket_event = response.data;
});
console.log(this.ticket_event);
}
Any help would be appreciated.
Try rewriting your function like:
created(){
axios.get('/api/get_patching_tickets')
.then((response) => {
this.ticket_event = response.data;
}).finally(() => {
console.log(this.ticket_event);
});
/* WARNING: the following console will not work as expected
as the local value is set after the successful call
while this is fired immediately after created is called
*/
console.log(this.ticket_event);
}
The callbacks you passed to .then in axios.get are fine. I see the only problem with your code is that it logs this.ticket_event right after calling this.get_tickets() - an asynchronous operation, so it'll not log the updated value after the api call finish because this.get_tickets() operates asynchronously:
this.get_tickets(); // is an async operation
console.log(this.ticket_event); // will not get the most updated value of this.ticket_event
Try this to see if it works:
data() {
return {
storeKey: 'dayspanState',
calendar: Calendar.months(),
readOnly: false,
defaultEvents: [],
ticket_event: [],
}
},
methods: {
get_tickets() {
return axios.get('/api/get_patching_tickets')
.then(response => {
this.ticket_event = response.data;
});
}
},
created() {
this.get_tickets().finally(() => {
console.log(this.ticket_event);
});
}
i'm trying to use this kind of structure.
I have my axios calls in a service file and then call them in vue files.
So i have this js file
const DashboardService = {
getStationList() {
let url = '/api/stations/list'
ApiService.get(url) //ApiService is an Axios wrapper
.then(response => {
console.log(response.data) //data are logged, function is called
response.data
})
}
}
export default DashboardService
Then in the Vue File i have this:
import DashboardService from '#/_services/admindashboard.service'
export default {
methods: {
getMarkers() {
let result = DashboardService.getStationList()
console.log(result) //undefined
}},
mounted() {
this.getMarkers()
}
}
I can't understand why result is undefined because che getStationList() function gets called... when the component is mounted the functions should have returned the response... how can i solve this situation?
getStationList is an async function, so you'll need to await it's result (or use then). For example:
async mounted() {
this.markers = await DashboardService.getStationList();
},
Also see this question for more details.
Next, you are missing a return in the implementation of getStationList.
const DashboardService = {
getStationList() {
const url = '/api/stations/list';
ApiService.get(url).then(response => {
return response.data;
});
},
};
or perhaps:
const DashboardService = {
async getStationList() {
const url = '/api/stations/list';
try {
const response = await ApiService.get(url);
return response.data;
} catch (error) {
console.error(error);
return [];
}
},
};
The result is undefined because getStationList is not returning anything.
You can consider turning your api call into an async function that returns the result.
const DashboardService = {
async getStationList() {
let url = '/api/stations/list';
return ApiService.get(url);
}
}
export default DashboardService
And in your component
methods: {
async getMarkers() {
let result = await DashboardService.getStationList();
console.log(result);
}
},
If you don't want to use the async await syntax. You can return a the promise from your service and utilize the result on your component, as so:
methods: {
getMarkers() {
DashboardService.getStationList().then(result => {
console.log(result);
});
}
},
I have just a simple error which is confusing me almost 3 weeks.
my question is about, I want to return string from methods "idvideo" at the end of my axios API url, but nothing is happen.
as you can see on my code below.
I have been searching for solution and try an error for many times, but still never found any best answer that can help me out.
export default {
data() {
return {
errors: [],
videos: [],
items: []
}
},
methods: {
idvideo: function() {
const data = this.items
const result = data.map((item) => {
return {
fetchId: item.snippet.resourceId.videoId
};
}).sort((a, b) => b.count - a.count);
var i, len, text;
for (i = 0, len = result.length, text = ""; i < len; i++) {
text += result[i].fetchId + ",";
}
var x = text.slice(0, -1);
return(x);
}
// Fetches posts when the component is created.
created() {
// Ini adalah API utk playlist yang dipilih
axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
.then(response => {
// JSON responses are automatically parsed.
this.items = response.data.items
})
.catch(e => {
this.errors.push(e)
}),
// Ini adalah API utk data yang dipilih
axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
.then(response => {
// JSON responses are automatically parsed.
this.videos = response.data.items
})
.catch(e => {
this.errors.push(e)
})
},
}
I really appreciate any kind of solutions that can help me out. If you guys have best way to implement this function, let me know.
Sorry for my bad english and any mistakes. This is my very second time post question in this platform.
Thank you very much sir!
Since, they are asynchronous requests, I have following solution in my mind.
Solution:
Move the next axios call within the first axios call. This is because, only after first call, the 'items' will be retrieved and then it will assigned to this.items So next axios call will have the required data from idvideo() function.
export default {
data() {
return {
errors: [],
videos: [],
items: []
}
},
methods: {
idvideo: function() {
const data = this.items
const result = data.map((item) => {
return {
fetchId: item.snippet.resourceId.videoId
};
}).sort((a, b) => b.count - a.count);
var i, len, text;
for (i = 0, len = result.length, text = ""; i < len; i++) {
text += result[i].fetchId + ",";
}
var x = text.slice(0, -1);
return(x);
}
// Fetches posts when the component is created.
created() {
// Ini adalah API utk playlist yang dipilih
axios.get("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLjj56jET6ecfmosJyFhZSNRJTSCC90hMp&key={YOUR_API_KEY}")
.then(response => {
// JSON responses are automatically parsed.
this.items = response.data.items
// Ini adalah API utk data yang dipilih
axios.get('https://www.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&key={YOUR_API_KEY}&id='+this.idvideo())
.then(response => {
// JSON responses are automatically parsed.
this.videos = response.data.items
})
.catch(e => {
this.errors.push(e)
})
}
})
.catch(e => {
this.errors.push(e)
}),
,
}
How to catch axios exceptions in vuex store and throw it to vue.js method ? My goal is to get this exception to be able to reset computed values bound to input using this.$forceUpdate().
In my method, I have this:
methods: {
mymet: _.debounce(
function(table, id, key, event) {
const value = event.target.value;
this.$store.dispatch('UPDATE_TRANSACTIONS_ITEM', { table, id, key, value }).then(response => {
event.target.classList.remove("is-invalid")
event.target.classList.add("is-valid")
}, error => {
console.error("Got nothing from server. Prompt user to check internet connection and try again")
this.$forceUpdate();
})
}, 500
)
}
In my vuex store, I have this:
const actions = {
UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
let company = {
[data.key]: data.value
}
axios.put(`/api/companies/${data.id}`, { company }).then( function ( response ) {
commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data })
}).catch(function (error) {
throw error
})
}
}
const mutations = {
SET_TRANSACTIONS_ITEM_UPDATE (state, { profile }) {
state.company_data[profile.key] = profile.value
},
}
You need to make the actual action function asynchronous.
If you have the ability to use async functions, you can just await the axios call, and let the error bubble up (no need to throw anything in the action itself):
const actions = {
async UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
let company = {[data.key]: data.value};
await axios.put(`/api/companies/${data.id}`, { company }).then(() => {
commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data })
});
}
}
Otherwise, you'll need to return a Promise and catch the error and pass it to the reject handler:
const actions = {
UPDATE_TRANSACTIONS_ITEM ({ commit }, data) {
return new Promise((resolve, reject) => {
let company = {[data.key]: data.value};
axios.put(`/api/companies/${data.id}`, { company }).then(() => {
commit('SET_TRANSACTIONS_ITEM_UPDATE', { profile: data });
resolve();
}, (error) => reject(error));
});
}
}