Generate source maps pointing from generated file to it's source

[hediet]

It would be great if one could easily jump to the .graphql file the symbol from the .ts file was created from.

E.g. we have this code in main.tsx:

import { withGetOverview } from 'graphql';
// ...
export const OverviewRoot = withGetOverview /* @Pos1 */<OverviewProps>(
	{ options: props => ({ variables: { groupAmount:  1} }) }
)(OverviewConnected);

and the query in query.graphql:

# @Pos2
query GetOverview($groupAmount: Int!) {
 ...
}

It would be great if I could navigate from @Pos1 directly to @Pos2. There are multiple ways to implement that:

• Sourcemaps
• Typescript Language Service Plugin

A sourcemap would map graphql.tsx to query.graphql and other graphql files. However, an editor extension would be required that navigates to the source (like Source maps navigator in vscode).

A typescript language service plugin would override the definition lookup method.

What do you think?

[dotansimha]

Hi @hediet, thank you for opening this issue. I think source map might do the trick, but I never tried to generated those before. We might add the feature in the future (PRs are always welcome 😉 )

[DomVinyard]

function MyComponent() {
  // When i cmd+click on useCurrentUserQuery it takes me to the generated output (see image below)
  const { data, loading, error } = useCurrentUserQuery();

A quick implementation might be to just write comments into the generated output, with links to the original source file.

This link will be clickable in most modern IDEs. Downside is that navigating to the original .graphql file is two clicks rather than a single click, but may be a quick win anyway. Apologies not sure I'll have the capacity to make a PR any time soon but thought it was worth throwing it out there

cc victor-yunenko