Page 1 of 1

[VUE 2] Custom GraphQL client with AjaxStore

Posted: Tue Feb 07, 2023 9:18 pm
by mattt

I'm trying to use the PagingToolbar which has a dependency on AjaxStore. Is there a way to easily override the behaviour of AjaxStore to support loading data and paginating with a provided GraphQL client?

Currently I've been fetching data using GrapgQL and providing it to the data prop directly on the bryntum-grid component. While the data is loading how do I display loadingMsg?


Re: [VUE 2] Custom GraphQL client with AjaxStore

Posted: Tue Feb 07, 2023 9:42 pm
by marcio

Hey mattt,

Perhaps you can use the https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#event-beforeRequest event and display the loadingMsg? From the AjaxStore you could also check when it's on loading state https://bryntum.com/products/grid/docs/api/Core/data/AjaxStore#property-isLoading

If you could provide a sample project with your current configuration would be easier for us to assist you on this.

You can check the guidelines here https://www.bryntum.com/forum/viewtopic.php?f=1&t=772


Re: [VUE 2] Custom GraphQL client with AjaxStore

Posted: Wed Feb 08, 2023 2:01 am
by mattt

I'm fetching the data with a GraphQL client so I need to a way of setting the isLoading property directly. I was able to get the table to display the loading mask and load data by subclassing Store. The issue I have now is the loading mask stays in place when isLoading is set to false after the fetchData method has completed.

Could you explain how AjaxStore updates the table loading state in Grid?

<template>
  <div class="table-container">
    <bryntum-grid
      ref="grid"
      v-bind="gridConfig"
      :store="gridStore"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, Ref } from 'vue'
import { BryntumGrid } from '@bryntum/grid-vue'
import { Store } from '@bryntum/grid'
import client from 'admin/lib/client'
import { useRemoteData } from 'shared/lib/remote-data'

class CustomStore extends Store {
  isLoading: boolean

  constructor ({ data, isLoading }) {
    super({ data })
    this.isLoading = isLoading
  }
}

export default defineComponent({
  name: 'Table',
  components: {
    BryntumGrid
  },
  setup () {
    const grid = ref(null)
    const gridStore = new CustomStore(reactive({ data: [], isLoading: false }))
    const tableColumns = [
      { field: 'name', text: 'Name', width: '15%' },
      { field: 'accountType', text: 'Firm Type', width: '10%' },
      { field: 'subscriptions.nodes.length', text: 'Subscriptions', width: '10%' },
      { field: 'seats', text: 'Seats', width: '10%' },
      { field: 'startDate', text: 'Start Date', width: '10%' },
      { field: 'endDate', text: 'Renewal Date', width: '10%' },
      { field: 'ownerEmail', text: 'Account Owner', width: '15%' },
      { field: 'salesExecutive', text: 'Sales Executive', width: '10%' },
      { field: 'customerStatus', text: 'Status', width: '10%' }
    ]
    const config = () => {
      return {
        columns: tableColumns,
        features: { filter: true, cellEdit: false, cellMenu: false, headerMenu: false },
        loadingMsg: 'Loading.....',
        animateRemovingRows: false
      }
    }
    const gridConfig = reactive(config())
    const limit = ref(50)
    const previousCursor: Ref<string | null | undefined> = ref(null)
    const nextCursor: Ref<string | null | undefined> = ref(null)
    const client_ = ref(useRemoteData(client))

    const loading = computed(() => {
      return (client_.value.state.type === 'Loading' || client_.value.state.type === 'NotAsked')
    })

    const hasPreviousPage = computed(() => {
      if (client_.value.state.type === 'Success') {
        return client_.value.state.data?.pageInfo.hasPreviousPage
      }
      return false
    })

    const hasNextPage = computed(() => {
      if (client_.value.state.type === 'Success') {
        return client_.value.state.data?.pageInfo.hasNextPage
      }
      return false
    })

    const fetchData = async (pagination: Record<string, string | null | undefined | number> = { first: limit.value }) => {
      gridStore.isLoading = true
      previousCursor.value = nextCursor.value
      const variables: QueryArgs = { ...pagination }

      await client_.value.fetch(variables)
      if (client_.value.state.type === 'Success') {
        nextCursor.value = client_.value.state.data?.pageInfo.endCursor
        gridStore.data = client_.value.state.data?.nodes
        gridStore.isLoading = false
      }
    }

    onMounted(async () => {
      await fetchData()
    })

    return {
      grid,
      gridConfig,
      gridStore
    }
  }
})
</script>

Re: [VUE 2] Custom GraphQL client with AjaxStore

Posted: Thu Feb 09, 2023 3:15 am
by alex.l

Why don't you use https://bryntum.com/products/grid/docs/api/Grid/view/Grid#function-mask and https://bryntum.com/products/grid/docs/api/Grid/view/Grid#function-unmask for grid directly? It seems to be much easier than override store. As I understood, your store is not in loading state in fact, but you switch flags manually only to show load mask?