CODEWITHSUNDEEP
reactjsregexgraphqlescapinggatsby
iamgarrett
iamgarrett

Reputation: 49

graphql regex filter keeps giving invalid escape sequence errors

No matter what I try, like escaping \w+ with \\w+ or even \\\\w+ I cannot get gatsby/graphql to understand my query. Or so it seems. Many times I can see the exact data I want rendered on the page EXACTLY how I'd like, but it's obscured by gatsby's error message overlay telling me that graphql is experiencing an invalid escape sequence around \w. Here is my code:

File structure:

site/
-src/
--content/
---adventures/
----example/
-----index.mdx
-----etc...
----doip/
-----index.mdx
-----etc...
----lomp/
-----index.mdx
-----etc...

Desired result:

I have three directories with .mdx sub-pages I would like to list on /src/pages/adventures.js. I want to grab only the indexes listed above. There are many other directories with other .mdx files within each adventure directory so any graphql query without some sort of filter provides dozens of results, when I only want the three. I want what should be /adventures/\w+/$/i but nothing works.

My query:

My query has taken MANY forms as I've tried to troubleshoot this, but as-is, this doesn't work. Neither does "/adventures/\\\\w+/$/i", or "/adventures\/\w+\/$/i" or any variation I've tried or read about. My query as written on my adventures.js file started as:

query AdventuresListPageQuery {
    allMdx(filter: {fields: {slug: {regex: "/adventures\\\\/\\\\w+\\\\/$/i"}}}) {
      edges {
        node {
          id
          frontmatter {
            title
            setting
            levels
            playernum
          }
          fields {
            slug
          }
          body
        }
      }
    }
  }

Please help me craft a query that only grabs the files I need :(

Upvotes: 1

Views: 931

Answers (1)

iamgarrett
iamgarrett

Reputation: 49

Changing my query filter to instead use .+ instead of \w+ seems to achieve my desired results. Seems like a less explicit solution than I'd like, and I'm not sure how extensible this solution will be as my site expands, but the labor of trying to figure out the exact way gatsby/graphql want \w+ formatted is too irritating for the moment.

final query filter: filter: {slug: {regex: "/adventures/.+/$/"}}

Upvotes: 1

Related Questions