Apollo GRAPHQL GRAPHQL Typescript Integration

// graphql.schema.json (部分)
{
  "data": {
    "__schema": {
      "types": [
        {
          "kind": "OBJECT",
          "name": "User",
          "fields": [
            { "name": "id", "type": { "kind": "NON_NULL", "ofType": { "kind": "SCALAR", "name": "ID" } } },
            { "name": "name", "type": { "kind": "SCALAR", "name": "String" } }
          ]
        }
      ]
    }
  }
}

// query.graphql
query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
  }
}

// generated.ts (通过工具生成)
export type GetUserQueryVariables = {
  id: string;
};

export type GetUserQuery = {
  user?:  {
    __typename?: "User";
    id: string;
    name?: string | null;
  } | null;
};

// component.tsx
import { useQuery } from '@apollo/client';
import { GetUserQuery, GetUserQueryVariables } from './generated'; // 假设类型已生成

const GET_USER_QUERY = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
    }
  }
`;

function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useQuery<GetUserQuery, GetUserQueryVariables>(GET_USER_QUERY, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data?.user?.name}</h1>
      <p>ID: {data?.user?.id}</p>
    </div>
  );
}