[英]How to use regex in graphql query with gatsby
I have created page query for my individual product page.我已经为我的个人产品页面创建了页面查询。
It does goes to an individual product and I want to add a filter like if multiple product has similar SKU I need to show them.它确实适用于单个产品,我想添加一个过滤器,例如如果多个产品具有相似的 SKU,我需要向它们展示。 Query works fine in Grphiql interface but in code it only show one node.
查询在 Grphiql 界面中工作正常,但在代码中它只显示一个节点。
Grahiql Query 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
}
}
}
}
In query Variables section, I am passing variable like this在查询变量部分,我正在传递这样的变量
{
"sku": "/DW20DK18/"
}
allProductCsv only resulted in one node in gatsby though it returns multiple nodes in graphiql allProductCsv 仅在 gatsby 中产生一个节点,尽管它在 graphiql 中返回多个节点
Gatsby-node.js 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
};
I am passing SKU along side of ID in Context in gatsby-node.js我在 gatsby-node.js 的 Context 中沿 ID 一侧传递 SKU
Your workaround should work except for the fact that you are using a template literal to hold a dynamic regular expression.除了您使用模板文字来保存动态正则表达式这一事实之外,您的解决方法应该有效。 For this approach I would try to do something like:
对于这种方法,我会尝试执行以下操作:
context: {
id: node.id,
sku: new RegExp(String.raw `${node.sku}`, 'i'), //add other flags if needed
}
Alternatively try:或者尝试:
new RegExp(node.sku, 'i').toString()
The RegExp
constructor should do the trick for this use-case with a little trick to force a raw string (since the comparison within GraphQL needs to be represented by a string value). RegExp
构造函数应该通过一个小技巧来强制使用原始字符串(因为 GraphQL 中的比较需要用字符串值表示)来解决这个用例的技巧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.