Escaping word character selector in Gatsby GraphQL regex filter
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
regex graphql graphql-js gatsby
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
add a comment |
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
regex graphql graphql-js gatsby
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
It should beregex: /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 theREADMEmust 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
add a comment |
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
regex graphql graphql-js gatsby
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
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
regex graphql graphql-js gatsby
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
edited Nov 15 '18 at 14:32
James Howell
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
asked Nov 15 '18 at 14:27
James HowellJames Howell
37221125
37221125
It should beregex: /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 theREADMEmust 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
add a comment |
It should beregex: /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 theREADMEmust 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
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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 theREADMEmust 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