在 GraphQL 中查询实现另一个接口的接口答案

【问题标题】：Query an interface that implements another interface in GraphQL在 GraphQL 中查询实现另一个接口的接口
【发布时间】：2022-08-02 20:48:47
【问题描述】：

我目前正在开发Activity Feed built using GraphQL Nexus 和 Apollo Server (3.9.0)。它将接收一系列信息，这些信息将具有由共享IActivity 接口处理的共享字段。

此外，还有一些类型也将通过IActivity 中未包含的其他接口共享类似字段，例如IMedia 和INews。

我们正在寻找一种方法来获取来自IActivity 的所有字段，并能够在IActivity 中查询IMedia 和INews。我们知道有可能查询具体类型，但我们希望避免这种情况，因为我们希望通过添加新类型的提要（共享这些接口的相同字段）来扩展后端而不更新客户端（它是一个 react-native 应用程序）。我们只会在渲染自定义 UI 组件时使用具体类型。

这是一个例子：

interface IActivity {
    id: ID!
    name: String!
    description: String
}

interface IMedia implements IActivity {
    id: ID!
    name: String!
    description: String
    url: String
    type: String
}
interface INews implements IActivity {
    id: ID!
    name: String!
    description: String
    date: DateTime
    author: String
    content: String
}

type Video implements IActivity & IMedia {
    id: ID!
    name: String!
    description: String
    url: String
    type: String
    format: String
    codec: String
}
type Image implements IActivity & IMedia {
    id: ID!
    name: String!
    description: String
    url: String
    type: String
    compressed: Boolean
    codec: String
    extension: String
}

type Audio implements IActivity & IMedia {
    id: ID!
    name: String!
    description: String
    url: String
    type: String
    bitrate: Boolean
}

type Post implements INews & IActivity {
    id: ID!
    name: String!
    description: String
    date: DateTime
    author: String
    content: String
    comments: [Comment]
}

type Comment {
    author: String
    message: String
}

type FlashNews implements INews & IActivity {
    id: ID!
    name: String!
    description: String
    date: DateTime
    author: String
    content: String
    rating: Int
}


type Query {
    activityFeed(): [IActivity]
}

这是查询

query getFeed() {
    activityFeed {
        id
        name
        description
        ... on IMedia {
            url
            type
        }
        ... on INews {
            date
            author
            content
        }
    }
}

这会查询来自IActivity 的所有字段，但不会查询IMedia 或INews。没有 GraphQL 错误（我们通过 graphql-codegen 和 Nexus builder 对它们进行 lint。）

我们的信念是，IActivity 也与其他接口共享相同的接口，我们可以查询IActivity，然后像处理具体类型一样指定其他接口（例如：IMedia）。

事后看来，我们试图做的是某种联合类型的接口（我知道这是不可能的）......

对于我们要完成的工作，是否有解决方法或解决方案？

编辑

我们发现这个确切的例子已验证，问题在于 GraphQL Nexus 的配置方式。

这是使用普通 Apollo 服务器的 code sandbox 及其 Git Repo。

编辑2：

尝试以下查询：

query getFeed {
    activityFeed {
        id
        name
        description
        ... on IMedia {
            type
            format
        }
        ... on INews {
            date
            author
            content
        }
        ... on Video {
            length
        }
    }
}

好吧，我们已经有了一个发现，这可以通过 GraphQL 实现。它实际上是相当不错的。

标签： graphql apollo-server graphql-js nexus-js

【解决方案1】：

我们发现了问题。是 Apollo 客户端（前端）没有正确解析启发式片段匹配器。

可以在此处找到有关我们如何解决该问题的更多信息： https://stackoverflow.com/a/64886593/1057052

我们生成了这样的东西：

schema: "./appsync/appSync.gql"
# documents: "./appsync/**/*.gql"
generates:
      src/generated/graphql.schema.json:
        plugins:
            - 'fragment-matcher'
        apolloClientVersion: 3

然后接口工作正常！

【讨论】：