TypeScript: how not to generate "server types"

[RMHonor]

A common foot gun I've seen happen when building client code is the misuse of what I refer to as "server types", or the entire type as defined by the schema.

With the following schema:

type Query {
  user: User
}

type User {
  id: ID!
  name: String!
}

On the client, with the typescript plugin, this will generate a type for User

type User = {
  id: string
  name: string
}

And then they'll write some code like the following:

import { User } from "../generated"; // bad import

const query = gql`query user {
  user {
    id
    name
  }
}`

const Container: React.FC = () => {
  const { data } = useQuery(query);

  return data?.user ? <User user={data.user} /> : null;
}

const User: React.FC<{ user: User }> = ({ user }) => {
  return user.name;
}

This all works fine, because our client query exhausts all fields on User, but what if I extend type User { email: String! }?. Suddenly our client code is getting a type error, despite nothing changing with client code, and our schema change being backwards compat.

The true "fix" is to make sure we use the correct type, but on a large application with many developers, these mistakes are likely, and the poor usage can be quite disruptive.

Is there a better way to handle this? Is there some way to prevent generation of these types, as we don't need them on the client.