Skip to content

Instantly share code, notes, and snippets.

@Akryum
Created Aug 24, 2021
Embed
What would you like to do?
<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>
@Lappihuan

This comment has been minimized.

Copy link

@Lappihuan Lappihuan commented Aug 26, 2021

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

@Akryum

This comment has been minimized.

Copy link
Owner Author

@Akryum Akryum commented Aug 26, 2021

About a new syntax to use graphql in Vue components

@Lappihuan

This comment has been minimized.

Copy link

@Lappihuan Lappihuan commented Aug 26, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment