Improve TypeScript types of partial character details

Make the types more accurately represent the actual situation with
multiple possible response shapes for the query.

src/components/DetailView.vue

@@ -6,7 +6,7 @@
       {{ character.name }} (<router-link to="/">Back to list</router-link>)
     </h2>
     <img v-if="character.image" :src="character.image" class="image" />
-    <template v-if="character.episode">
+    <template v-if="areDetailsLoaded(character)">
       <div>Gender: {{ character.gender }}</div>
       <div>Status: {{ character.status }}</div>
       <div>Species: {{ character.species }}</div>
@@ -27,12 +27,43 @@
 import { useQuery } from '@vue/apollo-composable';
 import { computed } from 'vue';
 import { graphql } from '../gql';
+import {
+  CharacterQuery,
+  CharacterQueryVariables,
+  CharactersQuery,
+} from '../gql/graphql';
 
 const props = defineProps<{
   id: string;
 }>();
 
-const { result, loading } = useQuery(
+/**
+ * Type of a single character from the list query - our "partial" data.
+ */
+type CharacterWithPartialData = NonNullable<
+  NonNullable<NonNullable<CharactersQuery['characters']>['results']>[number]
+>;
+
+/**
+ * Type of a character with all the requested fields set - our "full" data.
+ */
+type CharacterWithFullData = NonNullable<CharacterQuery['character']>;
+
+/**
+ * We need to manually type the query response since GraphQL Code Generator is
+ * not smart enough to type such a complicated workflow for us.
+ *
+ * The response can include either the "partial" data or the "full" data.
+ */
+type PartialCharacterQueryResponse = {
+  __typename?: 'Query';
+  character?: CharacterWithPartialData | CharacterWithFullData | null;
+};
+
+const { result, loading } = useQuery<
+  PartialCharacterQueryResponse,
+  CharacterQueryVariables
+>(
   graphql(`
     query character($characterId: ID!) {
       character(id: $characterId) {
@@ -61,6 +92,21 @@ const { result, loading } = useQuery(
 );
 
 const character = computed(() => result.value?.character);
+
+/**
+ * Check if the details for the character have been loaded.
+ *
+ * Make use of a custom type guard to make it easier to determine which type of
+ * data we're dealing with in the template.
+ *
+ * Read more about TypeScript type predicates here:
+ * https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates
+ */
+const areDetailsLoaded = (
+  character: NonNullable<PartialCharacterQueryResponse['character']>
+): character is CharacterWithFullData => {
+  return Boolean('episode' in character);
+};
 </script>
 
 <style scoped>