ardatan / ardatan/graphql-tools
Add hooks to `graphql-tag-pluck` to modify its behavior
- Dominant language
- TypeScript
- Stars
- 5.4k
- Forks
- 830
- Avg merge
- 10h 59m
- Merged PRs (30d)
- 45
Description
Hi, thanks for maintaining this repo!
### Is your feature request related to a problem? Please describe.
I'm using [graphql-codegen-generator](https://github.com/dotansimha/graphql-code-generator), which relies internally on `@graphql-tools/graphql-tag-pluck`. I'm creating [codegen utilities for @shopify/hydrogen](https://github.com/Shopify/hydrogen/pull/707) using all of this, and I'd love to have some extra flexibility in two areas:
#### Detecting GQL in template literals
Right now it understands leading comments like `/* GraphQL */` and supports the `gqlMagicComment` option to change the comment. However, we use comments **inside the string itself**, which is also valid for syntax highlights in VSCode:
```ts
const QUERY = `#graphql
query { ...}
`;
```
This is not recognized by graphql-tag-pluck at the moment.
#### Extracting GQL strings from files
The integration I'm working on only uses strings, not AST. The problem I've found is that variables like `${FRAGMENT}` are [completely removed](https://github.com/ardatan/graphql-tools/blob/6151a5d9e48d7a12bee6994702baa0f27ef9d547/packages/graphql-tag-pluck/src/visitor.ts#L192-L194) from the extracted string so we lose information.
Instead, I'd like to annotate the string with this `${FRAGMENT}` somehow so that later we know how some queries depend on fragments. For example, by adding a comment to the string. For this, we'd need to change how the `pluckStringFromFile` function works.
Our target is to generate the following code:
```ts
interface GeneratedQueryTypes {
'#graphql\n query layout {\n shop {\n ...f1\n }\n }\n #graphql\n fragment f1 on Shop {\n name\n description\n }\n\n': {
return: LayoutQuery;
variables: LayoutQueryVariables;
};
// ...
}
```
And, with that, we can match strings to variables and return types.
### Describe the solution you'd like
It would be great if we can add a couple of hooks to modify how `graphql-tag-pluck` works internally (names TBD):
- `isGqlTemplateLiteral(node: Node, options: GqlOptions): boolean`
- `pluckStringFromFile(code: string, node: Node, options: GqlOptions): string`
Something like this [example implementation](https://github.com/frandiox/graphql-tools/commit/efe6e8d5be1430bdcf6ebb37190559ad3fd0adc4). We would use the hooks [like this](https://github.com/Shopify/hydrogen/blob/b07cafe69a4a730910e637bbe1dd0ef59f30c1c7/packages/hydrogen-codegen/src/index.ts#L102) to make codegen work with plain strings:

---
Let me know if this is something reasonable and I'll make a PR 👍
Contributor guide
Research direction
Start by reading packages/graphql-tag-pluck/src/visitor.ts, especially the current pluckStringFromFile logic referenced in the issue, and compare it with the proposed hook signatures and linked example implementation. Done means the package exposes configurable hooks for template-literal detection and string extraction, supporting the described comment and interpolation cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- graphql, typescript
- Domain
- api
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100