changed from apolloclient to graphql-request (#325)

* changed from apolloclient to graphql-request * updated queries with new fetch format * fixup! changed from apolloclient to graphql-request * cleaned up added semicolons * docs: add NabbeunNabi as a contributor for code (#410) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> * docs: add Anissa3005 as a contributor for code (#411) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> * docs: add evan-desu as a contributor for code (#412) * docs: update README.md [skip ci] * docs: update .all-contributorsrc [skip ci] --------- Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> * Debug the ESLint config file (#409) * fix: debug the ESLint config file Previously, the eslint file is not applying the linting and styling rules to our code * chore: format files with new linting rules * fixup! chore: format files with new linting rules --------- Co-authored-by: theyokohamalife <[email protected]> * chore(deps): update graphqlcodegenerator monorepo (#408) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * Add tests for localeStore (#401) * test: add tests for localeStore Previously, there were no tests present for the localeStore. In this commit I have created tests for localeStore * fixup! test: add tests for localeStore * feat: add photos, titles, and names on about us (#406) This change adds the board members, developers and links to their linkedIn profiles for the ones that are currently available. There are tests for the additions as well. Changed the styling for the map container and main app in order to not have the footer cut through parts of the page. * merge fixes. rebuilt yarn * rebuilding yarn lock file * merge fixes. linting errors --------- Co-authored-by: Will Brammer <[email protected]> Co-authored-by: allcontributors[bot] <46447321+allcontributors[bot]@users.noreply.github.com> Co-authored-by: Anissa Chadouli <[email protected]> Co-authored-by: theyokohamalife <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
ourjapanlife · Mar 18, 2024 · 11d3b34 · 11d3b34
1 parent c74bad3
commit 11d3b34
Show file tree

Hide file tree

Showing 11 changed files with 3,636 additions and 6,465 deletions.
diff --git a/app.vue b/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
diff --git a/components/SearchBar.vue b/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>
diff --git a/components/SubmissionForm.vue b/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>
diff --git a/package.json b/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"
     }
 }
diff --git a/stores/locationsStore.ts b/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!) {