ardatan / ardatan/graphql-tools

Add hooks to `graphql-tag-pluck` to modify its behavior

Open
#5,127 1 comment 10 reactions 0 assignees View on GitHub
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:

image

---

Let me know if this is something reasonable and I'll make a PR 👍

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.