使用 [apollo / graphql] 构造对象属性的问题答案

【问题标题】：Problem to structure property of an object using [apollo / graphql]使用 [apollo / graphql] 构造对象属性的问题
【发布时间】：2020-05-20 14:55:19
【问题描述】：

问题

朋友们好，

我正在使用 Apollo Server 开发一个 api。 我遇到了如何只显示一次nextEpisodeDate 属性的问题。我的解决方案在episodes 属性的所有子数组中显示nextEpisodeDate，它不应该是这样的。

希望有人能帮助我！

JSON 示例

"episodes": [
   {
     "nextEpisodeDate": "2020-01-17"
   },
   {
     "episode": 3,
     "id": "53789/dorohedoro-3",
     "imagePreview": "https://cdn.animeflv.net/screenshots/3274/3/th_3.jpg"
   },
   {
     "episode": 2,
     "id": "53755/dorohedoro-2",
     "imagePreview": "https://cdn.animeflv.net/screenshots/3274/2/th_3.jpg"
   },
   {
     "episode": 1,
     "id": "53705/dorohedoro-1",
     "imagePreview": "https://cdn.animeflv.net/screenshots/3274/1/th_3.jpg"
   }
 ]

typeDefs

const resolvers = require('./resolvers');
const {gql} = require('apollo-server');

const typeDefs = gql `
  extend type Query{
    latest_anime: [Animes]
  }

  type Animes{
    title: String
    poster: String
    synopsis: String
    debut: String
    type: String
    rating: String
    genres: [String]
    episodes: [Episodes]
  }

  type Episodes{
    nextEpisodeDate: String
    episode: String
    id: String
    imagePreview: String
  }
`

module.exports = {
  typeDefs,
  resolvers
};

阿波罗游乐场

query{
  latest_anime{
    title
    poster
    synopsis
    debut
    type
    rating
    genres
    episodes{
      nextEpisodeDate
      episode
      id
      imagePreview
    }
  }
}

阿波罗游乐场输出

{
  "data": {
    "latest_anime": [
      {
        "title": "Tsugumomo OVA",
        "poster": "https://animeflv.net/uploads/animes/covers/3275.jpg",
        "synopsis": "OVA 4.6Kazuya Kagami nunca va a ningún lado sin su preciada “Sakura Obi” que su madre le regaló. Un día, una hermosa chica vestida con un kimono llamada Kiriha aparece ante él. Naturalmente, ella comienza a vivir en su habitación. ¿Naturalmente? ¡Esto solo es el inicio de la embarazosa y confusa...",
        "debut": null,
        "type": "OVA",
        "rating": "4.6",
        "genres": [
          "accion",
          "comedia",
          "ecchi",
          "escolares",
          "seinen",
          "sobrenatural"
        ],
        "episodes": [
          {
            "nextEpisodeDate": null,
            "episode": null,
            "id": null,
            "imagePreview": null
          },
          {
            "nextEpisodeDate": null,
            "episode": "1",
            "id": "53753/tsugumomo-ova-1",
            "imagePreview": "https://cdn.animeflv.net/screenshots/3275/1/th_3.jpg"
          }
        ]
      },
    ]
  }
}

【问题讨论】：

工作正常，Episodes 类型包含nextEpisodeDate，...查询（您要求的字段）包含nextEpisodeDate - 然后提供 - null 如果未定义则返回
@xadm 我明白了，但是这个属性应该只出现在初始索引中，而不是出现在数组的所有索引中。
解析器必须返回类型化（具有定义的结构）对象
@xadm 是的，但我仍然认为我会这样。在客户端，我可以指定该值是否不同于 null。否则，我忽略它。
当然，即使在 JSX f.e. `{nextEpisodeDate && }

标签： graphql apollo apollo-server

【解决方案1】：

获得所需响应结构的唯一方法是拥有两种不同的类型。字段必须只有一种类型，但您可以使用联合或接口等抽象类型，以便在运行时将列表中的每个单独项解析为多种类型之一。

type AiredEpisode implements Episode {
  id: String
  episode: String
  imagePreview: String
}

type UpcomingEpisode implements Episode {
  id: String
  nextEpisodeDate: String
}

interface Episode {
  id: String
}

type Anime {
  episodes: [Episode]
  # other fields
}

然后你会像这样查询剧集：

query {
  latest_anime {
    episodes {
      # fields on the interface itself like id are common to all
      # implementing types so they don't need to be inside a fragment
      id
      # fields specific to one of the types need to be inside a fragment
      ... on UpcomingEpisode {
        nextEpisodeDate
      }
      ... on AiredEpisode {
        id
        episode
        imagePreview
      }
    }
  }
}

附注：如果您的 API 没有为即将播出的剧集返回 id，您仍应提供一个（例如，您可以使用节目的 id，您只是想确保它是唯一的）。如果您在前端使用像 Apollo 这样的客户端，这将确保您不会遇到缓存问题。

【讨论】：