how to read the data asynchronously

[Prashant Nirgun]

I tried to read the data just bellow the useSWRV it return the error. My code is as bellow when I refresh the page it get failed. If I checked network tab it receives response properly. it works smoothly with if we execute it with button onClick. I am using Quasar.js. What I am doing wrong over here. await is not working over here I want to run it with axios library.

import { onMounted, ref } from "vue";
import { api } from "src/boot/axios";
import useSWRV from "swrv";

//const fetcher = (...args) => gr(...args);
const fetcher = (key) =>
  fetch(key)
    .then((resp) => {
      return resp && resp.json();
    })
    .then((data) => {
      if (data.message) {
        throw new Error(data.message);
      }
      return data;
    });

export default {
  name: "UnitPage",
  setup() {
    const routeName = "http://localhost:3030/units";
    const rows = ref([]);
    onMounted(() => {
      const { data, error } = useSWRV(routeName, fetcher);
      console.log("whats is data", data);
      //rows.value = data.value.data;
    });

    return { rows };
  },
};

Axios is returning following response which is correct

{
    "total": 6,
    "limit": 10,
    "skip": 0,
    "data": [ {...}, {...}, {...}, {...}, {...}, {...} ]
}

[Adam DeHaven]

You cannot call useSwrv within the onMounted hook; it must be called at the root of your setup function.

[Prashant Nirgun]

no it still failed. Is it works at your end ?

setup() {
    const routeName = "http://localhost:3030/units";
    const rows = ref([]);
    const fetcher = (...args) => fetch(...args).then((data) => data.json());
    const { data, error } = useSWRV(routeName, fetcher);
    console.log("whats is data", data.value);
    return { rows };
  }

[Adam DeHaven]

If you can put together a reproduction on CodeCandbox or something similar, I can take a closer look

[Prashant Nirgun]

https://stackblitz.com/edit/quasarframework-webpack-vv2kyu?file=src%2Fpages%2FIndexPage.vue here is the link. Problem : go to console of the page click browser refresh you will find the console.log('whats is data', data.value); is returning undefined. so it could be a promise we simply need to await it. data is fetching but it I want to transform the fetch result that is now allowing. useFetch() of Nuxt we did the similar thing. report me if the link has any issue

[Adam DeHaven]

Your console.log is executed immediately; it doesn't wait for the async fetcher call to complete, so when it fires, data is undefined.

You could modify your example to this, and it will work:

import { ref, watch } from 'vue';
import useSWRV from 'swrv';
const fetcher = (...args) => fetch(...args).then((data) => data.json());
const routeName = 'https://fakestoreapi.com/products';
const rows = ref([]);
const { data, error } = useSWRV(routeName, fetcher);

// Fires immediately, will be `undefined`
console.log('whats is data', data.value);

// Triggered when the value of `data` is updated
watch(data, (newVal) => {
  console.log('watcher', newVal);
});

[Prashant Nirgun]

Thanks @adamdehaven it works. I am closing the thread