Giters

travis-r6s / gridsome-starter-shopify

Gridsome Shopify Starter

Home Page:https://gridsome-shopify-starter.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compiling Error - Cannot query field "image" on type "ShopifyCollection".

julesbravo opened this issue · comments

commented

I'm getting an error when I run gridsome develop. The shop name and storefront token are setup properly. The storefront token has full permissions.

ERROR Failed to compile with 2 errors 1:33:47 PM

error in ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "image" on type "ShopifyCollection".

GraphQL request:108:9
107 | descriptionHtml
108 | image {
| ^
109 | altText
at Object.module.exports (/Users/jbathgate/Projects/gridsome-starter-shopify/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

@ ./src/pages/Index.vue?vue&type=custom&index=0&blockType=page-query 1:0-353 1:369-372 1:374-724 1:374-724
@ ./src/pages/Index.vue
@ ./src/.temp/routes.js
@ ./node_modules/gridsome/app/router.js
@ ./node_modules/gridsome/app/entry.sockjs.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

error in ./src/pages/Collections.vue?vue&type=custom&index=0&blockType=page-query

Module build failed (from ./node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js):
Error: Cannot query field "image" on type "ShopifyCollection".

GraphQL request:70:9
69 | descriptionHtml
70 | image {
| ^
71 | altText
at Object.module.exports (/Users/jbathgate/Projects/gridsome-starter-shopify/node_modules/gridsome/lib/plugins/vue-components/lib/loaders/page-query.js:29:23)

@ ./src/pages/Collections.vue?vue&type=custom&index=0&blockType=page-query 1:0-359 1:375-378 1:380-736 1:380-736
@ ./src/pages/Collections.vue
@ ./src/.temp/routes.js
@ ./node_modules/gridsome/app/router.js
@ ./node_modules/gridsome/app/entry.sockjs.js
@ multi webpack/hot/dev-server webpack-hot-middleware/client?name=app&reload=true&noInfo=true ./node_modules/gridsome/app/entry.client.js ./node_modules/gridsome/app/entry.sockjs.js

commented

Apparently if you have no collections with images you get this error. Uploading an image for a collection fixes this issue. Might want to handle this more gracefully?

commented

Now when I try to load the page I'm getting this:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'src' of undefined"

found in

---> <Index> at src/pages/Index.vue
       <App> at node_modules/gridsome/app/fallbacks/App.vue
         <Root>
commented

I believe this has to do with some products not having images.

commented

@julesbravo Correct - you will need to add images to both types to get this initial starter working. But if you don't have images added, you can easily modify by removing the relevant queries.