Graphql-code-generator: gql not parsed when filename contains [brackets] used in Next.js dynamic routing

[msheakoski]

Describe the bug
gql tags are not parsed by graphql-code-generator when they are located in files or directories that use Next.js's dynamic filesystem routing conventions such as pages/[directory]/[mypage].tsx (basically path contains brackets)

To Reproduce

1. create a file src/pages/[directory]/[mypage].tsx
2. add a simple query such as

gql`query GetDogs { dogs }`

1. run graphql-code-generator

Here is a CodeSandbox reproduction:

My GraphQL schema:

type Query {
  dogs: [String!]!
}

My codegen.yml config file:

schema: src/type-defs.ts
generates:
  src/hooks-generated.tsx:
    documents:
      - src/**/*.ts
      - src/**/*.tsx
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withComponent: false
      withHOC: false
      withHooks: true

Expected behavior
src/hooks-generated.tsx should contain types for the GetDogs query if it was in a path containing brackets.

I believe this is the same issue that Next.js encountered with Prettier not being able to handle paths with brackets. They ended up having to use shell-quote to properly escape the paths, something about it interfering with globbing maybe?

Here is a file showing how Next.js fixed it.

Environment:

• OS: MacOS Catalina
• @graphql-codegen/...: 1.9.1
• NodeJS: 13.2.0

[dotansimha]

@msheakoski where does gql coming from when you use next.js?
We are using graphql-tag-pluck which knows how to pluck operations, but it's not supporting all use cases by default (you can change it with pluckConfig).

[msheakoski]

I am importing gql from graphql-tag. My current workflow each time I need to run graphql-code-generator is to rename the dirs/files to remove brackets, run graphql-code-generator, and rename them back, adding the brackets again.

[SirensOfTitan]

Seeing this too, looks like a regression as of the 1.9.x branch. We're using graphql-tag, and the codegen on 1.9.1 (and 1.9.0) removes all of our queries in files with brackets in their name, e.g. [tag].tsx.

[msheakoski]

Here is a CodeSandbox reproduction of the issue:

After running yarn graphql-codegen, the only hook that appears in hooks-generated.tsx is useThisWorks based on the query located in pages/works/it-works.tsx.

useThisDoesNotWork based on the query located in pages/does-not-work/[name].tsx does not appear in hooks-generated.tsx

[JClackett]

Can also confirm this happens with my Next.js project when query is in /[name].tsx files!

[msheakoski]

@dotansimha I think the issue started with this commit ardatan/graphql-toolkit@6d99f92 where glob was switched to globby affecting file-scanner.ts

[msheakoski]

I just found more evidence to back up my theory: Globby skips folder with symbols in it's name

[msheakoski]

@ardatan Adding you to the issue since you made the change and have a better understanding of the codebase. Do you think this is likely the cause?

[msheakoski]

For anyone that needs a quick fix, graphql-code-generator 1.8.3 works with Next.js apps but 1.9.0+ currently does not.

[dotansimha]

@ardatan can you please take a look? I think it's something we should solve in graphql-toolkit

[ardatan]

https://github.com/ardatan/graphql-toolkit/pull/388
This PR fixes the issue @dotansimha

[dotansimha]

Available in v1.10.0.