How to do API calls using an array of indexes / page IDs?

Question

Here is my code: https://github.com/d0uble-happiness/DiscogsCsvVue

App.vue

 <template>
   <div>
     <FileUpload @file="setFile" />
     <ParseCsvToArray v-if="file" :file="file" />
     <ProcessReleaseData />
     <FetchRelease />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
 import FileUpload from './components/FileUpload.vue'
 import ParseCsvToArray from './components/ParseCsvToArray.vue'
 import ProcessReleaseData from './components/ProcessReleaseData.vue'
 import FetchRelease from './components/FetchRelease.vue'
 
 export default defineComponent({
   name: 'App',
   components: {
     FileUpload,
     ParseCsvToArray,
     ProcessReleaseData,
     FetchRelease
   },
   data() {
     return {
       file: null as null | File,
     }
   },
   methods: {
     setFile(file: File) {
       console.log("Received file:", file)
       this.file = file;
     }
   },
   mounted() {
     console.log("mounted");
   },
 });
 </script>
 
 <style></style>
 

ParseCsvToArray.vue

 <template>
   <div>
     <p v-for="row of parsedData" v-bind:key="row.id">
       {{ row }}
     </p>
   </div>
 </template>
 
 <script lang="ts">
 
 import { defineComponent } from 'vue'
 import Papa from 'papaparse';
 import ROW_NAMES from './RowNames.vue'
 
 export default defineComponent({
   name: 'ParseCsvToArray',
   props: {
     file: File
   },
   data() {
     return {
       parsedData: [] as any[],
       rowNames: ROW_NAMES
     }
   },
   methods: {
     parseCsvToArray(file: File) {
       Papa.parse(file, {
         header: false,
         complete: (results: Papa.ParseResult<any>) => {
           console.log('Parsed: ', results.data);
           this.parsedData = results.data;
         }
       });
     }
   },
   mounted() {
     if (this.file) {
       this.parseCsvToArray(this.file);
     }
   },
 });
 
 </script>
 
 <style></style>
 

FetchRelease.vue

 <template>
   <label>Fetch release</label>
 </template>
 
 <script lang="ts">
 import { DiscogsClient } from '@lionralfs/discogs-client';
 import ProcessReleaseData from './ProcessReleaseData.vue'
 import { defineComponent } from 'vue'
 // import { defineAsyncComponent } from 'vue'
 
 export default defineComponent ({
   name: 'FetchRelease',
   methods: {
     fetchRelease
   }
 });
 
 const db = new DiscogsClient().database();
 
 // const AsyncComp = defineAsyncComponent(() => {
 //   return new Promise((resolve, reject) => {
 //     // ...load component from server
 //     resolve(/* loaded component */)
 //   })
 // })
 
 async function fetchRelease(releaseId: string): Promise<any[] | { error: string }> {
   try {
     const { data } = await db.getRelease(releaseId);
     return ProcessReleaseData(releaseId, data);
   } catch (error) {
     return {
       error: `Release with ID ${releaseId} does not exist`
     };
   }
 }
 
 </script>
 
 <style></style>

ProcessReleaseData.vue

 <template>
   <label>Process release data</label>
 </template>
 
 <script lang="ts">
 
 import { type GetReleaseResponse } from '@lionralfs/discogs-client/types/types';
 
 export default {
   name: 'ProcessReleaseData',
   methods: {
     processReleaseData
   },
   data() {
     return {
       // formattedData
     }
   },
 };
 
 function processReleaseData(releaseId: string, data: GetReleaseResponse) {
 
   const { country = 'Unknown', genres = [], styles = [], year = 'Unknown' } = data;
   const artists = data.artists?.map?.(artist => artist.name);
   const barcode = data.identifiers.filter(id => id.type === 'Barcode').map(barcode => barcode.value);
   const catno = data.labels.map(catno => catno.catno);
   const uniqueCatno = [...new Set(catno)];
   const descriptions = data.formats.map(descriptions => descriptions.descriptions);
   const format = data.formats.map(format => format.name);
   const labels = data.labels.map(label => label.name);
   const uniqueLabels = [...new Set(labels)];
   const qty = data.formats.map(format => format.qty);
   const tracklist = data.tracklist.map(track => track.title);
   // const delimiter = document.getElementById('delimiter').value || '|';
   const delimiter = '|';
   const formattedBarcode = barcode.join(delimiter);
   const formattedCatNo = uniqueCatno.join(delimiter);
   const formattedGenres = genres.join(delimiter);
   const formattedLabels = uniqueLabels.join(delimiter);
   const formattedStyles = styles.join(delimiter);
   const formattedTracklist = tracklist.join(delimiter);
   const preformattedDescriptions = descriptions.toString().replace('"', '""').replace(/,/g, ', ');
   const formattedDescriptions = '"' + preformattedDescriptions + '"';
   const formattedData: any[] = [
     releaseId,
     artists,
     format,
     qty,
     formattedDescriptions,
     formattedLabels,
     formattedCatNo,
     country,
     year,
     formattedGenres,
     formattedStyles,
     formattedBarcode,
     formattedTracklist
   ];
 
   return formattedData;
 }
 
 </script>
 
 <style></style>

AFAIK I want to take the parsedData (which will be an array of integers), and pass it on to FetchRelease, to do API calls using ProcessReleaseData.

At the moment, return ProcessReleaseData is throwing this error:

Value of type 'DefineComponent<{}, {}, {}, {}, { processReleaseData: (releaseId: string, data: GetReleaseResponse) => any[]; }, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>' is not callable. Did you mean to include 'new'?

...but VSCode's suggested fix doesn't solve it.

I was told...

Two ways to go about this - js/ts file that is a shared “helper” or something and exports the function, or include the component, give it a ref and access function through components ref.

...but I really don't know how to do that?

I was wondering if it could possibly be something as simple as...

 const AsyncComp = defineAsyncComponent(() => {
   return new Promise((resolve, reject) => {
     // ...load component from server
     component: import('./ProcessReleaseData.vue'),
     resolve(ProcessReleaseData)
   })
 })

...but that throws this error:

Argument of type 'DefineComponent<{}, {}, {}, {}, { processReleaseData: (releaseId: string, data: GetReleaseResponse) => any[]; }, ComponentOptionsMixin, ComponentOptionsMixin, ... 5 more ..., {}>' is not assignable to parameter of type '{ default: never; } | PromiseLike<{ default: never; }>'.

Any help please? TIA

Edit: the project now won't compile at all, and I am now getting this:

14:03:49 [vite] Pre-transform error: Transform failed with 1 error: D:/MY DOCUMENTS/CODE/DISCOGS API CLIENT/DiscogsCsvVue/src/components/FetchRelease.vue:12:1: ERROR: Expected ";" but found ")"

I can't find any such error though, I am completely at a loss at this stage.