UseInfiniteQuery fetchNextPage() methos doesn't work on <script>

[shoaibsharif]

I have been trying to use UseInfiniteQuery method in <script setup> butt I just keep getting error

Uncaught TypeError: fetchNextPage is not a function

Live Demo: https://stackblitz.com/edit/vitejs-vite-yx2juo?file=src%2FApp.vue&terminal=dev

Note: I also am not able to use other variables as well, but I can use them inside the DOM. I don't think this is something we are expecting?

[wobsoriano]

Functions are refs so you have to add .value to it

fetchNextPage.value()

[DamianOsipiuk]

@shoaibsharif This is something that needs to be fixed in v2, as it's kind of unexpected that functions are returned as refs.

[shoaibsharif]

@DamianOsipiuk Then what about for data? I can't get acess to that either. I get undefined when I am trying to get data in <script> tag. It works find in the DOM.

[wobsoriano]

@DamianOsipiuk Then what about for data? I can't get acess to that either. I get undefined when I am trying to get data in <script> tag. It works find in the DOM.

Everything is a ref.

[shoaibsharif]

@wobsoriano , data.value is not working either. Check the same demo, where I am trying to access data.value.pages but I keep getting undefined console.

[wobsoriano]

@wobsoriano , data.value is not working either. Check the same demo, where I am trying to access data.value.pages but I keep getting undefined console.

Because like react-query, if there's no cached data then you will always get undefined. Try to use a watcher and see the value of data change.

[shoaibsharif]

Because like react-query, if there's no cached data then you will always get undefined. Try to use a watcher and see the value of data change.

I think you should check the demo, I am trying to access the data after I click the button and that point I have data cached.

[wobsoriano]

FYI Optional Chaining doesn't work on templates. Remove that and it should work.

[shoaibsharif]

Also was trying to get the data on watch. This is what I was trying to do:

watch(data, (newValue) => {
  console.log(newValue.pages[0].map((a) => a.id));
});

I keep getting error

newValue.pages[0].map is not a function

FYI Optional Chaining doesn't work on templates. Remove that and it should work.

In Vue3 optional chaining works. If I remove the optional chaining from the demo, it will throw me an error. Try it out.

[wobsoriano]

I am talking about your optional chaining in template. Vue templates don't have that feature yet. This will not work:

<template v-for="page in data?.pages" :key="page.id">

Also, like I said, data will be undefined at first, so if you want to use a watcher you can use optional chaining or

watch(data, (newValue) => {
  if (newValue) { // Check if newValue has value
    console.log(newValue.pages[0].map((a) => a.id));
  }
});

[shoaibsharif]

This video should explain what errors I am getting. Also, I showed that the optional chaining works (at least to me). You can this out: https://stackoverflow.com/a/68609994/11976847. Also, I still keep getting error when I am trying to access data in <script> tag.

https://www.loom.com/share/da2fea0d1aeb4bbb93e6c210227316a7

[wobsoriano]

https://stackoverflow.com/a/68609994/11976847

That compiler only works for Vue 2 and Webpack, your project is Vue 3 and Vite. How is that working?

[DamianOsipiuk]

@shoaibsharif I think the simplest solution for you would be to compute pages before passing it to template:

const pages = computed(() => data.value?.pages)

And use pages in the template instead of data.pages.

<template v-for="page in pages" :key="page.id">

Checked on your demo and it works as expected.