Weather.vue

<script setup>
import { ref, computed } from 'vue'
import gql from 'graphql-tag'
import { client } from './weather'

const document = gql`query getCityWeather ($name: String!) {
  city: getCityByName (name: $name) {
    id
    name
    country
    coord {
      lon
      lat
    }
    weather {
      summary {
        title
        description
        icon
      }
      temperature {
        actual
        feelsLike
        min
        max
      }
      wind {
        speed
        deg
      }
      clouds {
        all
        visibility
        humidity
      }
      timestamp
    }
  }
}`

const name = ref('Bordeaux')
const { data, loading, error, refetch } = client.query(document, { name })
const city = computed(() => data.city)
</script>

<template>
  <div class="p-2 border-b border-gray-100 space-x-2 flex items-center">
    <select
      v-model="name"
      class="bg-gray-300 rounded px-4 py-2"
    >
      <option value="Bordeaux">
        Bordeaux
      </option>
      <option value="Paris">
        Paris
      </option>
      <option value="Lyon">
        Lyon
      </option>
      <option value="Tokyo">
        Tokyo
      </option>
    </select>

    <button
      class="bg-gray-300 hover:bg-gray-200 px-4 py-2 rounded"
      @click="refetch()"
    >
      Refresh
    </button>

    <div class="flex-1" />

    <div v-if="loading">
      Loading...
    </div>
  </div>

  <div
    v-if="city"
    class="flex items-center justify-center flex-col space-y-6 p-6"
  >
    <h1 class="opacity-70">
      {{ city.name }} ({{ city.country }})
    </h1>

    <div class="flex items-center space-x-2">
      <img
        :src="`http://openweathermap.org/img/wn/${city.weather.summary.icon}@4x.png`"
        alt="Icon"
        class="w-42 h-42"
      >

      <div>
        <div class="text-3xl">
          {{ Math.round(city.weather.temperature.actual - 273.15) }}°C
        </div>
        <div class="opacity-70">
          {{ city.weather.summary.title }}
        </div>
        <div class="opacity-50">
          {{ city.weather.summary.description }}
        </div>
      </div>
    </div>
  </div>

  <div
    v-if="error"
    class="text-red-500 p-12"
  >
    {{ error }}
  </div>
</template>

What kind of feedback do you actually want?
This seems quite random

About a new syntax to use graphql in Vue components

so composables like useQuery and useResult are not relevant in script setup?
otherwise i don't see much of a diffrence