Javascript 如何在gatsby的graphql查询中使用regex

我已经为我的个人产品页面创建了页面查询

它确实适用于单个产品，我想添加一个过滤器，例如，如果多个产品具有类似的SKU，我需要显示它们。查询在GRPHIQ接口中运行良好，但在代码中它只显示一个节点

Grahiql查询

query ($id: String, $sku: String) {
  productsCsv(id: {eq: $id}) {
    id
    name
    productCategory
    sizes
    sku
    stock
    instock
    description
    colors
    templateKey
    price
    discount
    fields {
      slug
    }
  }
  allProductsCsv(filter: {sku: {regex: $sku}, instock: {eq: "TRUE"}}) {
    edges {
      node {
        id
        instock
        stock
        sku
        colors
        sizes
      }
    }
  }
}

在查询变量部分，我像这样传递变量

{
 "sku": "/DW20DK18/"
}

allProductCsv虽然在graphiql中返回多个节点，但在gatsby中只生成一个节点

Gatsby-node.js

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


const onCreateNode = ({node,actions,getNode}) => {
    const {createNodeField} = actions
    if(node.internal.type === `MarkdownRemark`) {
        const value = createFilePath({node, getNode})
        createNodeField({
            name:`slug`,
            node,
            value
        })
    }
    if(node.internal.type === `ProductsCsv`) {
        const value = node.name
        const processedSlug = value.replace(/\s+/g, '-').toLowerCase();
        createNodeField({
            name:`slug`,
            node,
            value: processedSlug
        })
    }
}

const createPages = async ({actions,graphql}) => {
    const {createPage} = actions
    const result = await graphql(`
    {
        allMarkdownRemark {
            edges {
                node {
                    frontmatter {
                    productColors
                    age
                    }
                }
            }
        }
        allProductsCsv {
            edges {
                node {
                    id
                    sku
                    fields{
                        slug
                    }
                    templateKey
                    productCategory
                }
            }
        }
    }
    `)
    if(result.errors){
        console.error(result.errors)
    }
    result.data.allProductsCsv.edges.forEach(({ node }) => {
        console.log(node.productCategory)
        createPage({
            path: `${String(node.productCategory)}/${node.fields.slug}`,
            component: path.resolve(
                `src/templates/${String(node.templateKey)}.js`
            ),
            context: {
                id: node.id,
                sku: `/${node.sku}/`.toString(). //Passing SKU from Here
            }
        })
    })
}

module.exports = {
    /*
    1. function for how to create page
    2. On create node
    */

    onCreateNode,
    createPages
};

---

我在gatsby node.js的上下文中沿着ID的一侧传递SKU，除了使用模板文本来保存动态正则表达式之外，您的解决方法应该可以工作。对于这种方法，我将尝试执行以下操作：

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


const onCreateNode = ({node,actions,getNode}) => {
    const {createNodeField} = actions
    if(node.internal.type === `MarkdownRemark`) {
        const value = createFilePath({node, getNode})
        createNodeField({
            name:`slug`,
            node,
            value
        })
    }
    if(node.internal.type === `ProductsCsv`) {
        const value = node.name
        const processedSlug = value.replace(/\s+/g, '-').toLowerCase();
        createNodeField({
            name:`slug`,
            node,
            value: processedSlug
        })
    }
}

const createPages = async ({actions,graphql}) => {
    const {createPage} = actions
    const result = await graphql(`
    {
        allMarkdownRemark {
            edges {
                node {
                    frontmatter {
                    productColors
                    age
                    }
                }
            }
        }
        allProductsCsv {
            edges {
                node {
                    id
                    sku
                    fields{
                        slug
                    }
                    templateKey
                    productCategory
                }
            }
        }
    }
    `)
    if(result.errors){
        console.error(result.errors)
    }
    result.data.allProductsCsv.edges.forEach(({ node }) => {
        console.log(node.productCategory)
        createPage({
            path: `${String(node.productCategory)}/${node.fields.slug}`,
            component: path.resolve(
                `src/templates/${String(node.templateKey)}.js`
            ),
            context: {
                id: node.id,
                sku: `/${node.sku}/`.toString(). //Passing SKU from Here
            }
        })
    })
}

module.exports = {
    /*
    1. function for how to create page
    2. On create node
    */

    onCreateNode,
    createPages
};

        context: {
            id: node.id,
            sku: new RegExp(String.raw `${node.sku}`, 'i'), //add other flags if needed 
        }

或者尝试：

new RegExp(node.sku, 'i').toString()

---

RegExp

构造函数应该在这个用例中使用一些小技巧来强制使用原始字符串（因为GraphQL中的比较需要用字符串值表示）。

感谢Ferran帮助我。更新后，它开始给我类似于GraphQLError的错误：变量“$sku”得到了无效值{}；字符串不能表示非字符串值：{}我又添加了两个试验。我相信这对您的

新RegExp（node.sku，'I'）.toString（）