如何为GraphQL片段指定多种类型？附示例代码及使用场景

首先明确：你写的fragment RegularUser on Barber | Client这种语法在GraphQL中是不支持的，片段的on关键字后只能指定单个命名类型（对象、接口或联合类型）。要实现同时适配Barber和Client的需求，可根据服务端的类型定义选择以下方案：

方案1：基于接口实现（推荐） #

如果你的服务端定义了一个包含id、username字段的公共接口（比如User），并且Barber和Client都实现了该接口：

interface User {
  id: ID!
  username: String!
}

type Barber implements User {
  id: ID!
  username: String!
  # Barber专属字段
}

type Client implements User {
  id: ID!
  username: String!
  # Client专属字段
}

此时可以直接将片段定义在接口上，所有实现该接口的类型都能复用这个片段：

fragment RegularUser on User {
  id
  username
}

在你的mutation中直接使用即可，完全符合需求：

mutation Register($options: RegistrationInput!) {
  userRegister(options: $options) {
    user {
      ...RegularUser
    }
    errors {
      field
      message
    }
  }
}

方案2：基于联合类型实现 #

如果服务端将Barber和Client定义为联合类型：

union UserUnion = Barber | Client

且userRegister返回的user字段类型为UserUnion，可以定义针对联合类型的片段，内部通过内联片段匹配具体类型：

fragment RegularUser on UserUnion {
  ...on Barber {
    id
    username
  }
  ...on Client {
    id
    username
  }
}

之后在mutation中直接引用该片段即可。

方案3：无公共类型定义时的兜底方案 #

如果服务端既没有定义公共接口，也没有设置联合类型，只能定义两个独立的片段，在使用时通过内联片段分别匹配：

fragment RegularUserBarber on Barber {
  id
  username
}

fragment RegularUserClient on Client {
  id
  username
}

mutation Register($options: RegistrationInput!) {
  userRegister(options: $options) {
    user {
      ...on Barber {
        ...RegularUserBarber
      }
      ...on Client {
        ...RegularUserClient
      }
    }
    errors {
      field
      message
    }
  }
}

这种写法冗余度较高，仅作为无法修改服务端类型时的临时方案。

内容的提问来源于stack exchange，提问作者AlexRod