从 REST 迁移到 GraphQL 的一些思考与实践(响应嵌套的列表结构)，参考 Shopify

1、参考：从 REST 迁移到 GraphQL 的一些思考与实践，参考 GitHub。在左侧为模板文件的顶级目录结构。针对每一个顶级目录，需要设置其是否允许新增文件。如图1

图1

2、本计划借鉴 Shopify 的 GraphQL 的响应结构，但是其是直接响应 html 的结构，并未使用 GraphQL。如图2

图2

3、借鉴 Shopify 的 GraphQL 的 products，其中每一个产品皆具有其自身的 图片列表。如图3

图3

{
  products(first: 3) {
    edges {
      node {
        id
        title
        images(first: 3) {
          edges {
            node {
              id
              width
            }
          }
        }
      }
    }
  }
}

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "gid://shopify/Product/6944715342030",
            "title": "commercial kitchen quality",
            "images": {
              "edges": [
                {
                  "node": {
                    "id": "gid://shopify/ProductImage/30455717036238",
                    "width": 1920
                  }
                },
                {
                  "node": {
                    "id": "gid://shopify/ProductImage/30455718838478",
                    "width": 1920
                  }
                }
              ]
            }
          }
        },
        {
          "node": {
            "id": "gid://shopify/Product/6944715636942",
            "title": "Easter Photographing Dress-up Acessories",
            "images": {
              "edges": []
            }
          }
        },
        {
          "node": {
            "id": "gid://shopify/Product/6944715702478",
            "title": "Perfect Pet Hair Remover",
            "images": {
              "edges": []
            }
          }
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 20,
      "actualQueryCost": 13,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 987,
        "restoreRate": 50
      }
    }
  }
}

4、Shopify 的 products 相当于模板文件的顶级目录列表。而 每一个产品皆具有其自身的 图片列表，相当于 每一个顶级目录皆具有其自身的 模板文件列表。最终实现了类似的响应结构。如图4

图4

query{
  onlineStoreTheme(themeId: "vogue"){
    ...____
  }
}

fragment ____ on OnlineStoreTheme {
  themeFirstLevelAssets {
    name
    creatable
    themeAssets {
      id
      key
    }
  }
}

