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

Question

我收到此错误：变量“$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
            }
          }
        }
      }
    }
  }
`;

Answer 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 进行硬编码以检查输出。