how to pass query strings to get requests with fetch api

Question

so im dispatching an action after login and using a getter to retrieve credential information that is used to initiate another fetch request. the request is going to the server correctly, and the getter is returning the appropriate data, however req.query on the server just returns [object Object]. this is the code:

getter in component:

  created () {
    this.$store.dispatch('user/setFriends', {email: this.userInfo.email})
  },
  computed: {
 ...mapGetters('user', {
   userInfo: 'user_info'
  })
}

actions:

async setFriends ({
commit
}, email) {
  try {
    let request = new Request(`http://localhost:3000/users?id=${encodeURIComponent(email)}`)
    await fetch(request)
    await (r => r.data)
    await (r => commit('setFriends', r))
  } catch (error) {
    console.error(error.r)
  }
}

route handler

router.get('/', function (req, res, next) {
  console.log(req.query.id)
});

other attempt at fetch request

  var url = new URL('http://localhost:3000/users')
  var params = {
    id: email
  }
  url.search = new URLSearchParams(params)

  await fetch(url)

i also read this link Setting query string using Fetch GET request when consulting how to write query strings with fetch. any help would be appreciated, thanks

score 0 · Answer 1 · answered Jul 03 '18 at 05:48

the problem here is that the payload when dispatching the action does not need to be passed as an object, instead of passing of

created () {
this.$store.dispatch('user/setFriends', {email: this.userInfo.email})
},

simply the value

created () {
this.$store.dispatch('user/setFriends', this.userInfo.email)
},

how to pass query strings to get requests with fetch api

1 Answers1