{
"data": {
"onlineStoreTheme": {
"themeFirstLevelAssets": [
{
"name": "Assets",
"creatable": false,
"themeAssets": [
{
"id": "1",
"key": "assets/iconfont/iconfont.css"
},
{
"id": "2",
"key": "assets/iconfont/iconfont.js"
},
{
"id": "3",
"key": "assets/iconfont/iconfont.json"
},
{
"id": "4",
"key": "assets/iconfont/iconfont.woff2"
}
]
},
{
"name": "Auth",
"creatable": false,
"themeAssets": [
{
"id": "5",
"key": "auth/login.blade.php"
},
{
"id": "6",
"key": "auth/register.blade.php"
}
]
},
{
"name": "Components",
"creatable": false,
"themeAssets": [
{
"id": "7",
"key": "components/carousel.blade.php"
},
{
"id": "8",
"key": "components/collections.blade.php"
},
{
"id": "9",
"key": "components/combinationRecommendation.blade.php"
},
{
"id": "10",
"key": "components/css.blade.php"
},
{
"id": "11",
"key": "components/foot.blade.php"
},
{
"id": "12",
"key": "components/footInfo.blade.php"
},
{
"id": "13",
"key": "components/footMenu.blade.php"
},
{
"id": "14",
"key": "components/footSubscribe.blade.php"
},
{
"id": "15",
"key": "components/footTextImg.blade.php"
},
{
"id": "16",
"key": "components/header.blade.php"
},
{
"id": "17",
"key": "components/hotSales.blade.php"
},
{
"id": "18",
"key": "components/image.blade.php"
},
{
"id": "19",
"key": "components/imageText.blade.php"
},
{
"id": "20",
"key": "components/megaMenu.blade.php"
},
{
"id": "21",
"key": "components/menuCollapsible.blade.php"
},
{
"id": "22",
"key": "components/publicity.blade.php"
},
{
"id": "23",
"key": "components/singlecommodity.blade.php"
},
{
"id": "24",
"key": "components/text.blade.php"
},
{
"id": "25",
"key": "components/video.blade.php"
}
]
},
{
"name": "Config",
"creatable": false,
"themeAssets": [
{
"id": "26",
"key": "config/settings_data.json"
},
{
"id": "27",
"key": "config/settings_schema.json"
}
]
},
{
"name": "Js",
"creatable": false,
"themeAssets": [
{
"id": "28",
"key": "js/address.js"
},
{
"id": "29",
"key": "js/app.js"
},
{
"id": "30",
"key": "js/cart.js"
},
{
"id": "31",
"key": "js/collectionItem.js"
},
{
"id": "32",
"key": "js/collections.js"
},
{
"id": "33",
"key": "js/common/banner.vue"
},
{
"id": "34",
"key": "js/common/cartFreeSpTips.vue"
},
{
"id": "35",
"key": "js/common/navbar.vue"
},
{
"id": "36",
"key": "js/common/sortselector.vue"
},
{
"id": "37",
"key": "js/custom.js"
},
{
"id": "38",
"key": "js/error404.js"
},
{
"id": "39",
"key": "js/home.js"
},
{
"id": "40",
"key": "js/index.js"
},
{
"id": "41",
"key": "js/login.js"
},
{
"id": "42",
"key": "js/order.js"
},
{
"id": "43",
"key": "js/page.js"
},
{
"id": "44",
"key": "js/productDetail.js"
},
{
"id": "45",
"key": "js/register.js"
},
{
"id": "46",
"key": "js/search.js"
},
{
"id": "47",
"key": "js/view/account/accountbodyaddress.vue"
},
{
"id": "48",
"key": "js/view/account/accountbodyorder.vue"
},
{
"id": "49",
"key": "js/view/account/accounttop.vue"
},
{
"id": "50",
"key": "js/view/account/addressfrom.vue"
},
{
"id": "51",
"key": "js/view/account/index.vue"
},
{
"id": "52",
"key": "js/view/cart/index.vue"
},
{
"id": "53",
"key": "js/view/collections/card.vue"
},
{
"id": "54",
"key": "js/view/collections/index.vue"
},
{
"id": "55",
"key": "js/view/product/descriptabs.vue"
},
{
"id": "56",
"key": "js/view/product/index.vue"
},
{
"id": "57",
"key": "js/view/product/MediaFlat.vue"
},
{
"id": "58",
"key": "js/view/product/MediaLeft.vue"
},
{
"id": "59",
"key": "js/view/product/scrollSlideVertical.vue"
},
{
"id": "60",
"key": "js/view/product/slideVertical.vue"
},
{
"id": "61",
"key": "js/view/productlist/index.vue"
},
{
"id": "62",
"key": "js/view/search/index.vue"
}
]
},
{
"name": "Layouts",
"creatable": false,
"themeAssets": [
{
"id": "63",
"key": "layouts/basic.blade.php"
}
]
},
{
"name": "Pages",
"creatable": false,
"themeAssets": [
{
"id": "64",
"key": "pages/address.blade.php"
},
{
"id": "65",
"key": "pages/cart.blade.php"
},
{
"id": "66",
"key": "pages/collections.blade.php"
},
{
"id": "67",
"key": "pages/collectiontitem.blade.php"
},
{
"id": "68",
"key": "pages/custom.blade.php"
},
{
"id": "69",
"key": "pages/home.blade.php"
},
{
"id": "70",
"key": "pages/index.blade.php"
},
{
"id": "71",
"key": "pages/order.blade.php"
},
{
"id": "72",
"key": "pages/product_detail.blade.php"
},
{
"id": "73",
"key": "pages/search.blade.php"
}
]
},
{
"name": "Sass",
"creatable": false,
"themeAssets": [
{
"id": "74",
"key": "sass/app.scss"
},
{
"id": "75",
"key": "sass/applications.scss"
},
{
"id": "76",
"key": "sass/banner.scss"
},
{
"id": "77",
"key": "sass/collectionItems.scss"
},
{
"id": "78",
"key": "sass/collections.scss"
},
{
"id": "79",
"key": "sass/components.scss"
},
{
"id": "80",
"key": "sass/fonts.scss"
},
{
"id": "81",
"key": "sass/foot.scss"
},
{
"id": "82",
"key": "sass/global.scss"
},
{
"id": "83",
"key": "sass/header.scss"
},
{
"id": "84",
"key": "sass/hotsales.scss"
},
{
"id": "85",
"key": "sass/imagetext.scss"
},
{
"id": "86",
"key": "sass/index.scss"
},
{
"id": "87",
"key": "sass/pages.scss"
},
{
"id": "88",
"key": "sass/productDetail.scss"
},
{
"id": "89",
"key": "sass/publicity.scss"
},
{
"id": "90",
"key": "sass/text.scss"
},
{
"id": "91",
"key": "sass/video.scss"
}
]
},
{
"name": "Theme.json",
"creatable": false,
"themeAssets": [
{
"id": "92",
"key": "theme.json"
}
]
}
]
}
}
}

