变量“$productSlug”从未在“SingleProduct”操作中使用。图形错误。变量在我的 Gatsby graphql 查询中不起作用

Posted 2023-03-08

【中文标题】变量“$productSlug”从未在“SingleProduct”操作中使用。图形错误。变量在我的 Gatsby graphql 查询中不起作用

【英文标题】：Variable "$productSlug" is never used in operation "SingleProduct". Graphql error. Variables are not working in my Gatsby graphql queries

【发布时间】：2022-01-15 09:32:05

【问题描述】：

我收到此错误：变量“$productSlug”从未在操作“SingleProduct”中使用。

我还使用 gatsby-source-wordpress 来查询从 wordpress 到 gatsby 的字段。我还卸载了 Gatsby 并重新安装它以查看它是否适用于不同的版本，但它没有。

我在整个互联网上搜索并堆栈溢出以寻找答案，我真的认为这一定是 Gatsby 或 gatsby-source-wordpress 的错误，

这是代码：

const path = require("path");
const  createFilePath  = require(`gatsby-source-filesystem`);

exports.onCreatePage = ( page, actions ) => 
  const  createPage  = actions;

  if (page.path.match(/products/)) 
    page.context.layout = "ArchiveProduct";
    createPage(page);
  

  if (page.path.match(/products\/([^\/]+$)/)) 
    page.context.layout = "SingleProduct";
    createPage(page);
  
;

exports.onCreateNode = ( node, getNode, actions ) => 
  const  createNodeField  = actions;
  if (node.internal.type === `allWpProduct`) 
    const slug = createFilePath( node, getNode, basePath: `pages` );
    createNodeField(
      node,
      name: `slug`,
      value: slug,
    );
  
;

exports.createPages = async function ( graphql, actions ) 
  const  data  = await graphql(`
    query SingleProduct 
      allWpProduct 
        nodes 
          uri
          slug
          id
        
      
    
  `);

  data.allWpProduct.nodes.forEach((node) => 
    // const slug = node.slug;
    actions.createPage(
      path: "/products/" + node.slug,
      component: path.resolve("./src/templates/SingleProduct.js"),
      context: 
        productSlug: node.slug,
        productId: node.id,
        layout: "SingleProduct",
      ,
    );
  );
;

这是查询：

export const query = graphql`
  query SingleProduct($productSlug: String!) 
    wpProduct(slug:  eq: "$productSlug" ) 
      title
      slug
      link
      id
      date(formatString: "MMMM DD, YYYY")
      product 
        description
        price
        slug
        photo 
          localFile 
            childImageSharp 
              gatsbyImageData
            
          
        
      
    
  
`;

【参考方案1】：

尝试以下方法：

export const query = graphql`
  query SingleProduct($productSlug: String!) 
    wpProduct(filter: slug:  eq: "$productSlug" ) 
      title
      slug
      link
      id
      date(formatString: "MMMM DD, YYYY")
      product 
        description
        price
        slug
        photo 
          localFile 
            childImageSharp 
              gatsbyImageData
            
          
        
      
    
  
`;

出现您的问题是因为 $productSlug 已通过上下文正确提升，但从未在查询内的任何 sort of filtering 操作中使用。

我建议您先在 GraphiQL 操场上对$productSlug 进行硬编码以检查输出。

【讨论】：

它仍然不工作，它给了我同样的错误：变量 "$productSlug" is never used in operation "SingleProduct" graphql/template-strings

您是否按照我的建议 (localhost:8000/___graphql) 在 graphiql 操场上尝试过？检查过滤器和那里可用的节点

是的，我已经尝试过 /_graphql 和 /___graphql，也许是 Gatsby 的版本？因为它可以在另一个站点中工作，所以我使用了这个由 Gatsby 构建的变量...