Я использую запрос magento 2 в Гэтсби. Когда я пытаюсь передать переменную из файла gatsby-node.js при динамическом создании страниц, страницы с правильными данными с их идентификатором отображаются и обрабатываются, но в моей командной строке при запуске gatsby develop
я вижу следующую проблему.
Мой файл gatsby-node.js:
const path = require('path');
var webpack = require('webpack');
exports.createPages = ({ graphql, actions }) => {
const { createPage } = actions;
const createPaginatedPages = require("gatsby-paginate");
return new Promise((resolve, reject) => {
resolve(
graphql(
`
query productsQuery {
magento {
carDet:
category(id: 2) {
children_count
name
image
children {
id
url_path
level
}
}
}
}
`
).then(result => {
if (result.errors) {
reject(result.errors);
}
let categories = result.data.magento.carDet.children;
for (let item of categories) {
createPage({
path: `category/${item.url_path}/`,
component: path.resolve(`./src/pages/category.js`),
context: {
category_id: item.id,
url_path: item.url_path
},
});
}
})
);
});
};
Файл My category.js ниже
import React from 'react'
import { graphql } from 'gatsby'
import { Link } from "gatsby"
import LayoutOther from "../components/layout-other"
const CatalogProduct = ({ product }) => {
return (
<div class="col-sm-12 col-md-4 col-lg-3">
<div class="product">
<Link to={'product-list/'+product.url_path}>
<img src={process.env.MAGENTO_IMAGE_URL2 + '/pub/media/catalog/category/' + product.image} alt="" />
<h3 class="text-center">{product.name}</h3>
</Link>
</div>
</div>
)
}
class Category extends React.Component {
render() {
return (
<LayoutOther>
<div class="main-content">
<div class="row list_products">
{
this.props.data.magento.category.children.map(
(product, key) =>
<CatalogProduct key={key} product={product} />
)
}
</div>
</div>
</LayoutOther>
)
}
}
export default Category
export const query = graphql`
query categoryQuery($category_id: Int) {
magento{
category(id: $category_id) {
children_count
name
children {
id
name
image
url_path
level
children {
id
url_path
level
name
image
}
}
}
}
}
`;
Данные на странице отображаются на основе категорий