Some thoughts and practices for migrating from REST to GraphQL (responsive to nested list structures), refer to Shopify
1. Reference: Some thoughts and practices to migrate from REST to GraphQL, refer to GitHub. On the left is the top-level directory structure of the template file. For each top-level directory, you need to set whether to allow new files. as shown in Figure 1
Figure 1
2. This plan draws on the response structure of Shopify’s GraphQL, but it is a structure that directly responds to HTML, and does not use GraphQL. as shown in Figure 2
Figure 2
3. Drawing on the Products of Shopify’s GraphQL, each product has its own picture list. as shown in Figure 3
Figure 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’s products are equivalent to the top-level directory list of template files. Each product has its own picture list, which is equivalent to each top-level directory has its own template file list. A similar response structure was finally implemented. as shown in Figure 4
Figure 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. Due to the list of template files, only the key field is required. The final adjusted response structure. as shown in Figure 5
Figure 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"
]
}
]
}
}
}
