Graphql 查询返回 10 位数字而不是查询数据

Question

我有这个着陆页是使用 gatsby-node.js 中的页面查询生成的，理想情况下会列出类别 x 中包含的所有产品。通过页面查询，我在上下文中传递类别名称。

    createPage({
        path: `/landings/${pathName}`,
        component: path.resolve(`src/templates/product-pages/landing.js`),
        context: {
            data: cat.name,
        },

在 Landing 函数中，我将类别名称传递给另一个名为 Products 的函数，该函数包含一个查询，列出父类别的所有子产品并将它们传回 Landing。

const Landing = (data) => {
    const title = data;
    return (
        <div>
            <h1>{title.pageContext.data}</h1>
            <Products category={"product category"}/>
        </div>
    )
}
export default Landing;

const Products = ({category}) => {   
    console.log(query);
    return (
        <div>            
        </div>
    )
}

export const query = graphql`
query {
    allTaxonomyTermProductCategories(filter: {name: {in: "Backlit Film"}}) {
      nodes {
        relationships {
          commerce_product_variation__acyrlic {
            sku
          }
          commerce_product_variation__vinyl {
            sku
          }
        }
      }
    }
  }
`;

export default Products;

举个例子，我正在传递“背光电影”，但希望它传递从 Landing 获得的类别名称。我遇到的第一个问题是 Products 函数返回一个 10 位哈希码 2403848351，我知道这与直接调用查询有关，但不确定如何修复它。

Answer 1

那样你的方法行不通。您正在尝试创建一个 page query，正如名称所示，它仅适用于顶级组件（页面），在您的情况下，Landing 组件，而不是 Products.

您要做的是将 GraphQL 查询向上移动到 Landing 组件，获取结果，并将产品向下钻取到 Products。类似于：

const Landing = ({data}) => {   
        return <div>
            <h1>{title.pageContext.data}</h1>
            <Products products={data.allTaxonomyTermProductCategories.nodes}/>
        </div>
}

export const query = graphql`
query {
    allTaxonomyTermProductCategories(filter: {name: {in: "Backlit Film"}}) {
      nodes {
        relationships {
          commerce_product_variation__acyrlic {
            sku
          }
          commerce_product_variation__vinyl {
            sku
          }
        }
      }
    }
  }
`;

export default Landing;

或者，您可以使用 useStaticQuery hook，这将允许您在低级组件中使用查询（在本例中为 Products），问题是不接受动态参数（因此 static 名称）

关于“10位数字”。您正在打印 query，其中只是查询的一个实例。不是包含的数据。您的数据将存储在 props.data 中，这就是为什么在我的方法中我将 props 解构为 data ({data}).

Graphql 查询返回 10 位数字而不是查询数据

Graphql query returning 10 digit number instead of query data

reactjs

graphql

gatsby