Nuxt•10mo ago

useFetch help - not working/fetching data

hey I might be using this completely wrong because im still new to nuxtjs but here goes: I am trying to use useFetch for getting data from https://valorant-api.com but it is not working. When I use old regular fetch it works with no problems and I don't know why useFetch is not working with the valorant-api. Because it works with now problem when I use it with the https://fakestoreapi.com/ api. here is the code:

<template>
  <div>

    <div class="grid grid-cols-4 gap-5">
        <div v-for="a in products"> //<- replace products with agents when using valorant-api
          <h3 class="text-red-500 font-bold text-2xl">{{a.displayName }}</h3>
          <img class="rounded-3xl" :src="a.image" :alt="a.displayName" /> //<-- if using valorant-api replace with: "a.displayIcon"
          <h3 class="text-red-500 font-bold">Info:</h3>
          <p>{{a.description}}</p>
        </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>

// fetch agents
// uncomment this block for fetching data from valorant-api
// let url = 'https://valorant-api.com/v1/agents'
// const parameters = {"isPlayableCharacter":"true"}
// const queryParams = new URLSearchParams(parameters)
// url += `?${queryParams.toString()}`
// const headers = {
//     'Content-Type': 'application/json'
// }

// works
// const agents = ref([])
// onMounted(async () => {
//     const response = await fetch(url, {
//         method: 'GET',
//         headers: headers
//     })
//     const data = await response.json()
//     agents.value = data.data
// })

// does not work 
// const { data: agents} = await useFetch(url, {
//   method: 'GET',
//   headers: headers
// })

// fetch fake products
const {data: products} = await useFetch('https://fakestoreapi.com/products')


</script>

<style lang="scss" scoped>

</style>

<template>
  <div>

    <div class="grid grid-cols-4 gap-5">
        <div v-for="a in products"> //<- replace products with agents when using valorant-api
          <h3 class="text-red-500 font-bold text-2xl">{{a.displayName }}</h3>
          <img class="rounded-3xl" :src="a.image" :alt="a.displayName" /> //<-- if using valorant-api replace with: "a.displayIcon"
          <h3 class="text-red-500 font-bold">Info:</h3>
          <p>{{a.description}}</p>
        </div>
    </div>
    
  </div>
</template>

<script lang="ts" setup>

// fetch agents
// uncomment this block for fetching data from valorant-api
// let url = 'https://valorant-api.com/v1/agents'
// const parameters = {"isPlayableCharacter":"true"}
// const queryParams = new URLSearchParams(parameters)
// url += `?${queryParams.toString()}`
// const headers = {
//     'Content-Type': 'application/json'
// }

// works
// const agents = ref([])
// onMounted(async () => {
//     const response = await fetch(url, {
//         method: 'GET',
//         headers: headers
//     })
//     const data = await response.json()
//     agents.value = data.data
// })

// does not work 
// const { data: agents} = await useFetch(url, {
//   method: 'GET',
//   headers: headers
// })

// fetch fake products
const {data: products} = await useFetch('https://fakestoreapi.com/products')


</script>

<style lang="scss" scoped>

</style>

Valorant-API

An extensive API containing data of most in-game items, assets and more!

Fake Store API

Fake store rest api for your ecommerce or shopping website prototype

5 Replies

Adi_•10mo ago

give it a read and see if it helps https://nuxt.com/docs/api/composables/use-fetch

Nuxt

useFetch · Nuxt Composables

Fetch data from an API endpoint with a SSR-friendly composable.

YassaaaOP•10mo ago

I tried reading it but it did not really help. But I did find out that the useFetch is actually working but I believe its returning the data as a string because when I outputed agents i got everything as a string. but when I try to access values within the data i cant because its undefined. soo yea I got it working with the regular fetch for now

Adi_•10mo ago

Okay great 😃. I like using useFetch becoz it only runs on the server side and the same data is carried forward to the client side. The simple fetch would call the api 2 times server & client. If the data returned is a string you can use JSON.parse(<string>) to make it an object

YassaaaOP•10mo ago

I see thanks! I will try this when I get home well I found out that the data I get from the api is already a JS object (i think?) and when I specify the uuid of the map or the agent and then requst the displayName or splash etc... then it works but there seems to be a problem for when I want it to fetch all the data from the api (all the maps or agents) and not only 1 map or agent. When I useFetch all tha agents/maps instead of one it does not show me anything. When I try to parse it I get 500 "[object Object]" is not valid JSON now I am confused why its not working when I want to get the whole list of agents/maps

Adi_•10mo ago

I am not sure what could be the extact reason for this 🤔. If you are saying $fetch works for you, use inside asyncData it would behave same as useFetch i.e. only render in the server side. try parsing using this JSON.parse(JSON.stringify(response))

Gaming

Programming

useFetch help - not working/fetching data