javascript - 在 graphql 中构建嵌套结构

Question

我是 GraphQL 的新手，我正在尝试解决我的经理向我提出的问题。

我通过第 3 方 API(我对其零控制)提供了以下数据结构:

[
  {
    "id": 19,
    "date": "2016-10-24T13:59:19",
    "date_gmt": "2016-10-24T12:59:19",
    "slug: "data",
    "provider": {
      "name": "data",
      "logo": "data",
      "destination_url": "data",
      "coupon_label": "data",
      "coupon_text": "data",
      "coupon_code": "data",
      "coupon_url": "data",
    }
  }
]

我需要将其转换为类似于以下查询的 GraphQL 架构:

{
  provider(slug: "slug") {
    id
    date
    slug
    name
    logo
    url
    coupon {
      label
      text
      code
      url
    }
  }
}

我已经设法用下面的代码解决了大部分问题，但是，我不知道如何将优惠券节点组合成一个。

我猜这需要是另一种自定义类型吗？如果是这样的话，这似乎效率低下，因为优惠券永远不会在提供商类型之外使用，所以我想知道是否有更多我不知道的“最佳实践”方法。

import { GraphQLObjectType, GraphQLInt, GraphQLString } from 'graphql'

const ProviderType = new GraphQLObjectType({
  name: 'Provider',
  fields: () => ({
    id: {
      type: GraphQLInt,
      description: 'The primary key for the provider'
    },
    slug: {
      type: GraphQLString,
      description: 'A unique string for the provider'
    },
    status: {
      type: GraphQLString,
      description: 'The the published status of the provider'
    },
    name: {
      type: GraphQLString,
      description: 'The name of the provider',
      resolve (parent) { return parent.provider.name }
    },
    logo: {
      type: GraphQLString,
      description: 'The full url of the provider logo',
      resolve (parent) { return parent.provider.logo }
    },
    url: {
      type: GraphQLString,
      description: 'The full url of the provider',
      resolve (parent) { return parent.provider.destination_url }
    },
  })
})

export default ProviderType

更新:

我已将代码更新为以下内容，但它仍然无法正常工作，所以我的假设一定是不正确的(或者我实现不正确)

const ProviderType = new GraphQLObjectType({
  name: 'Provider',
  fields: () => ({
    id: {
      type: GraphQLInt,
      description: 'The primary key for the provider'
    },
    slug: {
      type: GraphQLString,
      description: 'A unique string for the provider'
    },
    status: {
      type: GraphQLString,
      description: 'The the published status of the provider'
    },
    name: {
      type: GraphQLString,
      description: 'The name of the provider',
      resolve (parent) { return parent.provider.name }
    },
    logo: {
      type: GraphQLString,
      description: 'The full url of the provider logo',
      resolve (parent) { return parent.provider.logo }
    },
    url: {
      type: GraphQLString,
      description: 'The full url of the provider',
      resolve (parent) { return parent.provider.destination_url }
    },
    coupon: {
      type: CouponType,
      description: 'The coupon information for the provider'
    }
  })
})

const CouponType = new GraphQLObjectType({
  name: 'Coupon',
  fields: () => ({
    label: {
      type: GraphQLString,
      description: 'The label for the coupon',
      resolve (parent) { return parent.provider.coupon_label }
    },
    text: {
      type: GraphQLString,
      description: 'The text for the coupon',
      resolve (parent) { return parent.provider.coupon_text }
    },
    code: {
      type: GraphQLString,
      description: 'The code for the coupon',
      resolve (parent) { return parent.provider.coupon_code }
    },
    url: {
      type: GraphQLString,
      description: 'The url for the coupon',
      resolve (parent) { return parent.provider.coupon_url }
    }
  })
})

Answer 1

您的架构大部分是正确的，但您需要在 provider 的优惠券字段上使用解析器，因为它是嵌套类型。查看交互式查询的启动板示例 https://launchpad.graphql.com/r995kzj5kn

这是代码。为了简洁起见，我删除了您的描述并添加了一些测试数据

import {
  GraphQLObjectType,
  GraphQLSchema,
  GraphQLString,
  GraphQLInt,
  GraphQLList
} from 'graphql'

const data = [
  {
    "id": 19,
    "date": "2016-10-24T13:59:19",
    "date_gmt": "2016-10-24T12:59:19",
    "slug": "slug",
    "provider": {
      "name": "provider.name",
      "logo": "provider.logo",
      "destination_url": "provider.destination_url",
      "coupon_label": "provider.coupon_label",
      "coupon_text": "provider.coupon_text",
      "coupon_code": "provider.coupon_code",
      "coupon_url": "provider.coupon_url",
    }
  },
    {
    "id": 20,
    "date": "2016-10-24T13:59:19",
    "date_gmt": "2016-10-24T12:59:19",
    "slug": "slugplug",
    "provider": {
      "name": "provider.name",
      "logo": "provider.logo",
      "destination_url": "provider.destination_url",
      "coupon_label": "provider.coupon_label",
      "coupon_text": "provider.coupon_text",
      "coupon_code": "provider.coupon_code",
      "coupon_url": "provider.coupon_url",
    }
  }
]

const CouponType = new GraphQLObjectType({
  name: 'Coupon',
  fields: () => ({
    label: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.coupon_label }
    },
    text: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.coupon_text }
    },
    code: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.coupon_code }
    },
    url: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.coupon_url }
    }
  })
})

const ProviderType = new GraphQLObjectType({
  name: 'Provider',
  fields: () => ({
    id: { type: GraphQLInt },
    date: { type: GraphQLString },
    slug: { type: GraphQLString },
    status: { type: GraphQLString },
    name: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.name }
    },
    logo: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.logo }
    },
    url: {
      type: GraphQLString,
      resolve (parent) { return parent.provider.destination_url }
    },
    coupon: {
      type: CouponType,
      resolve(parent) {
        return parent
      }
    }
  })
})

const Query = new GraphQLObjectType({
  name: 'Query',
  fields: {
    provider: {
      type: new GraphQLList(ProviderType),
      args: {
        slug: { type: GraphQLString }
      },
      resolve (source, args) {
        return args.slug ?
          data.filter(({ slug }) => slug === args.slug) :
          data
      }
    }
  }
})

const schema = new GraphQLSchema({
  query: Query
});

或者，您可以在根解析器中修改结果，然后像下面这样发送它们。这将允许您从您的类型中删除所有解析器，除了 coupon on provider 只会返回 parent.coupon

const Query = new GraphQLObjectType({
  name: 'Query',
  fields: {
    provider: {
      type: new GraphQLList(ProviderType),
      args: {
        slug: { type: GraphQLString }
      },
      resolve (source, args) {
        const filtered = args.slug ?
          data.filter(({ slug }) => slug === args.slug) :
          data
        return filtered.map(doc => {
          return {
            id: doc.id,
            date: doc.date,
            slug: doc.slug,
            name: doc.provider.name,
            logo: doc.provider.logo,
            url: doc.provider.coupon_url,
            coupon: {
              label: doc.provider.coupon_label,
              text: doc.provider.coupon_text,
              code: doc.provider.coupon_code,
              url: doc.provider.coupon_url
            }
          }
        })
      }
    }
  }
})