Gatsby graphql传递变量问题

Question

我在gatsby中使用magento 2查询。当我尝试动态创建页面时从gatsby-node.js文件传递变量时，正在显示和处理具有正确数据及其ID的页面，但是在运行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

                        },
                    });
                }                        
            })
        );
    });
};

下面的我的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    
        }
        }
    } 
  }
}
`;

页面上的数据基于类别呈现