rival-black

Help with vue query together vue table

Hi, i need help with my implementation of vue query. I try to fetch data for my useVueTable data. The problem is that either it executes the query infinite times or the data is not shown in the table.

function fetchTickets(page?: number, filter_title?: string, sort?: "title" | "created_at" | "updated_at" | "status" | "-title" | "-created_at" | "-updated_at" | "-status") {
  return axios.get(route('user.tickets.all', {
    "sort": sort, "filter[title]": filter_title, "page": page
  }))
}


function ticketQuery(page?: number, filter_title?: string, sort?: "title" | "created_at" | "updated_at" | "status" | "-title" | "-created_at" | "-updated_at" | "-status") {
  return useQuery({
    queryKey: ['tickets', page, filter_title, sort],
    queryFn: async () => {
      const d = await fetchTickets(page, filter_title, sort)
      console.log(d.data)
      return d.data
    },
    refetchOnMount: false
  })
}


const table = useVueTable({
      get data() {
        return ticketQuery(1).data?.data ?? []
      },
      columns: columns,
      getCoreRowModel: getCoreRowModel(),
    }
)

function fetchTickets(page?: number, filter_title?: string, sort?: "title" | "created_at" | "updated_at" | "status" | "-title" | "-created_at" | "-updated_at" | "-status") {
  return axios.get(route('user.tickets.all', {
    "sort": sort, "filter[title]": filter_title, "page": page
  }))
}


function ticketQuery(page?: number, filter_title?: string, sort?: "title" | "created_at" | "updated_at" | "status" | "-title" | "-created_at" | "-updated_at" | "-status") {
  return useQuery({
    queryKey: ['tickets', page, filter_title, sort],
    queryFn: async () => {
      const d = await fetchTickets(page, filter_title, sort)
      console.log(d.data)
      return d.data
    },
    refetchOnMount: false
  })
}


const table = useVueTable({
      get data() {
        return ticketQuery(1).data?.data ?? []
      },
      columns: columns,
      getCoreRowModel: getCoreRowModel(),
    }
)

and the table is used like this (it is given to a different component):

 <DataTable :table="table"/>

 <DataTable :table="table"/>

The datatable is basically the one provided by shadcn vue. and i also see these errors

vue-query composable like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.

vue-query composable like "useQuery()" should only be used inside a "setup()" function or a running effect scope. They might otherwise lead to memory leaks.

[Vue warn] onScopeDispose() is called when there is no active effect scope to be associated with.

Thanks for help

4 Replies

adverse-sapphire•16mo ago

move your ticketQuery usage outside of useVueTable

const ticketData = ticketQuery(...);

const table = useVueTable({
      get data() {
        return ticketData.value;
      },
      columns: columns,
      getCoreRowModel: getCoreRowModel(),
    }
)

const ticketData = ticketQuery(...);

const table = useVueTable({
      get data() {
        return ticketData.value;
      },
      columns: columns,
      getCoreRowModel: getCoreRowModel(),
    }
)

error you're seeing says exactly that well, there's obviously type issue in my code, but you should get an idea

rival-blackOP•16mo ago

thanks, it worked. But before i try my next thing, do you know if by using this, i can still use the querry for eg server side pagination, using a custom pagination model like this: https://tanstack.com/table/v8/docs/guide/pagination#manual-server-side-pagination

Pagination Guide | TanStack Table Docs

Examples Want to skip to the implementation? Check out these examples:

adverse-sapphire•16mo ago

i haven't worked with pagination in tanstack table yet, it should absolutely work though keep in mind that your ticketQuery is breaking reactivity right now by not using ref for page number

function ticketQuery(page?: Ref<number>) {
  return useQuery({
    // don't unwrap page ref with .value here, pass ref in queryKey directly so query can detect changes
    queryKey: ['tickets', page, ...],
    //...
  })
}

const currentPage = ref(1);

function goNextPage() {
  currentPage.value++;
}

function ticketQuery(page?: Ref<number>) {
  return useQuery({
    // don't unwrap page ref with .value here, pass ref in queryKey directly so query can detect changes
    queryKey: ['tickets', page, ...],
    //...
  })
}

const currentPage = ref(1);

function goNextPage() {
  currentPage.value++;
}

rival-blackOP•16mo ago

i haven't worked with pagination in tanstack table yet, it should absolutely work though

Ok thanks

Gaming

Programming

Help with vue query together vue table

Did you find this page helpful?