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

Question

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

    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），问题是不接受动态参数（因此 静态名称）

---

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