How to pass dynamic parameter (ID) to axios api call?

Question

I have an api with the last part dynamic: src/api/user.js

export function getProfileData() {
  return request({
    url: 'http://localhost:8000/profile_update/DYNAMIC USER ID HERE',
    method: 'get',
  })
}

I am calling this api in this action: store/modules/user.js

setProfileData({ commit }) {
 return getProfileData(userId).then(response => {
 console.log('RESPONSE setProfileData action dispatch', response)
 commit('SET_PROFILE_DATA', response.results)
})

(In this module I also have state and mutations - working) This action is dispatched here: src/views/users-list

goToUserProfile(user) {
  const userId = user.id
  this.$store.dispatch('user/setCurrentUser').then(() => {
    const profileData = this.$store.dispatch('user/setProfileData(userId)').then(() => {
      const profileData = this.$store.getters.profileData
      this.profileData = profileData
      console.log('users-list sending profile data: ', profileData )
      this.$router.push({
        name: 'SeeUserProfile',
        params: {
        userId: userId
      } 
    })
  }).catch((err) => {
     console.log('ERROR IN fetchin' userDataProfile: ', err)
     this.loading = false
   })
 })
}

The argument user comes from

@click.prevent="goToUserProfile(data.item), selectUser(data.item)"

So data.item = single selected user

This code is not working. I need the dynamic user id to be used in the api. In the store I also have:

setCurrentUser({ commit }, userData) {
commit('SET_CURRENT_USER', userData)}

which is working fine -inside userData there is the property id.

I tried using /${params.userId}, but how do I pass this in the api?

How do I pass the userId to the axios call? Hope I’ve been clear. I’ve extracted very much the code, so if needed I will post all of it.

score 2 · Accepted Answer · edited Sep 09 '19 at 11:14

2

Add the id parameter for the getProfileData function getProfileData(usedId) and include it in the url: url: http://localhost:8000/profile_update/${ DYNAMIC USER ID HERE } (remember to enclose the link with backticks)
Add the id parameter for the setProfileData function: setProfileData({ commit }, userId)
If the id will be a route params, extract it using this.$route.params.userId

Hope this helps.

Use the backtips for the entire url instead of double quotes, and it works.

edited Sep 09 '19 at 11:14

the_flucs

217
1
6
21

answered Sep 09 '19 at 09:21

fh0592x

276
2
8

I tried it this way, but when I set the userId as a parameter in the action it stays grey. How to update it accordingly? I tried ```setProfileData({ commit }, userId) { return getProfileData(userId).then(response => { console.log('RESPONSE setProfileData action dispatch', response) commit('SET_PROFILE_DATA', response.results) }) },``` but the request is not taken dynamic (it's read like this: 'http://localhost:8000/profile_update/$%7Bparams.userId%7D') – the_flucs Sep 09 '19 at 09:38
Also, in the console: unknown action type: user/setProfileData(userId). – the_flucs Sep 09 '19 at 09:45
Did you wrap the url in backticks? Also, if you've added the user module to the main store file, you can refer to it directly `setProfileData(userId)` instead of `user/setProfileData(userId)` Tip: Within `setProfileData`, print `userId` to the console before the return statement to verify its value. – fh0592x Sep 09 '19 at 09:57
The backticks should wrap the entire url or only the dynamic part? In ```export function getProfileData(userId) { return request({ url: 'http://localhost:8000/profile_update/`${params.userId}`', method: 'get', }) }``` the parameter userId stays grey. And still unknown action type, even if the action above (written in the same way - /user/ ) doesn't show error. – the_flucs Sep 09 '19 at 10:04
Apologies. My previous comment was incorrect. From your first comment in this answer, you already set `userId` as a param for the `setProfileData` function. Remember to set it for the `getProfileData` function when you're exporting it `export function getProfileData(userId)`. Once you've set it there, you should be able to refer to it in the url property using ``url: 'http://localhost:8000/profile_update/`${ userId }`'`` – fh0592x Sep 09 '19 at 10:28
It gives unknown action if ```('user/setProfileData(userId)')```. I need to write it as a string and no (). So this sorted. The param userId is sent with the button click (goToUserProfile), but setProfileData get it as undefined (I console log it as you suggested). ```export function getProfileData(userId) { return request({ url: 'http://localhost:8000/profile_update/`${ userId }`', method: 'get', }) }``` is still not giving dynamic id (console: 'http://localhost:8000/profile_update/%60$%7B%20userId%20%7D%60'). The userId inside () is still grey. – the_flucs Sep 09 '19 at 10:38
2

Wrap the entire url with backticks instead of quotes. – fh0592x Sep 09 '19 at 10:41
Ok, something changed. Now it's actually taking the userId dynamically, but as in setProfileData it is undefined, now the request is 'http://localhost:8000/profile_update/undefined'. So, why does it get it undefined? Thanks for you patience @zer0kompression ! – the_flucs Sep 09 '19 at 10:47
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/199176/discussion-between-zer0kompression-and-fdr). – fh0592x Sep 09 '19 at 10:48

How to pass dynamic parameter (ID) to axios api call?

1 Answers1