5、由于模板文件列表，仅需要 key 字段。最后调整后的响应结构。如图5

图5

query{
onlineStoreTheme(themeId: "vogue"){
... ____
}
}
fragment ____ on OnlineStoreTheme {
themeAssetList {
themeId
name
key
creatable
themeAssetKeys
}
}

{
"data": {
"onlineStoreTheme": {
"themeAssetList": [
{
"themeId": "vogue",
"name": "Assets",
"key": "assets",
"creatable": false,
"themeAssetKeys": [
"assets/iconfont/iconfont.css",
"assets/iconfont/iconfont.js",
"assets/iconfont/iconfont.json",
"assets/iconfont/iconfont.woff2"
]
},
{
"themeId": "vogue",
"name": "Auth",
"key": "auth",
"creatable": false,
"themeAssetKeys": [
"auth/login.blade.php",
"auth/register.blade.php"
]
},
{
"themeId": "vogue",
"name": "Components",
"key": "components",
"creatable": false,
"themeAssetKeys": [
"components/carousel.blade.php",
"components/collections.blade.php",
"components/combinationRecommendation.blade.php",
"components/css.blade.php",
"components/foot.blade.php",
"components/footInfo.blade.php",
"components/footMenu.blade.php",
"components/footSubscribe.blade.php",
"components/footTextImg.blade.php",
"components/header.blade.php",
"components/hotSales.blade.php",
"components/image.blade.php",
"components/imageText.blade.php",
"components/megaMenu.blade.php",
"components/menuCollapsible.blade.php",
"components/publicity.blade.php",
"components/singlecommodity.blade.php",
"components/text.blade.php",
"components/video.blade.php"
]
},
{
"themeId": "vogue",
"name": "Config",
"key": "config",
"creatable": false,
"themeAssetKeys": [
"config/settings_data.json",
"config/settings_schema.json"
]
},
{
"themeId": "vogue",
"name": "Js",
"key": "js",
"creatable": false,
"themeAssetKeys": [
"js/address.js",
"js/app.js",
"js/cart.js",
"js/collectionItem.js",
"js/collections.js",
"js/common/banner.vue",
"js/common/cartFreeSpTips.vue",
"js/common/navbar.vue",
"js/common/sortselector.vue",
"js/custom.js",
"js/error404.js",
"js/home.js",
"js/index.js",
"js/login.js",
"js/order.js",
"js/page.js",
"js/productDetail.js",
"js/register.js",
"js/search.js",
"js/view/account/accountbodyaddress.vue",
"js/view/account/accountbodyorder.vue",
"js/view/account/accounttop.vue",
"js/view/account/addressfrom.vue",
"js/view/account/index.vue",
"js/view/cart/index.vue",
"js/view/collections/card.vue",
"js/view/collections/index.vue",
"js/view/product/descriptabs.vue",
"js/view/product/index.vue",
"js/view/product/MediaFlat.vue",
"js/view/product/MediaLeft.vue",
"js/view/product/scrollSlideVertical.vue",
"js/view/product/slideVertical.vue",
"js/view/productlist/index.vue",
"js/view/search/index.vue"
]
},
{
"themeId": "vogue",
"name": "Layouts",
"key": "layouts",
"creatable": false,
"themeAssetKeys": [
"layouts/basic.blade.php"
]
},
{
"themeId": "vogue",
"name": "Pages",
"key": "pages",
"creatable": false,
"themeAssetKeys": [
"pages/address.blade.php",
"pages/cart.blade.php",
"pages/collections.blade.php",
"pages/collectiontitem.blade.php",
"pages/custom.blade.php",
"pages/home.blade.php",
"pages/index.blade.php",
"pages/order.blade.php",
"pages/product_detail.blade.php",
"pages/search.blade.php"
]
},
{
"themeId": "vogue",
"name": "Sass",
"key": "sass",
"creatable": false,
"themeAssetKeys": [
"sass/app.scss",
"sass/applications.scss",
"sass/banner.scss",
"sass/collectionItems.scss",
"sass/collections.scss",
"sass/components.scss",
"sass/fonts.scss",
"sass/foot.scss",
"sass/global.scss",
"sass/header.scss",
"sass/hotsales.scss",
"sass/imagetext.scss",
"sass/index.scss",
"sass/pages.scss",
"sass/productDetail.scss",
"sass/publicity.scss",
"sass/text.scss",
"sass/video.scss"
]
},
{
"themeId": "vogue",
"name": "Theme.json",
"key": "theme.json",
"creatable": false,
"themeAssetKeys": [
"theme.json"
]
}
]
}
}
}