Блог

Я работаю с базовым шаблоном веб-сайта Gatsby Shopify здесь https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify /

Я создаю страницу списка продуктов, а также создаю страницы, относящиеся к конкретному продукту, в соответствии с примером. Когда приложение полностью загружается после разработки gatsby, я вижу вызов allShopifyProduct в проводнике graphql, но перед сборкой я вижу следующую ошибку

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot read property 'allShopifyProduct' of undefined

  31 |   // Iterate over all products and create a new page using a template
  32 |   // The product "handle" is generated automatically by Shopify
> 33 |   result.data.allShopifyProduct.edges.forEach(({ node }) => {
     |               ^
  34 |     createPage({
  35 |       path: `/product/${node.handle}`,
  36 |       component: path.resolve(`./src/templates/product.js`),

File: gatsby-node.js:33:15
 

После загрузки сервера я вижу это

Поэтому из-за этого я получаю HTTP 404, когда запрашиваю конкретный продукт, подобный этому

 http://localhost:8000/product/short-sleeve-t-shirt
 

Не уверен, что я делаю не так или как это обойти.

Что в конечном итоге решило эту проблему для меня, так это то, что пример Gatsby искал данные API, которые больше не были доступны в Shopify — в частности, параметр availableForSale. Как только я удалил это из примера запроса GraphQL в gatsby-node.js и повторно запустите сборку разработчика, она сгенерировала шаблонные страницы, как и ожидалось. Обязательно прочитайте всю возвращающуюся ошибку и посмотрите, сможете ли вы точно определить, где она дает сбой.

Если вы следовали этому руководству или аналогичному, вы должны были сохранить свои данные Shopify в переменных среды. Gatsby по умолчанию использует .env.development file for gatsby develop и .env.production file for gatsby build .

Если ваш код работает только в одной среде, ваша проблема может возникнуть из-за того, что вы не установили .env.production с переменными, что делает Gatsby недоступным для доступа к Shopify и не может определить схему, которая будет решена вашим запросом GraphQL.

Я предполагаю, что вам не хватает .env.production файла. Просто создайте его в корне вашего проекта как .env.development .

Ресурсы, использующие gatsby-source-shopify плагин:

• https://github.com/AlexanderProd/gatsby-shopify-starter
• https://github.com/ecomloop/headless-starter
• https://github.com/ohduran/gatsby-starter-hello-world-shopify