changed from apolloclient to graphql-request

app.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { initializeApollo } from './utils/apollo.js'
+import { initializeGqlClient } from './utils/graphql.js'
 
-initializeApollo()
+initializeGqlClient()
 </script>
+./utils/graphql.js

components/SearchBar.vue

@@ -63,7 +63,7 @@ const locationsStore = useLocationsStore()
 const searchResultsStore = useSearchResultsStore()
 const specialtiesStore = useSpecialtiesStore()
 
-locationsStore.fetchLocations()
+await locationsStore.fetchLocations()
 
 const languageOptions = [{
     code: '',
@@ -83,11 +83,11 @@ watchEffect(() => {
     locationDropdownOptions.value = locationsStore.citiesDisplayOptions
 })
 
-function search() {
+async function search() {
     const blankRemovedLocation = selectedLocation.value == '----Any----' ? '' : selectedLocation.value
     const blankRemovedSpecialty = selectedSpecialty.value == '----Any----' ? undefined : selectedSpecialty.value as Specialty
     const blankRemovedLanguage = selectedLanguage.value == '----Any----' ? undefined : selectedLanguage.value as Locale
 
-    searchResultsStore.search(blankRemovedLocation, blankRemovedSpecialty, blankRemovedLanguage)
+    await searchResultsStore.search(blankRemovedLocation, blankRemovedSpecialty, blankRemovedLanguage)
 }
 </script>

components/SubmissionForm.vue

@@ -78,9 +78,9 @@
 </template>
 
   <script lang="ts" setup>
-import { useSubmissionStore } from "~/stores/submissionStore";
-import { useLocaleStore } from "~/stores/localeStore";
+import { useSubmissionStore } from "~/stores/submissionStore"
+import { useLocaleStore } from "~/stores/localeStore"
 
-const submissionStore = useSubmissionStore();
-const localeStore = useLocaleStore();
+const submissionStore = useSubmissionStore()
+const localeStore = useLocaleStore()
 </script>

package.json

@@ -22,10 +22,9 @@
     },
     "type": "module",
     "dependencies": {
-        "@apollo/client": "^3.8.8",
         "@pinia/nuxt": "^0.5.1",
-        "@vue/apollo-composable": "^4.0.0-beta.12",
         "graphql": "^16.8.1",
+        "graphql-request": "^6.1.0",
         "pinia": "^2.1.7",
         "typescript-eslint": "^7.1.1",
         "vue": "^3.3.10",
@@ -45,8 +44,8 @@
         "@stylistic/eslint-plugin": "^1.6.0",
         "@swc/core": "^1.3.100",
         "@testing-library/vue": "^6.6.1",
-        "@vitejs/plugin-vue": "^4.5.1",
-        "@vitest/coverage-v8": "^1.0.1",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vitest/coverage-v8": "^1.4.0",
         "@vue/test-utils": "^2.2.6",
         "all-contributors-cli": "^6.24.0",
         "autoprefixer": "^10.4.16",
@@ -68,7 +67,7 @@
         "stylelint-order": "^6.0.0",
         "tailwindcss": "^3.3.5",
         "typescript": "^5.3.2",
-        "vitest": "^0.34.6",
+        "vitest": "^1.4.0",
         "webpack": "^5.89.0"
     }
 }

stores/locationsStore.ts

@@ -1,75 +1,64 @@
-import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
+import { gql } from 'graphql-request'
 import { defineStore } from 'pinia'
-import { Ref, ref, watch } from 'vue'
+import { Ref, ref } from 'vue'
 import { Facility, FacilitySearchFilters, Locale } from '~/typedefs/gqlTypes.js'
 import { useLoadingStore } from './loadingStore.js'
 import { useLocaleStore } from './localeStore.js'
+import { gqlClient } from '../utils/graphql.js'
 
 export const useLocationsStore = defineStore('locationsStore', () => {
     const citiesDisplayOptions: Ref<string[]> = ref([])
 
-    function fetchLocations() {
+    async function fetchLocations() {
         //set the loading visual state
         const loadingStore = useLoadingStore()
         loadingStore.setIsLoading(true)
+        citiesDisplayOptions.value = ['Loading...']
 
         //this is the async callback that will be called when the query is done (no async/await)
-        const facilitiesRef = searchFacilities(citiesDisplayOptions)
+        const facilitiesSearchResults = await queryFacilities()
+        console.log(`Fetched facilities: ${JSON.stringify(facilitiesSearchResults)}`)
 
-        watch(facilitiesRef, facilitiesSearchResults => {
-            console.log(`Fetched facilities: ${JSON.stringify(facilitiesSearchResults)}`)
+        const allCitiesEnglishList = facilitiesSearchResults.map(facility => facility.contact?.address.cityEn)
+        const allCitiesJapaneseList = facilitiesSearchResults.map(facility => facility.contact?.address.cityJa)
 
-            const searchResults = facilitiesSearchResults.facilities
-            const allCitiesEnglishList = searchResults.map(facility => facility.contact?.address.cityEn)
-            const allCitiesJapaneseList = searchResults.map(facility => facility.contact?.address.cityJa)
+        const localeStore = useLocaleStore()
+        //we want to have an empty display value for dropdowns, so we add an empty string to the list
+        citiesDisplayOptions.value = localeStore.locale.code === Locale.EnUs
+            ? ['----Any----', ...allCitiesEnglishList]
+            : ['----Any----', ...allCitiesJapaneseList]
 
-            const localeStore = useLocaleStore()
-            //we want to have an empty display value for dropdowns, so we add an empty string to the list
-            citiesDisplayOptions.value = localeStore.locale.code === Locale.EnUs
-                ? ['----Any----', ...allCitiesEnglishList]
-                : ['----Any----', ...allCitiesJapaneseList]
-        })
+        //set the loading visual state back to normal
+        loadingStore.setIsLoading(false)
     }
 
     return { citiesDisplayOptions, fetchLocations }
 })
 
-function searchFacilities(citiesDisplayOptions: Ref<string[]>): Ref<{ facilities: Facility[] }> {
-    const loadingStore = useLoadingStore()
-
-    const searchFacilitiesData = {
-        filters: {
-            limit: 1000,
-            offset: 0,
-            contact: undefined,
-            createdDate: undefined,
-            healthcareProfessionalIds: undefined,
-            healthcareProfessionalName: undefined,
-            nameEn: undefined,
-            nameJa: undefined,
-            orderBy: undefined,
-            updatedDate: undefined,
-        } satisfies FacilitySearchFilters
-    }
-
-    citiesDisplayOptions.value = ['Loading...']
-
-    const { result, loading, error } = useQuery(searchFacilitiesQuery, searchFacilitiesData)
-
-    //we want to set the app to a loading state while querying. This value is reactive
-    watch(loading, (newValue) => {
-        loadingStore.setIsLoading(newValue)
-    })
+async function queryFacilities(): Promise<Facility[]> {
+    try {
+        const searchFacilitiesData = {
+            filters: {
+                limit: 1000,
+                offset: 0,
+                contact: undefined,
+                createdDate: undefined,
+                healthcareProfessionalIds: undefined,
+                healthcareProfessionalName: undefined,
+                nameEn: undefined,
+                nameJa: undefined,
+                orderBy: undefined,
+                updatedDate: undefined,
+            } satisfies FacilitySearchFilters
+        }
 
-    //we want to show an error message if the query fails. This value is reactive
-    watch(error, () => {
-        loadingStore.setIsLoading(false)
-        console.log(`Error getting facilities: ${JSON.stringify(error.value)}`)
+        const result = await gqlClient.request<{ facilities: Facility[] }>(searchFacilitiesQuery, searchFacilitiesData)
+        return result?.facilities ?? []
+    } catch (error) {
+        console.log(`Error getting facilities for dropdown: ${JSON.stringify(error)}`)
         alert(`Error getting data! Please contact our support team by clicking the bottom right link on the page!`)
-    })
-
-    return result as Ref<{ facilities: Facility[] }>
+        return []
+    }
 }
 
 const searchFacilitiesQuery = gql`query QueryFacilities($filters: FacilitySearchFilters!) {