Replace CancelToken by AbortController

premium/web-frontend/modules/baserow_premium/services/views/kanban.js

@@ -4,7 +4,7 @@ export default (client) => {
       kanbanId,
       limit = 100,
       offset = null,
-      cancelToken = null,
+      signal = null,
       includeFieldOptions = false,
       selectOptions = [],
     }) {
@@ -37,8 +37,8 @@ export default (client) => {
 
       const config = { params }
 
-      if (cancelToken !== null) {
-        config.cancelToken = cancelToken
+      if (signal !== null) {
+        config.signal = signal
       }
 
       return client.get(`/database/views/kanban/${kanbanId}/`, config)

web-frontend/modules/database/services/view/gallery.js

@@ -6,7 +6,7 @@ export default (client) => {
       offset = null,
       includeFieldOptions = false,
       search = false,
-      cancelToken = null,
+      signal = null,
     }) {
       const config = {
         params: {
@@ -15,8 +15,8 @@ export default (client) => {
       }
       const include = []
 
-      if (cancelToken !== null) {
-        config.cancelToken = cancelToken
+      if (signal !== null) {
+        config.signal = signal
       }
 
       if (offset !== null) {
@@ -37,15 +37,15 @@ export default (client) => {
 
       return client.get(`/database/views/gallery/${viewId}/`, config)
     },
-    fetchCount({ viewId, search, cancelToken = null }) {
+    fetchCount({ viewId, search, signal = null }) {
       const config = {
         params: {
           count: true,
         },
       }
 
-      if (cancelToken !== null) {
-        config.cancelToken = cancelToken
+      if (signal !== null) {
+        config.signal = signal
       }
 
       if (search) {

web-frontend/modules/database/services/view/grid.js

@@ -6,7 +6,7 @@ export default (client) => {
       gridId,
       limit = 100,
       offset = null,
-      cancelToken = null,
+      signal = null,
       includeFieldOptions = false,
       includeRowMetadata = true,
       search = false,
@@ -56,8 +56,8 @@ export default (client) => {
 
       const config = { params }
 
-      if (cancelToken !== null) {
-        config.cancelToken = cancelToken
+      if (signal !== null) {
+        config.signal = signal
       }
 
       if (publicAuthToken) {
@@ -70,7 +70,7 @@ export default (client) => {
     fetchCount({
       gridId,
       search,
-      cancelToken = null,
+      signal = null,
       publicUrl = false,
       publicAuthToken = null,
       filters = {},
@@ -90,8 +90,8 @@ export default (client) => {
 
       const config = { params }
 
-      if (cancelToken !== null) {
-        config.cancelToken = cancelToken
+      if (signal !== null) {
+        config.signal = signal
       }
 
       if (publicAuthToken) {

web-frontend/modules/database/store/view/bufferedRows.js

@@ -41,7 +41,7 @@ import RowService from '@baserow/modules/database/services/row'
  * ```
  */
 export default ({ service, customPopulateRow }) => {
-  let lastRequestSource = null
+  let lastRequestController = null
 
   const populateRow = (row) => {
     if (customPopulateRow) {
@@ -323,17 +323,17 @@ export default ({ service, customPopulateRow }) => {
         return
       }
 
-      // We can only make one request at the same time, so we're going to to set the
+      // We can only make one request at the same time, so we're going to set the
       // fetching state to `true` to prevent multiple requests being fired
       // simultaneously.
       commit('SET_FETCHING', true)
-      lastRequestSource = axios.CancelToken.source()
+      lastRequestController = new AbortController()
       try {
         const { data } = await service(this.$client).fetchRows({
           viewId: getters.getViewId,
           offset: rangeToFetch.offset,
           limit: rangeToFetch.limit,
-          cancelToken: lastRequestSource.token,
+          signal: lastRequestController.signal,
           search: getters.getServerSearchTerm,
         })
         commit('UPDATE_ROWS', {
@@ -344,7 +344,7 @@ export default ({ service, customPopulateRow }) => {
         if (axios.isCancel(error)) {
           throw new RefreshCancelledError()
         } else {
-          lastRequestSource = null
+          lastRequestController = null
           throw error
         }
       } finally {
@@ -371,11 +371,11 @@ export default ({ service, customPopulateRow }) => {
       // If another refresh or fetch request is currently running, we need to cancel
       // it because the response is most likely going to be outdated and we don't
       // need it anymore.
-      if (lastRequestSource !== null) {
-        lastRequestSource.cancel('Cancelled in favor of new request')
+      if (lastRequestController !== null) {
+        lastRequestController.abort()
       }
 
-      lastRequestSource = axios.CancelToken.source()
+      lastRequestController = new AbortController()
 
       try {
         // We first need to fetch the count of all rows because we need to know how
@@ -386,7 +386,7 @@ export default ({ service, customPopulateRow }) => {
           data: { count },
         } = await service(this.$client).fetchCount({
           viewId: getters.getViewId,
-          cancelToken: lastRequestSource.token,
+          signal: lastRequestController.signal,
           search: getters.getServerSearchTerm,
         })
 
@@ -426,7 +426,7 @@ export default ({ service, customPopulateRow }) => {
             offset: rangeToFetch.offset,
             limit: rangeToFetch.limit,
             includeFieldOptions,
-            cancelToken: lastRequestSource.token,
+            signal: lastRequestController.signal,
             search: getters.getServerSearchTerm,
           })
 
@@ -441,7 +441,7 @@ export default ({ service, customPopulateRow }) => {
         if (axios.isCancel(error)) {
           throw new RefreshCancelledError()
         } else {
-          lastRequestSource = null
+          lastRequestController = null
           throw error
         }
       } finally {

web-frontend/modules/database/store/view/grid.js

@@ -491,8 +491,8 @@ let lastRequest = null
 let lastRequestOffset = null
 let lastRequestLimit = null
 let lastRefreshRequest = null
-let lastRefreshRequestSource = null
-let lastSource = null
+let lastRefreshRequestController = null
+let lastQueryController = null
 
 // We want to cancel previous aggregation request before creating a new one.
 const lastAggregationRequest = { request: null, controller: null }
@@ -597,20 +597,20 @@ export const actions = {
       // If another request is runnig we need to cancel that one because it won't
       // what we need at the moment.
       if (lastRequest !== null) {
-        lastSource.cancel('Canceled in favor of new request')
+        lastQueryController.abort()
       }
 
       // Doing the actual request and remember what we are requesting so we can compare
       // it when making a new request.
       lastRequestOffset = requestOffset
       lastRequestLimit = requestLimit
-      lastSource = axios.CancelToken.source()
+      lastQueryController = new AbortController()
       lastRequest = GridService(this.$client)
         .fetchRows({
           gridId,
           offset: requestOffset,
           limit: requestLimit,
-          cancelToken: lastSource.token,
+          signal: lastQueryController.signal,
           search: getters.getServerSearchTerm,
           publicUrl: getters.isPublic,
           publicAuthToken: getters.getPublicAuthToken,
@@ -811,15 +811,16 @@ export const actions = {
     { view, fields, primary, includeFieldOptions = false }
   ) {
     const gridId = getters.getLastGridId
+
     if (lastRefreshRequest !== null) {
-      lastRefreshRequestSource.cancel('Cancelled in favor of new request')
+      lastRefreshRequestController.abort()
     }
-    lastRefreshRequestSource = axios.CancelToken.source()
+    lastRefreshRequestController = new AbortController()
     lastRefreshRequest = GridService(this.$client)
       .fetchCount({
         gridId,
         search: getters.getServerSearchTerm,
-        cancelToken: lastRefreshRequestSource.token,
+        signal: lastRefreshRequestController.signal,
         publicUrl: getters.isPublic,
         publicAuthToken: getters.getPublicAuthToken,
         filters: getFilters(getters, rootGetters),
@@ -842,7 +843,7 @@ export const actions = {
             offset,
             limit,
             includeFieldOptions,
-            cancelToken: lastRefreshRequestSource.token,
+            signal: lastRefreshRequestController.signal,
             search: getters.getServerSearchTerm,
             publicUrl: getters.isPublic,
             publicAuthToken: getters.getPublicAuthToken,