Vue 3 + Pinia - best way to handle API filtering, fetching, sorting, pagination

[LadIQe]

Hello community, sorry for my too long post, but Im struggling big time.

Im again working with my love (Vue) after 1yr break (had to work with angular).

So I have started to learn everything from scratch and also trying to code something. But, I found some new things, which are new to me and now Im confused (maybe because of angular, who knows).

What is the best way to handle API calls with sorting, filtering and pagination?

I want to store pagination and filters in Pinia store (and url as query params), something like that

const state = reactive<ReceiverStore>({
    data: [],
    pagination: {
      page: 1,
      rowsPerPage: 5,
      rowsNumber: 0
    },
    filters: {
      type: null,
      from: '2000-01-01',
      to: '9999-01-01'
    },
    isLoading: false
  })

return {
    ...toRefs(state),
    fetchList,
    setFilters
  }

Now, I have parent (page) component, where I "install" store like this and pass down store state through props to my child components.
const receiverStore = useReceiverStore()

Now I have child component with table and filters (inputs, selects, etc), with props definition

const props = defineProps<{
  data: ReceiverItem[]
  pagination: Pagination
  filters: ReceiverFilters
  isLoading: boolean
}>()

Here is table with filtering with some description

<q-select
  v-model="filters.type" <= how to use filters like this from props??
  clearable
  :label="t('receiverTable.filters.typeSelectPlaceholder')"
  :options="typeOptions"
  style="width: 150px"
/>

<q-table
    v-model:pagination="pagination" <= how to use pagination like this from props??
    flat
    row-key="id"
    :title="t('receiverTable.name')"
    :columns="columns"
    :rows="props.data"
    :loading="props.isLoading"
    :rows-per-page-options="[5, 10, 25, 50, 100]"
    :filter="filters" <= how to use filters like this from props??
    @request="tableRequest"
  >

Now thing is, that when I change some filters, my table (quasar table) should fire @reguest emit, which collects all filters and pagination like this

const tableRequest: QTableProps['onRequest'] = ({ pagination, filter }) => {
  const type = filter.type as ReceiverType
  const from = filter.from as string
  const to = filter.to as string

  emit('filter-change', {
    page: pagination.page,
    rowsPerPage: pagination.rowsPerPage,
    type: type || undefined,
    from: from || undefined,
    to: to || undefined
  })
}

This emit is handled by parent component, which pushes this filters to route query
router.push({ query: filters })

which are then collected by router and passed down as props to parent (page) component

{
  path: 'receiver-list',
  name: RouteName.RECEIVER_LIST,
  component: () => import('pages/TheReceiverList.vue'),
  props: route => ({ filters: parseReceiverQuery(route.query) })
}

In parent component, there is watchEffect, which sets filters in Pinia store and call fetch

onMounted(() => {
  watchEffect(() => {
    receiverStore.setFilters(props.filters)
    receiverStore.fetchList()
  })
})

Now question is, is this anti-pattern? I was working with angular where this was preferred way to handle url filters (I was new to angular, so I didnt know if this is the best way to work with) and this pattern somehow got its way to my test project.

Thank you

[stephenhebert]

This repo is the best example I've found for using pinia and vue-query together https://github.com/elvisss/vue-clients-useQuery-pinia/blob/master/src/clients/composables/useClients.ts