在graphql中構建嵌套結構

Question

我是GraphQL的新手，我正在嘗試解決我的經理向我提出的問題。

通過第三方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

您的架構大多是正確的，但您需要在提供程序中的優惠券字段上使用解析程序，因為它是嵌套類型。 有關交互式查詢，請參閱launchpad示例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 ，只會返回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
            }
          }
        })
      }
    }
  }
})