如何在带有 gatsby 的 graphql 查询中使用正则表达式

Posted 2023-03-08

【中文标题】如何在带有 gatsby 的 graphql 查询中使用正则表达式

【英文标题】：How to use regex in graphql query with gatsby

【发布时间】：2021-08-07 06:35:24

【问题描述】：

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

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

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 在 gatsby 中只产生一个节点，尽管它在 graphiql 中返回多个节点

盖茨比-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 的 Context 中沿 ID 一侧传递 SKU

【参考方案1】：

除了您使用模板文字来保存动态正则表达式这一事实之外，您的解决方法应该有效。对于这种方法，我会尝试执行以下操作：

        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: Variable "$sku" got invalid value ;字符串不能表示非字符串值：

我又添加了两个试验。我相信这应该为您的new RegExp(node.sku, 'i').toString()

解决问题