chore: switch some tests to script setup

Author: Akryum

packages/test-e2e-composable-vue3/src/components/ChannelList.vue

@@ -1,35 +1,26 @@
-<script lang="ts">
+<script lang="ts" setup>
 import gql from 'graphql-tag'
 import { useQuery } from '@vue/apollo-composable'
-import { defineComponent, computed } from 'vue'
+import { computed } from 'vue'
 
 interface Channel {
   id: string
   label: string
 }
 
-export default defineComponent({
-  setup () {
-    const { result, loading } = useQuery<{ channels: Channel[] }>(gql`
-      query channels {
-        channels {
-          ...channel
-        }
-      }
-
-      fragment channel on Channel {
-        id
-        label
-      }
-    `)
-    const channels = computed(() => result.value?.channels ?? [])
-
-    return {
-      loading,
-      channels,
+const { result, loading } = useQuery<{ channels: Channel[] }>(gql`
+  query channels {
+    channels {
+      ...channel
     }
-  },
-})
+  }
+
+  fragment channel on Channel {
+    id
+    label
+  }
+`)
+const channels = computed(() => result.value?.channels ?? [])
 </script>
 
 <template>

packages/test-e2e-composable-vue3/src/components/LazyQuery.vue

@@ -1,36 +1,25 @@
-<script lang="ts">
+<script lang="ts" setup>
 import gql from 'graphql-tag'
 import { useLazyQuery } from '@vue/apollo-composable'
-import { defineComponent, computed, ref } from 'vue'
+import { computed, ref } from 'vue'
 
-export default defineComponent({
-  setup () {
-    const { result, loading, load, refetch } = useLazyQuery(gql`
-      query list {
-        list
-      }
-    `)
-    const list = computed(() => result.value?.list ?? [])
+const { result, loading, load, refetch } = useLazyQuery(gql`
+  query list {
+    list
+  }
+`)
+const list = computed(() => result.value?.list ?? [])
 
-    const refetched = ref(false)
+const refetched = ref(false)
 
-    function r () {
-      refetched.value = true
-      refetch()
-    }
+function r () {
+  refetched.value = true
+  refetch()
+}
 
-    function loadOrRefetch () {
-      load() || r()
-    }
-
-    return {
-      loadOrRefetch,
-      loading,
-      list,
-      refetched,
-    }
-  },
-})
+function loadOrRefetch () {
+  load() || r()
+}
 </script>
 
 <template>