Escaping word character selector in Gatsby GraphQL regex filter










0















I am currently using Gatsby to build a documentation site for a component library that I have developed. I have installed the Transformer-Remark plugin which creates javascript objects for each markdown file within my site's structure.



As the site is for documentation, I have a Component detail page which outlines how a component can be used by a consumer and the majority of the content of this page is derived from the README.MD of the corresponding package on NPM.



On the left hand side of this page is a dynamic menu which lists the components I have created. The menu makes use of a GraphQL query within a custom Gatsby template to split the components into 3 categories based on a RegEx filter of their fileAbsolutePath like so:






export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;





However when I try to run Gatsby Develop I get the following error:



Syntax Error: Invalid character escape sequence: w.



I have tried adding a second backslash before the string in question to escape it but this doesn't work.



Is there a special way of escaping certain characters in RegEx filters in GraphQL?



Edit:



I should add that the same RegEx works fine on this RegEx testing site:
https://regexr.com/436ep










share|improve this question
























  • It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

    – Wiktor Stribiżew
    Nov 15 '18 at 14:28












  • That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

    – James Howell
    Nov 15 '18 at 14:31











  • Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

    – Wiktor Stribiżew
    Nov 15 '18 at 14:40












  • Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

    – James Howell
    Nov 15 '18 at 14:47















0















I am currently using Gatsby to build a documentation site for a component library that I have developed. I have installed the Transformer-Remark plugin which creates javascript objects for each markdown file within my site's structure.



As the site is for documentation, I have a Component detail page which outlines how a component can be used by a consumer and the majority of the content of this page is derived from the README.MD of the corresponding package on NPM.



On the left hand side of this page is a dynamic menu which lists the components I have created. The menu makes use of a GraphQL query within a custom Gatsby template to split the components into 3 categories based on a RegEx filter of their fileAbsolutePath like so:






export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;





However when I try to run Gatsby Develop I get the following error:



Syntax Error: Invalid character escape sequence: w.



I have tried adding a second backslash before the string in question to escape it but this doesn't work.



Is there a special way of escaping certain characters in RegEx filters in GraphQL?



Edit:



I should add that the same RegEx works fine on this RegEx testing site:
https://regexr.com/436ep










share|improve this question
























  • It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

    – Wiktor Stribiżew
    Nov 15 '18 at 14:28












  • That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

    – James Howell
    Nov 15 '18 at 14:31











  • Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

    – Wiktor Stribiżew
    Nov 15 '18 at 14:40












  • Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

    – James Howell
    Nov 15 '18 at 14:47













0












0








0








I am currently using Gatsby to build a documentation site for a component library that I have developed. I have installed the Transformer-Remark plugin which creates javascript objects for each markdown file within my site's structure.



As the site is for documentation, I have a Component detail page which outlines how a component can be used by a consumer and the majority of the content of this page is derived from the README.MD of the corresponding package on NPM.



On the left hand side of this page is a dynamic menu which lists the components I have created. The menu makes use of a GraphQL query within a custom Gatsby template to split the components into 3 categories based on a RegEx filter of their fileAbsolutePath like so:






export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;





However when I try to run Gatsby Develop I get the following error:



Syntax Error: Invalid character escape sequence: w.



I have tried adding a second backslash before the string in question to escape it but this doesn't work.



Is there a special way of escaping certain characters in RegEx filters in GraphQL?



Edit:



I should add that the same RegEx works fine on this RegEx testing site:
https://regexr.com/436ep










share|improve this question
















I am currently using Gatsby to build a documentation site for a component library that I have developed. I have installed the Transformer-Remark plugin which creates javascript objects for each markdown file within my site's structure.



As the site is for documentation, I have a Component detail page which outlines how a component can be used by a consumer and the majority of the content of this page is derived from the README.MD of the corresponding package on NPM.



On the left hand side of this page is a dynamic menu which lists the components I have created. The menu makes use of a GraphQL query within a custom Gatsby template to split the components into 3 categories based on a RegEx filter of their fileAbsolutePath like so:






export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;





However when I try to run Gatsby Develop I get the following error:



Syntax Error: Invalid character escape sequence: w.



I have tried adding a second backslash before the string in question to escape it but this doesn't work.



Is there a special way of escaping certain characters in RegEx filters in GraphQL?



Edit:



I should add that the same RegEx works fine on this RegEx testing site:
https://regexr.com/436ep






export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;





export const pageQuery = graphql`
query($path: String!)
pageData:
markdownRemark(fields: slug: eq: $path )
html
fields
slug
title

fileAbsolutePath



atoms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-atoms-(w+)/README/")
edges
node
fields
slug
title





molecules:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-molecules-(w+)/README/")
edges
node
fields
slug
title




organisms:
allMarkdownRemark(sort: order: ASC, fields: [fields___title], limit: 1000, filter: fileAbsolutePath: regex: "/dl-organisms-(w+)/README/")
edges
node
fields
slug
title





`;






regex graphql graphql-js gatsby






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 14:32







James Howell

















asked Nov 15 '18 at 14:27









James HowellJames Howell

38221125




38221125












  • It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

    – Wiktor Stribiżew
    Nov 15 '18 at 14:28












  • That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

    – James Howell
    Nov 15 '18 at 14:31











  • Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

    – Wiktor Stribiżew
    Nov 15 '18 at 14:40












  • Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

    – James Howell
    Nov 15 '18 at 14:47

















  • It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

    – Wiktor Stribiżew
    Nov 15 '18 at 14:28












  • That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

    – James Howell
    Nov 15 '18 at 14:31











  • Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

    – Wiktor Stribiżew
    Nov 15 '18 at 14:40












  • Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

    – James Howell
    Nov 15 '18 at 14:47
















It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

– Wiktor Stribiżew
Nov 15 '18 at 14:28






It should be regex: /dl-atoms-(w+)/README/, without double quotes. The backslash must be escaped since it is a regex delimiter char.

– Wiktor Stribiżew
Nov 15 '18 at 14:28














That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

– James Howell
Nov 15 '18 at 14:31





That leads to a different error: Syntax Error: Cannot parse the unexpected character "/". Do I then need to go through and escape the opening forward slash, etc. I'm pretty sure I copied the syntax from the Gatsby or GraphQL documentation so I was under the impression the quotes are required ?!

– James Howell
Nov 15 '18 at 14:31













Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

– Wiktor Stribiżew
Nov 15 '18 at 14:40






Well, it is strange as it seems "/dl-molecules-(\w+)/README/" should work. Maybe the README must match the whole string, try "/dl-molecules-(\w+)/.*README.*/"

– Wiktor Stribiżew
Nov 15 '18 at 14:40














Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

– James Howell
Nov 15 '18 at 14:47





Same error: Syntax Error: Invalid character escape sequence: w graphql/template-strings

– James Howell
Nov 15 '18 at 14:47












0






active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321612%2fescaping-word-character-selector-in-gatsby-graphql-regex-filter%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown

























0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321612%2fescaping-word-character-selector-in-gatsby-graphql-regex-filter%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







這個網誌中的熱門文章

How to read a connectionString WITH PROVIDER in .NET Core?

Node.js Script on GitHub Pages or Amazon S3

Museum of Modern and Contemporary Art of Trento and Rovereto