Skip to content

useQuery ‚Äč

This composable is responsible for interpreting and creating queries for viewing data in tables. The method of operation is based on response interfaces from the server which provides all the necessary information about the data result.

ts
export interface Response {
  first: number
  last: number
  limit: number
  next: number
  offset: number
  page: number
  pages: number
  prev: number
  rows: Array<Record<string, unknown>>
  sql: Array<Record<string, unknown>>
  total: number
}

Standard use may look like this:

ts
// All possible information from useQuery
const { 
  query,
  clearData,
  loadQueryString,
  loadQuery,
  loadPage,
  loadLimit,
  loadRefresh,
  loadSetSortActive,
  loadSetSort,
  loadClearSort,
  setParam,
  getParam
} = useQuery()

// Setting the number of records, reading the search parameters and data download
const readAllItems = async () =>  {
  try{
    loadLimit(12, false)
    return await api.readAllItemsFromApi(loadQueryString()) 
  } catch {
    // error information
  }
}

// cleaning data when installing and loading data
onMounted(() => {
  clearData()
  loadQuery(readAllItems)
})

useQuery should be used in the view where the received data will then be displayed using table components.