變量“$productSlug”從未在“SingleProduct”操作中使用。 Graphql 錯誤。 變量在我的 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已通過上下文正確提升，但從未用於查詢內的任何類型的過濾操作。

我建議您在 GraphiQL 游樂場硬編碼$productSlug之前檢查它以檢查 output。