Typesafe client?

[Joakal]

I am trying to do something like this, how do I implement it?

user.vue

import { useQuery } from "src/generated/graphql";

const { data } = useQuery({
  user: {
    id: true,
    email: true
  }
}, {
id: 1
});

I understand I can use this plugin https://github.com/dotansimha/graphql-typed-document-node/ but it is extra steps in the process:

1. Create a graphql query in .graphql (or in .ts)
   user.graphql

query user($id: ID) {
  user(id: $id) {
    id
    email
  }
}

1b) Watched Code Generates GQL typed document of UserDocument
2)
user.vue

import { useQuery } from "@vue/apollo-composable";
import { UserDocument } from "src/generated/graphql";

const { data } = useQuery(UserDocument, {
    id: 1,
  });

Problems with this approach:

• I have no inline type-safety for .graphql files. I have to rely on never making a typo. Using Apollo Graphql VSCode extension 1.19.9
• What if I want to include the firstname? Now I need to update two files compared to first approach.
• What if I have a query for user that includes name in a separate file? I could update the graphql file to include it but that's poor practice. So, we need to have two separate graphql queries (or as fragments). And of course, the query names must be unique. Thus, I now have two queries:
  user.graphql

query userEmail($id: ID) {
  user(id: $id) {
    id
    email
  }
}

query userName($id: ID) {
  user(id: $id) {
    id
    name
  }
}

How does one do client typesafety?